de en es ja ko ru zh

Figma Agent MCP

Name: Figma Agent MCP
Author: TrungLee003

by TrungLee003

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

⚡ Figma Agent MCP

Figma向けローカルファーストAIデザインエージェント via Model Context Protocol (MCP) → WebSocket Bridge → ネイティブFigmaプラグイン
決定論的な型付きツール、デザインシステム認識、トークン圧縮、ターンキー複合ワークフローにより、Figmaデザインの検査、作成、変更、スタイル設定、検証、最適化をネイティブに行います。

CI Status TypeScript Strict Tests MCP Tools License: MIT

🏛️ システムアーキテクチャ

┌─────────────────────────────────────────────────────────────┐
│             AI Client (Claude / Cursor / Antigravity / LLM) │
└──────────────────────────────┬──────────────────────────────┘
                               │ MCP Protocol (stdio / SSE)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        MCP Server (@figma-agent/mcp-server — 49 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (Compact)  - Composite Skills Runtime   │
│  - Design System Resolver      - Semantic Token Matching    │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Command Engine (@figma-agent/command-engine)          │
│  - Batch Transaction Pipeline  - Idempotency & Rollback     │
└──────────────────────────────┬──────────────────────────────┘
                               │ Local WebSocket (ws://127.0.0.1:3055)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Bridge Server (@figma-agent/bridge-server)            │
│  - Channel Pairing (128-bit)   - Request/Response Matcher   │
│  - Heartbeat & Auto-reconnect  - 50+ Concurrent Sockets     │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        Figma Plugin (@figma-agent/figma-plugin)             │
│  - Typed Command Dispatcher    - Pure Font Engine           │
│  - Native Node Mutation        - Zero External Dependencies │
└──────────────────────────────┬──────────────────────────────┘
                               │ Figma Plugin API
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                         Figma Canvas                        │
└─────────────────────────────────────────────────────────────┘

Related MCP server: figmind

🌟 主なハイライト

🔒 ローカルファースト＆セキュア: デフォルトで127.0.0.1にバインド。128ビットのシークレットチャネルペアリング。Figma内での任意のJavaScript実行は不可。
🧩 49の決定論的MCPツール: 読み取り、作成、変更、オートレイアウト、ビジュアルスタイル、コンポーネント、変数/トークン、タイポグラフィ、エクスポート、デザインシステム解決を包括的にカバー。
🎯 セマンティックデザインシステムリゾルバー: 人間の意図（"primary button"、"#6366F1"）を、知覚色距離（$\Delta E$）と自動ノード監査を用いて、対応するコンポーネントとトークンに橋渡しします。
⚡ コンテキストコンパイラ＆プルーニング: 巨大なノードツリーをセマンティックMarkdownまたはコンパクトDSLに圧縮し、100ms未満で適応的深さプルーニングとトークン予算適用を実現。テスト済みシナリオでは70%以上の削減を達成。
🛡️ 組み込み検証＆WCAG 2.1エンジン: 通常テキスト、大テキスト、UIコンポーネントの相対輝度とコントラスト比計算（AA/AAA）。オートレイアウトリンター。4px/8pxトークングリッド監査。
🔄 アトミックバッチ実行: stopOnFirstErrorまたはcontinueOnErrorのエラーリカバリによるコマンドパイプラインの逐次実行。
🚀 ターンキーエージェントスキル: インスタントデザインシステム生成、WCAGアクセシビリティ自動修復、ワイヤーフレームからハイファイカード変換のためのプリパッケージ複合ワークフロー。

📦 モノレポ構成

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 49 MCP Tools + Bridge Client + Session Service
│   ├── bridge-server/     # High-throughput WebSocket router (ws)
│   └── figma-plugin/      # Pure TypeScript native Figma Plugin
├── packages/
│   ├── protocol/          # CommandEnvelope, CommandResult, Error codes, Zod schemas
│   ├── figma-schema/      # SimplifiedNode, Layout, Style, Text, Validation schemas
│   ├── command-engine/    # Batch execution pipeline, transactions, ref resolution
│   ├── context-compiler/  # Token optimizer, tree pruner, Markdown & DSL serializers
│   ├── design-system/     # 4px/8px Spacing, Typography & Corner Radius scale matchers
│   ├── validator/         # WCAG 2.1 contrast engine, Auto Layout & design token rules
│   ├── skill-runtime/     # Composite skills registry & execution engine
│   ├── telemetry/         # Percentile metrics collector (p50, p95, p99)
│   └── shared/            # Hex/RGBA converters, Pino logger, environment config
└── tests/
    └── integration/       # 27 Vitest suites covering all phases & stress benchmarks

🚀 クイックスタート＆セットアップ

1. モノレポをビルド

git clone https://github.com/your-org/figma-agent-mcp.git
cd figma-agent-mcp
pnpm install
pnpm build

2. ブリッジサーバーを起動

pnpm --filter @figma-agent/bridge-server start
# Bridge server listening at ws://127.0.0.1:3055

3. Figma DesktopでFigmaプラグインを読み込む

Figma Desktopを開きます。
プラグイン → 開発 → マニフェストからプラグインをインポート... に移動します。
apps/figma-plugin/manifest.jsonを選択します。
Figma Agent Bridgeプラグインを実行します。チャネルID（デフォルトはdefault-channel）をメモします。

⚙️ AIクライアント設定

🤖 1. Claude Desktop

claude_desktop_config.json（Windowsの場合は%APPDATA%\Claude\claude_desktop_config.json、macOSの場合は~/Library/Application Support/Claude/claude_desktop_config.json）に追加：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

💻 2. Cursor IDE

Cursor MCP設定（Settings → Features → MCPまたは.cursor/mcp.json）に追加：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

🧠 3. Google Antigravity / Gemini CLI

Antigravity MCP設定（~/.gemini/antigravity/mcp_config.json）に追加：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055"
      }
    }
  }
}

