Figma MCP

🚀 Figma 图文内容提取服务

このサービスは、Figma ファイルから文字と画像の内容を効率的に抽出し、様々な開発シーンのニーズを満たすことができます。

🚀 クイックスタート

📦 インストール

Smithery を通じたインストール

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

ローカル開発とパッケージング

1. リポジトリをクローンします：git clone <リポジトリのURL>
2. 依存関係をインストールします：pnpm install
3. .env.example をコピーして .env という名前に変更し、Figma API アクセストークンを記入します。
4. 開発モードで起動します：pnpm run dev
5. プロジェクトをビルドします：pnpm run build
6. サービスをパッケージングします：pnpm run publish:local

パッケージング後、ルートディレクトリに .tgz ファイルが生成されます。例えば、figma-mcp-server-1.0.0.tgz です。

ローカルインストールと使用

方法一：NPM からインストール（推奨）

npm install -g @yhy2001/figma-mcp-server
figma-mcp --figma-api-key=<your-figma-api-key>

方法二：ローカルパッケージを使用してインストール

npm install -g ./figma-mcp-server-1.0.0.tgz
figma-mcp --figma-api-key=<your-figma-api-key>

方法三：プロジェクト内で使用

npm install @yhy2001/figma-mcp-server --save
# package.json に起動スクリプトを追加します：
"start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"

コマンドライン引数

• --version：バージョン番号を表示します。
• --figma-api-key：必須の Figma API アクセストークンです。
• --port：サービスが動作するポート（デフォルト：3333）。
• --stdio：デフォルトの HTTP/SSE モードではなく、コマンドモードで実行します。
• --help：ヘルプ情報を表示します。

💻 使用例

AI ツールとの接続

設定ファイルの使用例

# MCP クライアント設定：
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

# ローカルで実行する際の参考：
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Cursor との接続手順

1. サービスを起動します：figma-mcp --figma-api-key=<your-figma-api-key>
2. Cursor の設定 → 機能タブで MCP サーバーのアドレス http://localhost:3333 を追加します。
3. 接続が成功したことを確認した後、Agent モードで Composer を使用します。
4. Figma ファイルのリンクを貼り付け、Cursor にデザインの実装を依頼します。

提供されるツール

get_figma_data

Figma のテキストと画像の内容を取得します。

• 入力：Figma ファイルの URL または ID
• 出力：抽出されたテキストと画像のリスト
• 応答例：

  {
    "text": ["Figma テキスト抽出サービスをご利用いただき、ありがとうございます", ...],
    "images": ["https://storage.googleapis.com/...", ...]
  }
  

extract_figma_images

画像を抽出します。

figma-mcp extract-images --url <figma-file-url> --output ./images/

figma-to-markdown

Markdown 形式に変換します。

figma-mcp convert-to-md --url <figma-file-url> --output README.md

出力例

Figma のサンプルリンク のファイルを処理すると、抽出結果は以下のようになる可能性があります。

# Figma サンプルドキュメント

当社のサービスをご利用いただき、ありがとうございます！

## 重要な情報
- **サポートされる形式**：テキスト、画像、表など
- **使用制限**：関連する法律と規制を遵守してください。

![サンプル画像](images/example.png)

以上のツールを使用することで、ユーザーは Figma ファイル内のテキストと画像の内容を効率的に抽出および処理することができ、様々な開発シナリオのニーズを満たすことができます。