figma-mcp-go

figma-mcp-go

Figma MCP — ローカルプラグイン統合

Figma プラグイン経由で読み取りと書き込みを完全に行えるオープンソースの Figma MCP サーバーです。テキストをデザインに、デザインをコードに変換します。Claude、Cursor、GitHub Copilot、およびあらゆる MCP クライアントで動作します。

主な特徴

• Figma Plugin API 経由でローカル実行します。REST API トークンは不要です。
• 開いている Figma ファイルをリアルタイムで読み取り、編集できます。60 個のツールを備えています。
• スタイル、変数、コンポーネント、プロトタイプ、テキスト、取り消し可能な複数ステップの一括処理に対応しています。
• read_design_strategy や design_strategy などの組み込みプロンプトを利用できます。
• トークン使用量を抑えられます。短いツールの説明、上限を設けたノードツリー、画像として返される画像を採用しています。

スタイル、変数、コンポーネント、プロトタイプ、コンテンツ

https://github.com/user-attachments/assets/eae41471-fc72-4574-8261-4f42c38b8c99

テキストからデザインへ、デザインからコードへ

https://github.com/user-attachments/assets/17bda971-0e83-4f18-8758-8ac2b8dcba62

---

開発の背景

ほとんどの Figma MCP サーバーはクラウドの Figma REST API を使用します。AI ツールはセッションごとに何百回も素早く呼び出すため、クラウドとの通信が増えるたびに遅延が発生します。

このサーバーは代わりに、手元のマシン上の Figma プラグインと通信します。API トークンなしで、開いているファイルをすばやくリアルタイムに読み書きできます。

---

セットアップ

npx または bunx でインストールできます。ビルド手順は不要です。セットアップ動画を視聴するか、以下の手順に従ってください。

1. AI ツールにサーバーを追加する

Claude Code CLI

# via npx
claude mcp add -s project figma-mcp-go -- npx -y @tunglt1810/figma-mcp-go@latest

# or via bunx
claude mcp add -s project figma-mcp-go -- bunx @tunglt1810/figma-mcp-go@latest

Codex CLI

# via npx
codex mcp add figma-mcp-go -- npx -y @tunglt1810/figma-mcp-go@latest

# or via bunx
codex mcp add figma-mcp-go -- bunx @tunglt1810/figma-mcp-go@latest

.mcp.json（Claude およびその他の MCP 互換ツール）

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go"]
    }
  }
}

.vscode/mcp.json（Cursor / VS Code / GitHub Copilot）

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@tunglt1810/figma-mcp-go"
      ]
    }
  }
}

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

1. Figma Desktop で、プラグイン → 開発 → マニフェストからプラグインをインポートを選択します。
2. plugin.zip から manifest.json を選択します。
3. 任意の Figma ファイルでプラグインを実行します。

3. 複数の AI ツールを使う（任意）

各 AI ツールはそれぞれ独自のサーバーを起動しますが、ポート上でプラグイン接続を保持できるのは 1 つだけです。

**同じファイルの場合：**何も変更する必要はありません。最初のサーバーがポート 1994 を使用し、ほかのサーバーはそのサーバーに呼び出しを転送します。停止した場合は、数秒以内に別のサーバーが引き継ぎます。

**別々のファイルの場合：**各ツールに専用のポートを割り当て、そのファイルのプラグインでも同じポートを設定します（設定の歯車アイコン）。

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go", "--port", "1995"]
    }
  }
}

プラグインはすべてのファイルで最後に使用したポートを記憶するため、別の場所でプラグインを開いたときはポートを確認してください。

--ip 0.0.0.0 を指定すると、ほかのマシンからの接続を受け付けます。

**セキュリティ：**プラグイン接続にはログイン機能がありません。デフォルトの 127.0.0.1 では、手元のマシンからのみ接続できます。それ以外のアドレスでは、ポートに接続できる人なら誰でも開いているファイルを読み取り、編集できます。サーバーは警告を表示し、プラグインは confirm モードを有効にします。SSH トンネルの使用をおすすめします。

4. 読み取り専用モード（任意）

--read-only を追加すると、Figma ファイルを変更できない 17 個のツールのみを提供します。対象は読み取りツール、export_screenshots、export_frames_to_pdf、および get_image_bytes です。AI が読み込むツールリストを約 84% 縮小できます。

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go", "--read-only"]
    }
  }
}

このフラグが制限するのは 1 つのサーバーのみです。同じポートを使う別の AI ツールがこのフラグを使っていない場合、引き続きファイルを編集できます。

プラグインパネル

パネルには、接続中のファイル、選択範囲、AI の処理内容が表示されます。