⚡ 4. OpenAI Codex / Codex CLI / OpenAI Operator

Codex MCP設定（~/.codex/config.jsonまたはcodex-settings.json）に追加：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

またはCodex CLI経由で登録：

# Add Figma Agent MCP to Codex CLI
codex mcp add figma-agent -- node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

# Inspect available tools via MCP Inspector
npx @modelcontextprotocol/inspector node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

🌊 5. Windsurf / Codeium IDE

~/.codeium/windsurf/mcp_config.jsonに追加：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

📚 完全なMCPツールリファレンス（50ツール）

50のMCPツールはすべてZodスキーマで厳密に型付けされ、決定論的に実行され、堅牢な失敗メタデータを提供します。

1. 接続＆セッション管理（4ツール）

ツール名	パラメータ	説明
`figma.get_connection`	なし	現在のWebSocketブリッジ接続ステータス、レイテンシ、セッション機能を取得。
`figma.join_channel`	`channelId`*, `secret`	特定のFigmaドキュメントチャネルセッションに切り替えまたは参加。

2. 検査＆読み取り（6ツール）

ツール名	パラメータ	説明
`figma.get_document`	`depth` (0–10)	制限付き深さでドキュメントルート階層を取得。
`figma.get_selection`	`depth` (0–10)	アクティブなFigmaキャンバスで現在選択されているノードを取得。
`figma.get_node`	`nodeId`*, `depth`	特定のノードの詳細プロパティとサブツリーを読み取り。
`figma.get_nodes`	`nodeIds`*, `depth`	複数のノードをIDでバッチ取得。
`figma.get_local_components`	なし	ファイル内のすべての再利用可能コンポーネントとバリアントを一覧表示。
`figma.get_local_styles`	`type` (PAINT/TEXT/EFFECT/GRID)	ローカルのペイント、テキスト、エフェクトスタイルを一覧表示。

3. ノード作成（4ツール）

ツール名	パラメータ	説明
`figma.create_frame`	`width`, `height`, `x`, `y`, `name`, `parentId`, `layoutMode`	オプションのオートレイアウト付きコンテナフレームを作成。
`figma.create_text`	`text`*, `x`, `y`, `width`, `font` ({family, style, size}), `name`, `parentId`	信頼性の高いフォント読み込みでテキストノードを作成。
`figma.create_rectangle`	`width`, `height`, `x`, `y`, `cornerRadius`, `name`, `parentId`	長方形ベクターノードを作成。
`figma.create_section`	`width`, `height`, `x`, `y`, `name`, `parentId`	セクション整理コンテナを作成。

