TalkToFigma

Figma MCP と対話する

このプロジェクトは、AI エージェント（Cursor、Claude Code）と Figma の間の Model Context Protocol（MCP）統合を実装します。AI エージェントが Figma と通信し、デザインの読み取りやプログラムによる変更を行えます。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

プロジェクト構成

• src/talk_to_figma_mcp/ - Figma 統合用 TypeScript MCP サーバー
• src/cursor_mcp_plugin/ - Cursor と通信するための Figma プラグイン
• src/socket.ts - MCP サーバーと Figma プラグイン間の通信を仲介する WebSocket サーバー

使用方法

1. まだインストールしていない場合は、Bun をインストールします。

curl -fsSL https://bun.sh/install | bash

2. セットアップを実行します。これにより、Cursor のアクティブなプロジェクトにも MCP がインストールされます。

bun setup

3. WebSocket サーバーを起動します。

bun socket

4. 新機能 Figma コミュニティページから Figma プラグインをインストールするか、ローカルにインストールします。

クイックビデオチュートリアル

動画リンク

デザイン自動化の例

テキストコンテンツの一括置換

テキストの一括置換機能を提供してくださった @dusskapark に感謝します。デモ動画をご覧ください。

インスタンスオーバーライドの伝播 @dusskapark によるもう一つの貢献です。 1 つのコマンドで、ソースインスタンスのコンポーネントインスタンスオーバーライドを複数のターゲットインスタンスに伝播できます。この機能により、同様のカスタマイズが必要なコンポーネントインスタンスを扱う際の反復的なデザイン作業を大幅に削減できます。デモ動画をご覧ください。

手動セットアップとインストール

MCP サーバー：Cursor との統合

~/.cursor/mcp.json の Cursor MCP 設定にサーバーを追加します。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

WebSocket サーバー

WebSocket サーバーを起動します。

bun socket

Figma プラグイン

1. Figma で、Plugins > Development > New Plugin に移動します
2. 「Link existing plugin」を選択します
3. src/cursor_mcp_plugin/manifest.json ファイルを選択します
4. これで、Figma の開発用プラグインからプラグインを利用できるようになります

Windows + WSL ガイド

1. PowerShell から bun をインストールします

powershell -c "irm bun.sh/install.ps1|iex"

2. src/socket.ts のホスト名 0.0.0.0 のコメントを解除します

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

3. WebSocket を起動します

bun socket

使用方法

1. WebSocket サーバーを起動します
2. Cursor に MCP サーバーをインストールします
3. Figma を開き、Cursor MCP プラグインを実行します
4. join_channel を使用してチャンネルに参加し、プラグインを WebSocket サーバーに接続します
5. MCP ツールを使用して、Cursor から Figma と通信します

ローカル開発環境のセットアップ

開発するには、MCP 設定を更新してローカルディレクトリを参照するようにします。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
    }
  }
}

MCP ツール

MCP サーバーは、Figma とやり取りするための以下のツールを提供します。

ドキュメントと選択範囲

• get_document_info - 現在の Figma ドキュメントに関する情報を取得します
• get_selection - 現在の選択範囲に関する情報を取得します
• read_my_design - パラメーターなしで、現在の選択範囲のノード情報を詳細に取得します
• get_node_info - 特定のノードに関する詳細情報を取得します
• get_nodes_info - ノード ID の配列を指定して、複数のノードに関する詳細情報を取得します
• set_focus - 特定のノードを選択し、ビューポートをスクロールしてそのノードにフォーカスします
• set_selections - 複数のノードを選択し、それらが表示されるようにビューポートをスクロールします

注釈

• get_annotations - 現在のドキュメントまたは特定のノードにあるすべての注釈を取得します
• set_annotation - Markdown に対応した注釈を作成または更新します
• set_multiple_annotations - 複数の注釈を効率的に一括作成または更新します
• scan_nodes_by_types - 特定のタイプのノードを検索します（注釈対象を見つけるのに便利です）

プロトタイピングと接続

• get_reactions - ノードのすべてのプロトタイプリアクションを、視覚的なハイライトアニメーション付きで取得します
• set_default_connector - コピーした FigJam コネクタを、接続作成時のデフォルトのコネクタスタイルとして設定します（接続を作成する前に設定する必要があります）
• create_connections - プロトタイプのフローまたはカスタムマッピングに基づいて、ノード間に FigJam のコネクタ線を作成します

要素の作成

• create_rectangle - 位置、サイズ、任意の名前を指定して、新しい長方形を作成します
• create_frame - 位置、サイズ、任意の名前を指定して、新しいフレームを作成します
• create_section - キャンバス上の関連コンテンツをまとめるセクションを作成します
• create_text - フォントプロパティをカスタマイズして、新しいテキストノードを作成します

テキストコンテンツの変更

• scan_text_nodes - 大規模なデザイン向けにインテリジェントなチャンク分割を行い、テキストノードをスキャンします
• set_text_content - 1つのテキストノードのテキストコンテンツを設定します
• set_multiple_text_contents - 複数のテキストノードを効率的に一括更新します

自動レイアウトと間隔

