figma-bridge-mcp

AI が Figma キャンバスに描画し、デザインをコードとして読み取れるようにします。

Figma Desktop 向けの双方向 Model Context Protocol ブリッジです。
Figma API キーは不要です。クラウドも不要です。すべて localhost 上で動作します。

クイックスタート · 仕組み · ツール · セキュリティ · トラブルシューティング · 変更履歴

Figma, Inc. とは提携、推奨、スポンサー関係にありません。 「Figma」は Figma, Inc. の商標であり、ここでは互換性を説明する目的でのみ使用しています。

概要

figma-bridge-mcp は、AI アシスタントを Figma Desktop で開いているドキュメントに接続します。

Figma Desktop が必要です。 プラグインは localhost 経由でサーバーと通信しますが、Figma のウェブアプリではこれが許可されていません。

仕組み

AI クライアント、MCP サーバー（Node）、Figma プラグイン（Figma Desktop 内）の 3 つが連携します。プラグインがサーバーをポーリングするため、Figma へのインバウンド接続は必要ありません。

flowchart LR
  subgraph Client["AI client"]
    A["Claude Code · Cursor · Windsurf<br/>VS Code · Antigravity · any MCP client"]
  end
  subgraph Server["figma-bridge-mcp  (Node)"]
    B["MCP server<br/>5 tools · stdio"]
    C["Code sandbox<br/>runs figma_write code"]
    D["HTTP bridge<br/>127.0.0.1:47451"]
  end
  subgraph Figma["Figma Desktop"]
    E["Plugin UI<br/>long-poll client"]
    F["Plugin main thread<br/>66 operations"]
    G[("Figma document")]
  end
  A <-->|"MCP / stdio"| B
  B --> C
  C --> D
  B --> D
  D <-->|"HTTP long-poll"| E
  E <-->|postMessage| F
  F <--> G

1 回の往復処理

サーバーは各ポーリングを最大 8 秒間保留し、処理がキューに入るとすぐに応答するため、通常のレイテンシは 100 ms 未満です。

sequenceDiagram
  autonumber
  participant AI as AI client
  participant S as MCP server
  participant B as Bridge :47451
  participant P as Figma plugin
  AI->>S: figma_write { code }
  S->>S: run code in sandbox
  S->>B: queue operation (create, modify, …)
  P->>B: GET /poll  (held up to 8 s)
  B-->>P: operations
  P->>P: apply to the Figma document
  P->>B: POST /response { id, data }
  B-->>S: resolve operation
  S-->>AI: result + logs

複数の Figma ファイルを同時に扱う

開いているプラグインの各インスタンスは、それぞれ独自のセッションを登録します。特定のファイルを対象にするには、任意の sessionId を figma_write / figma_read に渡します。そのセッションが接続されていない場合、別のファイルに書き込む代わりに呼び出しが失敗します。

クイックスタート

1 · クライアントに MCP サーバーを追加する

claude mcp add figma-bridge-mcp -- npx @hanoilab/figma-bridge-mcp          # this project
claude mcp add --scope user figma-bridge-mcp -- npx @hanoilab/figma-bridge-mcp   # all projects

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

{
  "mcp": {
    "servers": {
      "figma": { "command": "npx", "args": ["-y", "@hanoilab/figma-bridge-mcp"] }
    }
  }
}

git clone https://github.com/nguyendinhphongdx/figma-bridge-mcp
cd figma-bridge-mcp && npm install
# point your MCP client at: node /path/to/figma-bridge-mcp/server/index.js

設定を編集した後、クライアントを再起動してください。 MCP サーバーは起動時にのみ読み込まれます。

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

1. **⬇ プラグインをダウンロード**し、任意の場所に解凍します。
2. Figma Desktopで、*プラグイン → 開発 → マニフェストからプラグインをインポート…*を選び、manifest.jsonを指定します。
3. プラグイン → 開発 → Bridge MCP for Figmaを実行します。

サーバーに接続すると、プラグインのウィンドウに緑色の点が表示されます。

3 · 接続してデザインする

アシスタントに次のように伝えます。

「figma-bridge-mcp に接続して」

figma_statusを呼び出し、ファイル、ページ、プラグインのバージョンを確認します。その後、作成したいものを説明します。

「Apple と Google のサインインボタンがあるモバイルのログイン画面を描いて」

flowchart LR
  P["Your prompt"] --> D["figma_docs<br/>load API + design rules"]
  D --> R["figma_read<br/>inspect the canvas"]
  R --> W["figma_write<br/>draw / modify"]
  W --> S["figma_read screenshot<br/>verify"]
  S -->|"needs fixes"| W
  S -->|"looks right"| Done(["Done"])