4. ノード変更＆ジオメトリ（6ツール）

ツール名	パラメータ	説明
`figma.move_node`	`nodeId`, `x`, `y`*	ノードを絶対座標位置に移動。
`figma.resize_node`	`nodeId`, `width`, `height`*	ノードの寸法を変更。
`figma.rename_node`	`nodeId`, `name`	ノードレイヤータイトルを変更。
`figma.delete_node`	`nodeId`*	キャンバスからノードを削除。
`figma.clone_node`	`nodeId`*, `parentId`, `x`, `y`, `name`	既存のノード階層を複製。
`figma.set_parent`	`nodeId`, `targetParentId`, `index`	レイヤーツリー内でノードの親を変更し並び替え。

5. オートレイアウト＆レスポンシブサイジング（2ツール）

ツール名	パラメータ	説明
`figma.set_auto_layout`	`nodeId`, `mode`, `itemSpacing`, `padding` ({top, right, bottom, left}), `primaryAxisAlignItems`, `counterAxisAlignItems`	レスポンシブなFlexbox風オートレイアウトを設定。
`figma.set_layout_sizing`	`nodeId`*, `horizontal` (FIXED/HUG/FILL), `vertical` (FIXED/HUG/FILL)	コンテナと子要素の軸サイジング動作を設定。

6. ビジュアルスタイル＆エフェクト（5ツール）

ツール名	パラメータ	説明
`figma.set_fills`	`nodeId`, `fills` (Solid/Gradient/Image塗りの配列)	背景色、グラデーション、画像を適用。
`figma.set_strokes`	`nodeId`, `strokes`, `strokeWeight`, `strokeAlign`	境界線のストローク、太さ、配置を適用。
`figma.set_corner_radius`	`nodeId`, `radius` (数値またはコーナーごとのオブジェクト), `cornerSmoothing`	iOS連続スムージングで角丸半径を設定。
`figma.set_opacity`	`nodeId`, `opacity` (0.0 – 1.0)	レイヤーの不透明度を調整。
`figma.set_effects`	`nodeId`, `effects` (DROP_SHADOW, INNER_SHADOW, LAYER_BLUR)	ドロップシャドウ、内側シャドウ、ぼかしを適用。

7. コンポーネント＆インスタンス（5ツール）

ツール名	パラメータ	説明
`figma.create_component`	`name`*, `width`, `height`, `parentId`, `componentPropertyDefinitions`	ノードを再利用可能なマスターコンポーネントに変換。
`figma.create_instance`	`componentId`*, `x`, `y`, `properties`, `parentId`	コンポーネントバリアントをインスタンス化。
`figma.set_component_properties`	`nodeId`, `properties`	コンポーネントバリアントのプロパティを上書き。
`figma.detach_instance`	`nodeId`, `destructive`	コンポーネントインスタンスを通常の編集可能フレームに分離（安全ガード付き）。
`figma.get_local_components`	`query`, `pageOnly`	バリアントプロパティ付きのローカルマスターコンポーネントとコンポーネントセットを取得。

8. 変数＆デザイントークン（6ツール）

ツール名	パラメータ	説明
`figma.get_local_variables`	`collectionId`	ローカル変数とトークンコレクションを一覧表示します。
`figma.create_variable`	`name`, `resolvedType` (COLOR/FLOAT/STRING/BOOLEAN), `collectionId`, `collectionName`, `initialValue`	セマンティックなデザイントークン変数を作成します。
`figma.set_variable_value`	`variableId`, `modeId`, `value`*	特定のモードの変数値を更新します。
`figma.bind_variable`	`nodeId`, `property` (fills/strokes/opacity/itemSpacing/cornerRadius), `variableId`*	ノードプロパティをデザイントークン変数にバインドします。
`figma.create_paint_style`	`name`, `paints`, `description`	ファイル内に共有ペイントスタイルを作成します。
(再利用可能なInspect)	`get_local_styles`	共有スタイルをクエリします。

