Claude AIエージェント Talk to Figma MCP

AIエージェントがFigmaデザインを読み取り、分析し、修正できるようにします。

お気に入りのエージェントツールで動作します：

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 対象ユーザー

UX/UIチーム

手作業なしで反復的なデザインタスクを自動化し、ブランドの一貫性を維持します：

• 自動アクセシビリティ監査 - コントラストの問題を数秒で検出・修正

• 一括スタイル更新 - 単一のコマンドでドキュメント全体のカラー、タイポグラフィ、間隔を変更

• 視覚的階層分析 - デザイン構造に関する即時のフィードバックを取得

開発者

デザインから直接、本番環境対応のコードを生成します：

• React/Vue/SwiftUIコンポーネント - デザインからコードへワンステップで変換

• デザイントークンを用いたコーディング - デザインと開発の同期を維持

• ハンドオフの摩擦を軽減 - デザインチームとのやり取りを最小限に

主な利点: Dev Modeライセンスが必要なFigma公式MCPとは異なり、このMCPはあらゆるFigmaアカウントで動作します（無料アカウントでも利用可能）。

Related MCP server: Figma Console MCP Server

💡 実用的なユースケース

アクセシビリティ:

"コントラスト比が4.5:1未満のテキストをすべて見つけ、WCAG AAを満たす色を提案して"

リブランディング:

"ドキュメント全体のすべてのプライマリボタンで、#FF6B6Bを#E63946に変更して"

デザイン分析:

"この画面の視覚的階層を分析し、デザイン原則に基づいて改善案を提案して"

開発者へのハンドオフ:

"'CardProduct'のReactコンポーネントを、PropTypesとCSSモジュールによるスタイルを含めて生成して"

⚡️ クイックインストール

セットアップ: 5分 | 最初の自動化: 2分

要件

• Node.js がインストールされていること

• Figma Desktop がインストールされていること

• AIクライアント:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

ステップ1: WebSocketのインストールと起動

エージェントがFigmaにコマンドを送信できるようにします。

ターミナルを開き、ツールをインストールしたいフォルダに移動して、以下を実行します：

npx claude-talk-to-figma-mcp

💡 ヒント: このコマンドは「オールインワン」（クローン、インストール、起動）です。次回以降、プロジェクトフォルダ your-project/claude-talk-to-figma-mcp 内にいる場合は、単に bun run socket を実行するだけで済みます。

ステップ2: Figmaへのプラグインインストール

Figmaがエージェントからのコマンドを受信し、応答を返せるようにします。

Figma Desktopで「Menu」→「Plugins」→「Development」→「Import plugin from manifest」の順に進み、MCPをインストールしたフォルダ内の src/claude_mcp_plugin/manifest.json を選択します。

ステップ3: エージェントツールの設定

エージェントがMCPの読み取りおよび修正ツールを使用できるようにします。

Claude Desktop

claude-talk-to-figma-mcp.dxt（最新リリースのAssetsセクションから）をダウンロードしてダブルクリックします。Claudeが自動的に設定されます。

Cursor

1. Cursor Settings → Tools & Integrations を開きます

2. "New MCP Server" をクリックして mcp.json ファイルを開きます

3. 以下の設定を追加します：

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
    }
  }
}

4. ファイルを保存し、Cursorを再起動します

その他のエージェントツール

その他のツール（Claude Code、Windsurf、VS Code + GitHub Copilot、Cline、Roo Code）については、詳細インストールガイドの「エージェントツールの設定」の章の手順に従ってください。

ステップ4: 作業開始

1. Figmaでプラグインを開きます

2. チャンネルID（緑色のボックス内の太字コード）をコピーします

3. チャットで Connect to Figma, channel {your-ID} と入力します

✅ AIとのデザイン準備が完了しました！

日常的な作業セッション

日常業務で再度MCPを使用する場合、全プロセスを繰り返す必要はありません：

1. ソケットの起動: ターミナルでプロジェクトフォルダ your-project/claude-talk-to-figma-mcp に入り、bun run socket（または npm run socket）を実行します。

2. Figmaでプラグインを開く: 最近使用したプラグインリストから見つけることができます。

3. AIの接続: チャンネルIDをコピーし、エージェントに Connect to Figma, channel {your-ID} と伝えます。

🤖 マルチエージェントと並列実行

このMCPサーバーは安全な並列実行を標準でサポートしており、複数のAIエージェント（Claude Codeのサブエージェントやチームスワームなど）がプラグインをロックすることなく、同時にFigmaファイルで作業できます。組み込みのコマンドキューがサーバー側でリクエストを順次処理するため、Figma APIのタイムアウトを防ぎます。

注意: 複数のエージェントが同時にドキュメントを修正できるため、暗黙的なページコンテキストに依存することは安全ではありません。その結果、set_current_page のようなステートフルなコマンドはブロックされます。すべてのエージェントは、作成や構造変更のコマンド（create_frame、create_textなど）を実行する際、意図した parentId パラメータを明示的に指定する必要があります。

（この機能の設計と貢献をしてくれた @mmabas77 に特別な感謝を捧げます！）

🐳 代替手段: Dockerの使用

Dockerを好む場合や、チーム環境でWebSocketサーバーを実行する必要がある場合は、詳細インストールガイドのDockerインストールガイドを参照してください。

🛠️ 機能

デザイン分析

• ドキュメント情報、現在の選択範囲、スタイルの取得

• テキストのスキャン、コンポーネントの監査、アセットのエクスポート

要素の作成

• スタイルを完全に制御したシェイプ、テキスト、フレームの作成

• 要素の複製、グループ化、整理

修正

• 色、境界線、角丸、影の変更

• オートレイアウト、高度なタイポグラフィ

• ローカルコンポーネントおよびチームライブラリコンポーネントの操作

コマンド一覧を参照してください。

📚 ドキュメント

• 詳細インストール — 手動セットアップ、Cursor、Windsurfおよびその他のIDE

• 利用可能なコマンド — 完全なツールリファレンス

• トラブルシューティング — 一般的なエラーとその修正方法

• 貢献 — アーキテクチャ、テスト、貢献ガイド

• 変更履歴 — バージョン履歴

🙏 クレジット

Sonny Lazuardi氏による cursor-talk-to-figma-mcp に基づいています。Claude Desktop向けに適合させ、Xúlio Zé によって新しいツールで拡張されました。

プロジェクトへのすべての貢献については、貢献ガイドの「貢献者」の章をご覧ください。

MITライセンス

📊 プロジェクトステータス

✅ 安定版 - デザインおよび開発チームでの日常使用に対応

🚀 活発に開発中:

• Figma変数への完全対応

• Tailwind CSS/SwiftUIへのエクスポート機能の強化

特定の機能が必要ですか？

GitHub Issuesで提案してください

皆様のフィードバックと貢献がプロジェクトを支えています。❤️