コントロール	機能
ガード	off（デフォルト）はすべての操作を実行します。confirm は削除や一括変更の前に確認します。read-only はすべての変更をブロックします。
元に戻す	直前の変更を元に戻します。batch_execute_pipeline の実行全体が 1 回の取り消しステップになります。
ログ	ツール、時刻、エラーを含むすべてのリクエストを表示します。Copy を使うと、バグ報告用にエクスポートできます。
ピン留め	現在の選択範囲を保存します。get_selection(source: "pinned") は、ユーザーが別の場所をクリックした後もその選択範囲を返します。

設定とパネルサイズはマシンごとに保存されます。パネルは Figma のライトテーマとダークテーマに追従します。

Dev Mode

set_codegen_result は、ノードにコードを保存します。コードは、そのファイルを利用する全員の Dev Mode の Code パネルに表示されます。コンポーネントに設定したコードは、すべてのインスタンスに表示されます。Language メニューでブロックを絞り込めます。指定した言語のブロックがない場合は、すべてのブロックが表示されます。

---

仕組み

最初に起動したサーバーがリーダーとなり、プラグインとの唯一の WebSocket 接続を保持します。それ以外のサーバーはフォロワーとなり、呼び出しをリーダーに転送します。

flowchart LR
    client([MCP client]) -- stdio --> tools
    client2([2nd MCP client]) -- stdio --> follower[Follower]

    subgraph leaderProc [Leader process]
        tools[tools<br/>60 tools, Check] -- Send --> leader[cluster.Leader<br/>:1994 /rpc /ws /ping]
        leader --> bridge[bridge<br/>request/response match]
    end

    follower -. POST /rpc .-> leader

    subgraph plugin [Figma plugin]
        ui[Plugin UI<br/>Svelte iframe] -- postMessage --> main[Plugin main<br/>dispatch handlers]
    end

    bridge == WebSocket ==> ui
    main -- read / write --> figma[(Figma document)]

ツール呼び出しの最初から最後まで：

sequenceDiagram
    participant C as MCP client
    participant T as tools
    participant L as cluster
    participant B as bridge
    participant U as Plugin UI
    participant M as Plugin main
    participant F as Figma

    C->>T: tools/call (stdio)
    T->>L: Send after Check
    Note over L: A follower first sends POST /rpc to the leader
    L->>B: forward
    B->>U: WebSocket request
    U->>M: postMessage
    M->>F: read / write nodes
    F-->>M: nodes
    M-->>U: response
    U-->>B: WebSocket reply
    B-->>L: matched by id
    L-->>T: (any, error)
    T-->>C: tool result

---

ツール

読み取り

ツール	機能
get_document	選択範囲、ページ、またはファイル全体のノードツリーを取得します。デフォルトでは 500 ノードで停止します。depth、maxNodes、detail、dedupe_components でサイズを調整できます
get_nodes_info	ID を指定してノードの詳細情報を取得します。不明な ID は missing に格納されます。depth と maxNodes で子ノードを制限できます
get_selection	選択中のノードを取得します。source: "pinned" を指定すると、ピン留めしたノードを取得します
get_metadata	ファイル名、現在のページ、すべてのページを取得します
search_nodes	ページ、ノード内、またはファイル全体で、名前やタイプを指定してノードを検索します
get_viewport	ビューポートの中心、ズーム倍率、表示領域を取得します
get_styles	塗り、テキスト、エフェクト、グリッドのスタイルを取得します
get_variable_defs	変数コレクション、モード、値を取得します
get_local_components	すべてのコンポーネントとコンポーネントセットを取得します
get_instance_overrides	インスタンスのコンポーネントプロパティと値を取得します
get_annotations	Dev Mode の注釈を取得します
get_fonts	現在のページのフォントを、使用頻度の高い順に取得します
get_reactions	ノードのプロトタイプリアクションを取得します

エクスポート

ツール	機能
export_screenshots	ノードを画像としてエクスポートします。outputPath を指定するとファイルに保存され、指定しない場合は返されます（PNG／JPG は画像、SVG はテキスト）。項目を指定しない場合は選択範囲が対象です
export_frames_to_pdf	フレームを 1 つの複数ページ PDF として保存します
get_image_bytes	画像の塗りに使われている元の画像ファイルを base64 で取得します
export_tokens	変数と塗りのスタイルを JSON または CSS としてエクスポートします
set_export_settings	ノードのエクスポートプリセットを設定します

作成