9. アセット、画像、およびエクスポート（3ツール）

ツール名	パラメータ	説明
`figma.export_node`	`nodeId`*, `format` (PNG/JPG/SVG/PDF), `scale`	ノードをBase64画像データまたはUTF-8 SVG文字列としてエクスポートします。
`figma.set_export_settings`	`nodeId`, `exportSettings`	ノードにエクスポートプリセットを設定します。
`figma.set_image_fill`	`nodeId`, `imageBase64`, `scaleMode`, `opacity`	Base64から画像フィルをアップロードして適用します。

10. テキストとタイポグラフィ（6ツール）

ツール名	パラメータ	説明
`figma.set_text_content`	`nodeId`, `text`	テキスト文字列の内容を更新します。
`figma.set_font_size`	`nodeId`, `fontSize`, `start`, `end`	フォントサイズを更新します（全体または範囲指定）。
`figma.set_font_family`	`nodeId`, `family`, `style`, `start`, `end`	フォントファミリーとウェイトを変更し、自動フォント読み込みを行います。
`figma.set_text_alignment`	`nodeId`*, `horizontal` (LEFT/CENTER/RIGHT/JUSTIFIED), `vertical`	テキストの配置を設定します。
`figma.set_line_height`	`nodeId`*, `unit` (PIXELS/PERCENT/AUTO), `value`	行の高さの間隔を設定します。
`figma.set_letter_spacing`	`nodeId`, `unit` (PIXELS/PERCENT), `value`	文字間隔（トラッキング）を設定します。

11. コンテキスト最適化とプルーニング（1ツール）

ツール名	パラメータ	説明
`figma.compile_context`	`nodeId`, `format` (markdown/dsl/compact/json), `maxTokens`, `maxDepth`	トークン予算の適用とコンパクトなDSL表現を使用してFigmaツリーをコンパイルおよび圧縮します。

12. 検証とアクセシビリティ（2ツール）

ツール名	パラメータ	説明
`figma.validate_node`	`nodeId`, `rules`, `includeChildren`	WCAG 2.1のコントラスト、Auto Layoutルール、トークンスケール、レイヤー命名の健全性についてノードツリーを監査します。
`figma.check_contrast`	`foreground`, `background`, `fontSize`, `isBold`	WCAG 2.1の相対輝度とコントラスト比（AA/AAA）を計算します。

13. 複合スキルとバッチ実行（3ツール）

ツール名	パラメータ	説明
`figma.list_skills`	なし	利用可能な高レベルエージェントスキルを発見します。
`figma.run_skill`	`skillName`*, `payload`	マルチステップの複合ワークフローを実行します。
`figma.batch_execute`	`commands`*, `rollbackOnFailure` (デフォルト: true), `stopOnFirstError`, `transactionId`, `idempotencyKey`	シンボリック参照解決（`ref`、`parentRef`、`nodeRef`、`$ref:name`）と自動失敗ロールバックを使用して、アトミックトランザクションで複数のFigmaコマンドを実行します。

14. デザインシステムセマンティック解決（1ツール）

ツール名	パラメータ	説明
`figma.resolve_design_system`	`type`* (component/color/spacing/radius/audit_node), `query`, `intentHint`, `nodeId`	人間の意図（例：「primary button」、「#6366F1」、16px）をセマンティックに解決し、知覚的$\Delta E$距離とノードトークン監査を使用して、一致するコンポーネント/トークンにマッピングします。

💡 例：1回のバッチ呼び出しで階層型UIカードを構築する

{
  "transactionId": "tx-pricing-01",
  "rollbackOnFailure": true,
  "commands": [
    {
      "command": "figma.create_frame",
      "ref": "card",
      "payload": { "width": 360, "height": 480, "name": "Pricing Card" }
    },
    {
      "command": "figma.create_text",
      "ref": "title",
      "parentRef": "card",
      "payload": { "text": "Pro Plan", "font": { "family": "Inter", "style": "Bold", "size": 24 } }
    },
    {
      "command": "figma.create_rectangle",
      "ref": "btn",
      "parentRef": "card",
      "payload": { "width": 312, "height": 44, "cornerRadius": 8, "name": "CTA Button" }
    },
    {
      "command": "figma.set_fills",
      "nodeRef": "btn",
      "payload": { "fills": [{ "type": "SOLID", "color": "#3B82F6" }] }
    }
  ]
}