更新

npx @hanoilab/figma-bridge-mcp@latest --version   # prints the new version and the plugin path

クライアントを再起動し、表示されたパスからmanifest.jsonを再インポートします（プラグイン → 開発 → 開発中のプラグインを管理）。Figma プラグインは自動更新されません。figma_statusを実行し、pluginVersionが一致していることを確認します。

ツール

サーバーは5つの MCP ツールを公開しています。

デザインからコードへ

flowchart LR
  F["Select a frame<br/>in Figma"] --> A["get_design_context<br/>layout · tokens · typography"]
  F --> B["get_css<br/>ready-to-paste CSS"]
  F --> C["get_component_map<br/>instances + import paths"]
  A --> AI(["AI generates<br/>React · Vue · Swift · Tailwind"])
  B --> AI
  C --> AI

figma_write — 47 個の操作

コードは figma オブジェクトを使用するサンドボックス内で実行されます。呼び出しはそれぞれ独立しているため、各呼び出しの開始時にノード ID を再取得してください。

const root = await figma.create({
  type: "FRAME", name: "Dashboard", width: 1440, height: 900, fill: "#0f172a",
});
const sidebar = await figma.create({
  type: "FRAME", name: "Sidebar", parentId: root.id,
  width: 240, height: 900, fill: "#1e293b", stroke: "#334155", strokeWeight: 1,
});
await figma.create({
  type: "TEXT", parentId: sidebar.id, x: 20, y: 24,
  content: "My App", fontSize: 16, fontWeight: "SemiBold", fill: "#f8fafc",
});

デフォルトでは非表示レイヤーはスキップされます。includeHidden: true を get_selection、get_design、search_nodes、または scan_design に渡すと、非表示レイヤーも含められます。

const vars = await figma.get_variables();
const varMap = {};
vars.collections.forEach(c => c.variables.forEach(v => { varMap[v.name] = v.id; }));

const card = await figma.create({
  type: "FRAME", name: "Card", width: 360, height: 200,
  layoutMode: "VERTICAL", paddingTop: 16, paddingLeft: 16, paddingBottom: 16, paddingRight: 16, itemSpacing: 12,
});
await figma.applyVariable({ nodeId: card.id, field: "fill", variableId: varMap["bg-surface"] });
await figma.applyVariable({ nodeId: card.id, field: "cornerRadius", variableId: varMap["radius-md"] });

セキュリティモデル

このブリッジにはログイン機能がないため、アクセスはネットワーク境界で制御されます。また、figma_write のコードはユーザーと同じ信頼レベルで扱われます。

flowchart LR
  R["HTTP request"] --> O{"Origin missing<br/>or 'null'?"}
  O -->|no| X1["403 — web page"]
  O -->|yes| H{"Host is<br/>loopback?"}
  H -->|no| X2["403 — DNS rebinding"]
  H -->|yes| A{"Operation on<br/>the allowlist?"}
  A -->|no| X3["400"]
  A -->|yes| Q["Queued for the plugin"]

脆弱性を発見しましたか？SECURITY.md をご覧ください。

設定

トラブルシューティング

プロジェクトの構成

figma-bridge-mcp/
├── server/                 npm package: MCP server + bridge
│   ├── index.js            MCP entry (stdio) and tool handlers
│   ├── bridge-server.js    HTTP bridge: long-poll, sessions, origin gate
│   ├── code-executor.js    sandbox for figma_write
│   ├── figma-proxy.js      the figma.* API seen by user code
│   ├── http-fetch.js       guarded fetch for images and icons
│   ├── allowed-ops.js      operation allowlist
│   └── docs/               reference served by figma_docs
├── src/plugin/             plugin source (plain files, concatenated)
├── plugin/                 manifest.json, ui.html, code.js (generated)
└── scripts/                build, test runner, regression tests

開発

npm install
npm run build:plugin    # src/plugin/*.js  →  plugin/code.js  (generated — never edit by hand)
npm test                # every scripts/test-*.mjs; no live Figma needed

プラグインのファイルは連結されると同じスコープを共有します。ファイルの順序は scripts/lib/plugin-files.mjs で管理されています。変更前に把握しておくべき不変条件については、CLAUDE.md を参照してください。

リリース： package.json の version を更新し、最上部の CHANGELOG.md の見出しを ## [x.y.z] — date に変更して、main にプッシュしてください。CI がテストを実行し、npm に公開し、コミットにタグを付け、プラグインの zip を添付した GitHub Release を作成して、MCP Registry を更新します。

ライセンス

MIT © nguyendinhphongdx。TranHoaiHung/figma-ui-mcp からフォークされています。元の著作権表示は LICENSE に保持されています。