de en es ja ko ru zh

Figma Agent MCP

Name: Figma Agent MCP
Author: TrungLee003

by TrungLee003

Overview Schema Related Servers Score Discussions

TypeScript

Local

⚡ Figma Agent MCP

Local-first AI Design Agent for Figma 経由 Model Context Protocol (MCP) → WebSocket Bridge → Native Figma Plugin
確定論的な型付きツール、デザインシステム認識、トークン圧縮、ターンキー複合ワークフローにより、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 — 48 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (>70% cut) - Composite Skills Runtime   │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       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                        │
└─────────────────────────────────────────────────────────────┘

🌟 主な特徴

🔒 Local-First & セキュア: デフォルトで 127.0.0.1 にバインド。128 ビットの秘密チャネルペアリング。Figma 内部での任意の JavaScript 実行はありません。
🧩 48 個の確定論的 MCP ツール: 読み取り、作成、変更、オートレイアウト、ビジュアルスタイル、コンポーネント、変数/トークン、タイポグラフィ、エクスポートを網羅。
⚡ コンテキストコンパイラ（70% 以上のトークン削減）: 巨大なノードツリーをセマンティック Markdown またはコンパクト DSL に圧縮し、適応型深さ枝刈りとトークン予算制限を 100ms 未満で実行。
🛡️ 組み込みバリデーション & WCAG 2.1 エンジン: 通常テキスト、大テキスト、UI コンポーネントに対する相対輝度とコントラスト比の計算（AA/AAA）。オートレイアウトリンター。4px/8px トークングリッド監査。
🔄 アトミックバッチ実行: stopOnFirstError または continueOnError エラーリカバリによるコマンドパイプラインの逐次実行。
🚀 ターンキーエージェントスキル: インスタントデザインシステム生成、WCAG アクセシビリティ自動修復、ワイヤーフレームからハイファイカードへの変換のためのプリパッケージ化された複合ワークフロー。

📦 モノレポ構成

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 48 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 ツールリファレンス（48 ツール）

1. 接続とセッション（2 ツール）

ツール名	パラメータ	説明
`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. コンポーネントとインスタンス（4 ツール）

ツール名	パラメータ	説明
`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`*	コンポーネントインスタンスを通常の編集可能なフレームに切り離します。

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`	ファイル内に共有ペイントスタイルを作成します。
(再利用: 検査)	`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`	トークン予算を考慮してFigmaツリーをコンパイル・圧縮します（70%以上の圧縮率）。

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. 複合スキルとバッチ実行（2ツール）

ツール名	パラメータ	説明
`figma.list_skills`	なし	利用可能な高レベルAgentスキルを確認します。
`figma.run_skill`	`skillName`*、`payload`	複数ステップの複合ワークフローを実行します。
`figma.batch_execute`	`commands`*、`stopOnFirstError`	複数のFigmaコマンドを単一のアトミックなバッチトランザクションで実行します。

🤖 複合Agentスキル

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、0ドロップアウト。
🌳 大規模ツリー拡張：1,000トークン予算での6,111ノードのコンテキストコンパイル：< 100msの実行時間、>70%の圧縮率。
🛡️ フォールトトレランス：ソケットドロップアウト時の自動再接続とエラーハンドリング（retryableフラグ付き）。

📄 ライセンス

This server cannot be installed

license - not tested

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Figma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
microservices.sh
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
mcp
MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/TrungLee003/figma-agent-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server