• set_layout_mode - フレームのレイアウトモードと折り返し動作を設定します（NONE、HORIZONTAL、VERTICAL）
• set_padding - 自動レイアウトフレームのパディング値を設定します（上、右、下、左）
• set_axis_align - 自動レイアウトフレームの主軸と交差軸の配置を設定します
• set_layout_sizing - 自動レイアウトフレームの水平方向と垂直方向のサイズ設定モードを設定します（FIXED、HUG、FILL）
• set_item_spacing - 自動レイアウトフレーム内の子要素間の距離を設定します

スタイル設定

• set_fill_color - ノードの塗りつぶし色を設定します（RGBA）
• set_stroke_color - ノードの線の色と太さを設定します
• set_corner_radius - 角ごとの個別設定も指定して、ノードの角丸半径を設定します
• set_image_fill - ローカルファイルパス、URL、または base64 データの画像でノードを塗りつぶします（FILL、FIT、CROP、または TILE）

レイアウトと整理

• move_node - ノードを新しい位置に移動します
• resize_node - 新しい寸法に合わせてノードのサイズを変更します
• delete_node - ノードを削除します
• delete_multiple_nodes - 複数のノードを一度に効率的に削除します
• clone_node - 任意の位置オフセットを指定して、既存のノードのコピーを作成します
• rename_node - ノードの名前を変更します
• set_parent - デフォルトで絶対位置を維持しながら、ノードを新しい親（セクション、フレーム、またはグループ）に移動します

コンポーネントとスタイル

• get_styles - ローカルスタイルの情報を取得します
• get_local_components - ローカルコンポーネントの情報を取得します
• create_component_instance - コンポーネントのインスタンスを作成します
• get_instance_overrides - 選択したコンポーネントインスタンスからオーバーライドプロパティを抽出します
• set_instance_overrides - 抽出したオーバーライドを対象のインスタンスに適用します

エクスポートと高度な機能

• export_node_as_image - ノードを画像としてエクスポートします（PNG、JPG、SVG、または PDF）。画像のサポートは限定的で、現在は base64 がテキストとして返されます

接続の管理

• join_channel - Figma と通信するため、特定のチャンネルに参加します

MCP プロンプト

MCP サーバーには、複雑なデザインタスクを進めるためのガイドとなる、いくつかのヘルパープロンプトが含まれています。

• design_strategy - Figma デザインを扱う際のベストプラクティス
• read_design_strategy - Figma デザインを読み取る際のベストプラクティス
• text_replacement_strategy - Figma デザインのテキストを置き換える体系的な方法
• annotation_conversion_strategy - 手動の注釈を Figma のネイティブ注釈に変換する方法
• swap_overrides_instances - Figma のコンポーネントインスタンス間でオーバーライドを引き継ぐ方法
• reaction_to_connector_strategy - 'get_reactions' の出力を使用して Figma のプロトタイプリアクションをコネクタ線に変換し、順番に 'create_connections' を使用する方法を案内する戦略

開発

Figma プラグインのビルド

1. Figma プラグインのディレクトリに移動します。

   cd src/cursor_mcp_plugin
   

2. code.js と ui.html を編集します

ベストプラクティス

Figma MCP を使用する際は、次の点に従ってください。

1. コマンドを送信する前に、必ずチャンネルに参加してください
2. まず get_document_info を使ってドキュメントの概要を取得してください
3. 変更を加える前に get_selection を使って現在の選択範囲を確認してください
4. 必要に応じて適切な作成ツールを使用してください：
   • コンテナーには create_frame
   • 基本図形には create_rectangle
   • テキスト要素には create_text
5. get_node_info を使って変更を確認してください
6. 一貫性を保つため、可能な場合はコンポーネントインスタンスを使用してください
7. すべてのコマンドで例外が発生する可能性があるため、適切にエラーを処理してください
8. 大規模なデザインの場合：
   • scan_text_nodes のチャンク化パラメーターを使用してください
   • WebSocket の更新を通じて進行状況を監視してください
   • 適切なエラー処理を実装してください
9. テキスト操作の場合：
   • 可能な場合はバッチ操作を使用してください
   • 構造的な関連性を考慮してください
   • 対象を絞ったエクスポートで変更を確認してください
10. レガシーアノテーションを変換する場合：
    • テキストノードをスキャンして、番号付きマーカーと説明を特定してください
    • scan_nodes_by_types を使って、アノテーションが参照する UI 要素を見つけてください
    • パス、名前、または近接性を使って、マーカーと対象要素を対応付けてください
    • get_annotations を使って、アノテーションを適切に分類してください
    • set_multiple_annotations を使って、ネイティブアノテーションをバッチで作成してください
    • すべてのアノテーションが対象に正しくリンクされていることを確認してください
    • 変換が成功した後、レガシーアノテーションノードを削除してください
11. プロトタイプのヌードルを FigJam コネクターとして視覚化します：

• get_reactions を使ってプロトタイプのフローを抽出し、
• set_default_connector を使ってデフォルトのコネクターを設定し、
• create_connections を使って、視覚的にわかりやすいフローマッピング用のコネクター線を生成します。

ライセンス

MIT