戻り値：refMap: { "card": "123:456", "title": "123:457", "btn": "123:458" }。

🤖 複合エージェントスキル

1. `skill.create_design_system`

数秒でターンキーデザインシステムを作成します：

変数コレクションの作成：カラーパレットとトークン。
変数の作成：color/primary、color/background、color/surface、color/text-primary。
対応するペイントスタイルの作成。
Auto Layout、コーナー半径、トークンバインディングを備えたレスポンシブなButton/Primaryマスターコンポーネントを生成します。

2. `skill.auto_fix_accessibility`

ターゲットレイアウト階層のWCAG 2.1コントラスト違反を監査し、背景サーフェスに対して低コントラストのテキストカラーを自動的に修復してAA準拠を達成します。

3. `skill.convert_wireframe_to_hifi`

ローファイワイヤーフレームコンテナを、Auto Layout、モダンなサーフェスフィル、ソフトドロップシャドウ、連続コーナースムージングを備えた洗練されたレスポンシブなハイファイUIカードに変換します。

🧪 テストと検証

包括的なテストスイートを実行します（27のテストファイルにわたる115の合格テスト）：

# Run format checking
pnpm format:check

# Run full build
pnpm build

# Run unit and integration tests
pnpm test

# Strict TypeScript typechecking
pnpm typecheck

# ESLint audit
pnpm lint

ベンチマーク結果：

⚡ WebSocketの同時実行性：バーストハートビートを使用した50の同時クライアント接続：p95 < 100ms、ドロップアウトなし。
🌳 大規模ツリーのスケーリング：1,000トークン予算での6,111ノードのコンテキストコンパイル：< 100ms実行時間、ベンチマークシナリオで70%以上のコンテキスト削減。
🛡️ フォールトトレランス：ソケットドロップアウト時にretryableフラグを使用した自動再接続とエラー処理。

📄 ライセンス

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivitySlowing

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Related MCP Connectors

Figma MCP ServerOAuth
com.figma.mcp
The Figma MCP server brings Figma design context directly into your AI workflow.
Developer Tools Content Management Systems
32,076
microservices.sh
sh.microservices
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
Cloud Platforms Agent Orchestration Developer Tools
21
mcp-serverOAuth
com.niftypm
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
Project Management Communication File Systems
2
ClawLinkOAuth
dev.claw-link
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
App Automation Workplace & Productivity
24

Related MCP Servers

Talk to Figma MCP
Developer Tools App Automation Software Architecture
hyun1202
A
license
Not graded
quality
D
maintenance
An MCP server that enables AI assistants to interact with Figma designs for tasks like reading document info, creating elements, and managing auto layouts. It facilitates real-time design automation via a custom Figma plugin and WebSocket server integration.
Updated a year ago (2025-06-25 07:22 UTC)
1,129 npm
MIT
figmind
Design Tools AI & Machine Learning
guhcostan
A
license
Not graded
quality
D
maintenance
MCP server that connects AI clients to Figma, enabling real-time reading, creation, and modification of designs using natural language.
Updated 7 months ago (2026-03-07 22:38 UTC)
MIT
figma-opencode-mcp
Design Tools Developer Tools
laivannha0202
A
license
A
quality
D
maintenance
Local-first MCP server that connects AI coding agents to the currently open Figma file through a local plugin bridge, requiring no Figma API token.
Updated 4 months ago (2026-06-12 15:25 UTC)
8
MIT
Figma Bridge MCP
Design Tools Developer Tools
Halil-KAPLAN
A
license
B
quality
C
maintenance
Local MCP server connecting AI clients to the Figma desktop app for inspecting and editing Figma documents via the Plugin API.
Updated 2 months ago (2026-08-20 10:18 UTC)
16
16 npm
1
MIT