はじめに#

ローカル MCP ブリッジを介して、Figma Desktop を AI Agent に接続します。

対応する MCP クライアント（セットアップの詳細）：AI Agent を接続する — Cursor、Claude Code、Codex、Qoder、CodeBuddy、Trae。

#要件

• Figma Desktop（推奨。ブラウザタブはスリープして WebSocket が切断されることがあります）
• Node.js ≥ 20
• pnpm ≥ 9（ソースからビルドする場合）
• MCP 対応 Agent（Cursor / Claude Code / Codex / Qoder / CodeBuddy / Trae）

#パス A — 公開パッケージ（最速）

#1. プラグインをインストール

1. GitHub Releases ページを開きます
2. figma-agent-plugin-vX.Y.Z.zip をダウンロードします（実行する MCP のバージョンと一致させます）
3. 展開します
4. Figma Desktop → Plugins → Development → Import plugin from manifest…
5. 展開した manifest.json を選択します
6. Plugins → Development → Figma Agent Kit を実行します

MCP が実行中の場合、ブリッジステータスインジケーターが緑色（または再接続中）であることを確認します。

コンパクトな選択範囲専用ウィンドウには、ヘッダーの最小化コントロールを使用します。

歯車メニュー（言語、モデル、プロンプト、アップデート）：

#2. MCP サーバーを設定

クライアントごとの完全な手順：AI Agent を接続する（Cursor、Claude Code、Codex、Qoder、CodeBuddy、Trae）。

Cursor の簡易例 — ~/.cursor/mcp.json またはプロジェクトの .cursor/mcp.json：

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

カスタムポート（プラグインビルドと一致させる必要があります）：

"env": { "FIGMA_AGENT_MCP_PORT": "1998" }

編集後に Agent / MCP サーバーを再起動します。Cursor の MCP パネルには 37 tools enabled と表示されます。

#3. 動作確認

Agent に次を依頼します。

1. list_files — 開いているファイルが表示されるはずです
2. get_selection — 先に Frame を選択します
3. get_node / get_screenshot — 読み取り経路を確認します
4. 任意で save_screenshots に scale: 3、compress: true を指定します

#パス B — ソースから開発

git clone https://github.com/ChinaCarlos/figma-agent-kit.git
cd figma-agent-kit
pnpm install
pnpm build:all

次からプラグインをインポートします。

packages/figma-agent-plugin/manifest.json

MCP を手動で開始します（反復開発中は任意）。

pnpm start:mcp

または Cursor からビルド済みバイナリを指定します。

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "node",
      "args": ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]
    }
  }
}

watch モード：

pnpm dev          # plugin
pnpm dev:mcp      # MCP TypeScript watch

UI / ブリッジを変更した後は、Figma でプラグインを再読み込みし、MCP クライアントを再起動してください。

#ポート同期

既定のブリッジポートは bridge.config.json の 1998 です。

pnpm sync:bridge   # also runs on predev / prebuild

ポートを変更する場合：同期 → プラグインを再ビルド → 再インポート / 再読み込み → 一致する FIGMA_AGENT_MCP_PORT で MCP を再起動します。

#任意：プラグイン内 AI

rename と視覚的グループ化には、プラグイン設定内の OpenAI 互換 API キーが必要です。AI 機能 を参照してください。
MCP ブリッジツールにはそのキーは不要です。

#スライス書き出し（プラグイン UI）

プラグインパネルからの 1× プレビュー / 3× PNG + ZIP については、スライスを書き出す を参照してください。

#次のステップ