Figma MCPに相談する

カーソルでFigma MCPと会話

このプロジェクトは、Cursor AI と Figma 間のモデルコンテキストプロトコル (MCP) 統合を実装し、Cursor が Figma と通信してデザインを読み取り、プログラムで変更できるようにします。

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

プロジェクト構造

src/talk_to_figma_mcp/ - Figma 統合用の TypeScript MCP サーバー
src/cursor_mcp_plugin/ - カーソルと通信するためのFigmaプラグイン
src/socket.ts - MCP サーバーと Figma プラグイン間の通信を容易にする WebSocket サーバー

始める

まだインストールしていない場合は、Bun をインストールしてください。

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

セットアップを実行すると、カーソルのアクティブプロジェクトにMCPもインストールされます。

bun setup

Websocketサーバーを起動する

bun socket

MCPサーバー

bunx cursor-talk-to-figma-mcp

Figmaプラグインをインストールする

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

ビデオリンク

設計自動化の例

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

一括テキスト置換機能の開発にご協力いただいた@dusskaparkに感謝します。デモ動画はこちらです。

インスタンスオーバーライドの伝播@dusskaparkによるもう一つの貢献は、単一のコマンドで、ソースインスタンスから複数のターゲットインスタンスにコンポーネントインスタンスのオーバーライドを伝播することです。この機能により、類似したカスタマイズが必要なコンポーネントインスタンスを扱う際の反復的な設計作業が大幅に削減されます。デモビデオをご覧ください。

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

MCP サーバー: カーソルとの統合

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

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

WebSocketサーバー

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

bun socket

Figmaプラグイン

Figmaで、プラグイン > 開発 > 新しいプラグインに移動します
「既存のプラグインをリンク」を選択
src/cursor_mcp_plugin/manifest.jsonファイルを選択します。
プラグインはFigma開発プラグインで利用できるようになります。

Windows + WSL ガイド

PowerShell経由でbunをインストールする

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

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

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

Webソケットを起動する

bun socket

使用法

WebSocketサーバーを起動する
カーソルにMCPサーバーをインストールする
Figmaを開いてカーソルMCPプラグインを実行します。
join_channelを使用してチャネルに参加し、プラグインを WebSocket サーバーに接続します。
MCPツールを使ってFigmaと通信するにはカーソルを使用します

MCPツール

MCP サーバーは、Figma と対話するための次のツールを提供します。

書類選考

get_document_info - 現在のFigmaドキュメントに関する情報を取得します
get_selection - 現在の選択に関する情報を取得する
read_my_design - パラメータなしで現在の選択に関する詳細なノード情報を取得します
get_node_info - 特定のノードに関する詳細情報を取得する
get_nodes_info - ノードIDの配列を指定して複数のノードの詳細情報を取得します

注釈

get_annotations - 現在のドキュメントまたは特定のノード内のすべての注釈を取得します
set_annotation - マークダウンサポートを使用して注釈を作成または更新します
set_multiple_annotations - 複数のアノテーションを効率的に一括作成/更新する
scan_nodes_by_types - 特定のタイプのノードをスキャンします（注釈ターゲットを見つけるのに役立ちます）

プロトタイピングと接続

get_reactions - 視覚的なハイライトアニメーションを使用してノードからすべてのプロトタイプ反応を取得します
set_default_connector - コピーした FigJam コネクタを、接続を作成するためのデフォルトのコネクタスタイルとして設定します (接続を作成する前に設定する必要があります)
create_connections - プロトタイプフローまたはカスタムマッピングに基づいて、ノード間にFigJamコネクタラインを作成します。

要素の作成

create_rectangle - 位置、サイズ、オプションの名前を指定して新しい四角形を作成します
create_frame - 位置、サイズ、オプションの名前を指定して新しいフレームを作成します
create_text - カスタマイズ可能なフォントプロパティを持つ新しいテキストノードを作成します

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

scan_text_nodes - 大規模なデザインのためにインテリジェントなチャンク化を使用してテキストノードをスキャンします
set_text_content - 単一のテキストノードのテキストコンテンツを設定する
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 - ノードのコーナー半径を設定します。コーナーごとのオプション制御も使用できます。

レイアウトと構成

move_node - ノードを新しい位置に移動する
resize_node - 新しい寸法でノードのサイズを変更する
delete_node - ノードを削除する
delete_multiple_nodes - 複数のノードを一度に効率的に削除します
clone_node - オプションの位置オフセットで既存のノードのコピーを作成します

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

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プラグインの構築

Figma プラグインディレクトリに移動します。
cd src/cursor_mcp_plugin
code.jsとui.htmlを編集する

ベストプラクティス

Figma MCP を使用する場合:

コマンドを送信する前に必ずチャンネルに参加してください
まずget_document_infoを使ってドキュメントの概要を取得します
変更前にget_selectionで現在の選択内容を確認する
ニーズに応じて適切な作成ツールを使用します。
- コンテナ用のcreate_frame
- 基本図形のcreate_rectangle
- テキスト要素のcreate_text
get_node_infoを使用して変更を確認する
一貫性を保つために可能な場合はコンポーネントインスタンスを使用する
すべてのコマンドは例外をスローする可能性があるため、エラーを適切に処理します。
大きなデザインの場合:
- scan_text_nodesでチャンクパラメータを使用する
- WebSocket の更新を通じて進行状況を監視する
- 適切なエラー処理を実装する
テキスト操作の場合:
- 可能な場合はバッチ操作を使用する
- 構造的な関係を考慮する
- 対象を絞ったエクスポートで変更を検証する
従来の注釈を変換する場合:

テキストノードをスキャンして番号付きマーカーと説明を識別する
scan_nodes_by_typesを使用して、アノテーションが参照する UI 要素を見つけます。
パス、名前、または近接性を使用してマーカーをターゲット要素と一致させます
get_annotationsを使用してアノテーションを適切に分類する
set_multiple_annotationsを使用してネイティブアノテーションを一括作成する
すべての注釈がターゲットに適切にリンクされていることを確認する
変換が成功したら、従来の注釈ノードを削除します。

プロトタイプの麺を FigJam コネクタとして視覚化します。

get_reactionsを使用してプロトタイプフローを抽出します。
set_default_connectorでデフォルトのコネクタを設定する。
明確な視覚的なフローマッピングを実現するために、 create_connectionsを使用してコネクタラインを生成します。

ライセンス

マサチューセッツ工科大学

Talk to Figma MCP

Integrations