ツール	機能
create_node	FRAME、RECTANGLE、ELLIPSE、STAR、POLYGON、LINE、または SECTION を作成します
create_text	テキストノードを作成します（フォントを読み込みます）
create_vector	SVG からベクターを作成します（アイコンなど）
import_image	URL または base64 から、新しい長方形として、またはノード内に画像をインポートします
create_component	フレームをコンポーネントに変換します
create_component_instance	ローカルまたはライブラリのコンポーネントのインスタンスを作成します
combine_as_variants	コンポーネントをバリアントセットにまとめます
manage_component_properties	コンポーネントプロパティを追加、編集、削除、またはバインドします
create_connector	コネクター線を作成します。このツールは FigJam ファイルでのみ動作します
boolean_operation	図形を UNION、SUBTRACT、INTERSECT、または EXCLUDE でブール演算します
flatten_nodes	ノードを 1 つのベクターに統合します
outline_stroke	ストロークを塗りつぶされた図形に変換します

編集

ツール	説明
set_node_properties	位置、サイズ、半径、表示状態、ロック、不透明度、回転、ブレンド、制約、レイヤー順、マスク、線
set_paint	単色またはグラデーションの塗りつぶし、または線
set_auto_layout	オートレイアウト：方向、パディング、間隔、配置、HUG/FILL のサイズ設定、最小値／最大値
set_layout_grids	列、行、または正方形のグリッド
set_effects	シャドウ、ぼかし、ノイズ、テクスチャ、ガラス
set_text	テキストの内容とノード全体のテキスト設定
set_text_ranges	テキストの一部のスタイル設定：太字、色、リンク、リスト
find_replace_text	テキストの検索と置換。正規表現も使用可能
set_instance_overrides	インスタンスのコンポーネントプロパティを設定
swap_component	インスタンスを別のローカルまたはライブラリのコンポーネントに差し替え
detach_instance	インスタンスを通常のフレームに変換
clone_node	ノードをコピー
reparent_nodes	ノードを別の親に移動
group_nodes / ungroup_nodes	グループ化またはグループ解除
batch_rename_nodes	名前、検索／置換、正規表現、接頭辞、または接尾辞で名前を変更
set_annotations	Dev Mode の注釈（有料シート）
set_reactions	プロトタイプのリアクションを設定、追加、または削除
delete_nodes	ノードを削除

スタイル、変数、ページ

ツール	説明
create_style	PAINT、TEXT、EFFECT、または GRID スタイル
update_paint_style	ペイントスタイルの名前または色を変更
apply_style_to_node	ノードにスタイルを適用
delete_style	スタイルを削除
manage_variable	コレクション、モード、変数の作成、値の設定、削除、ノードへのバインド
manage_page	ページの追加、削除、名前変更、または移動

ワークフロー

ツール	説明
batch_execute_pipeline	1 回の呼び出しで複数の書き込みステップを実行し、ステップ間で結果を渡し、エラー時には元に戻します
set_selection	ユーザーに表示するノードを選択してズーム
save_version_checkpoint	大きな変更の前に名前付きバージョンを保存
set_codegen_result	Dev Mode の Code パネル用のコードを保存
manage_plugin_data	ファイル内のノードにキー／値形式のメモを保存

プロンプト

プロンプト	説明
read_design_strategy	デザインを適切に読み取る方法
design_strategy	デザインの作成と編集の方法
text_replacement_strategy	デザイン全体のテキストを分割して置換
annotation_conversion_strategy	手動のメモを Figma の注釈に変換
swap_overrides_instances	インスタンス間でオーバーライドをコピー
reaction_to_connector_strategy	プロトタイプのリンクをフローダイアグラムに変換

---

アップグレード

サーバーを更新するときは、プラグインも更新してください。 npx でサーバーは更新されますが、プラグインは手動でインストールします。古いプラグインでは新しいコマンドが拒否され、「Unknown request type」と表示されます。

各リリースでの変更点（削除されたツールや代わりに使用するツールなど）については、CHANGELOG.md をご覧ください。

---

開発

• サーバー： Go 1.27 以降（make test-go、make build-go）
• プラグイン： Bun 1.4 以降（cd plugin && bun install && bun run build）
• すべてのテスト： make test
• ログ： stderr。FIGMA_MCP_LOG=debug でツールのパラメーターと通信内容が表示されます。
• パッケージのルール： make deps-check は誤った依存関係のインポートがあると失敗します。internal/ には bridge（プラグインの WebSocket）、cluster（リーダー選出）、figma（ルール）、tools（ツール一覧）があります。許可される依存関係：tools → figma、cluster → bridge。

macOS バイナリには macOS 13 以降が必要です（Go 1.27）。

貢献

Issue や PR を歓迎します。

Star History