figma-mcp

高性能で双方向のModel Context Protocol（MCP）サーバー。Rustで書かれており、AIコーディングアシスタントをFigma Desktopに直接接続します。

AIエージェント（Claude Code、Cursor、Windsurf、Antigravity、VS Code、Zed）がFigmaキャンバス上に直接UIを描画し、既存のデザインを構造化されたJSONツリー、デザイントークン、CSS、スクリーンショットとして読み戻すことを可能にします。外部APIキーは一切不要です。

⚡ ハイライト

• 純Rustネイティブパフォーマンス: < 1msで起動、~3MB RAM使用、GCポーズゼロ。

• 双方向ブリッジ: AIはUIの書き込み（ベクター、コンポーネント、フレーム、オートレイアウトの描画）とデザインの読み取り（階層の抽出、スタイルの計算、キャンバスのキャプチャ）の両方が可能です。

• サンドボックス化されたJSランタイム: デザインスクリプトの安全な実行を実現するBoa（純Rust ECMAScriptエンジン）を搭載。

• 組み込みアセットCDN: 7つのアイコンライブラリ（Ionicons、Lucide、Tabler、Bootstrap、Fluent、Phosphor）からSVGアイコンを自動取得し正規化します。

• マルチタブ/マルチセッション対応: 複数の開いているFigmaファイルに同時にシームレス接続します。

• 100%ローカルホストプライバシー: すべての通信はHTTPロングポーリングを介して厳密に127.0.0.1:38451上に留まります。

Related MCP server: Figma Dash MCP Server

🏛️ アーキテクチャ

┌─────────────────────────────────────────────────────────┐
│               Terminal (Standalone Server)              │
│                       figma-mcp                         │
│  • MCP SSE Transport (/sse, /message)                   │
│  • Sandboxed JS Runtime (Boa)                           │
│  • Built-in Asset & Icon Resolver                       │
│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
└───────────────▲─────────────────────────▲───────────────┘
                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
                │                         │
      ┌─────────┴─────────┐     ┌─────────┴─────────┐
      │   Figma Desktop   │     │ AI Assistant(s)   │
      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
      └───────────────────┘     │ Claude Code / Zed │
                                └───────────────────┘

🚀 クイックスタート

1. NPXによるワンライン起動（Rustツールチェーン不要）

セットアップ不要で、Mac、Linux、Windowsのどのマシンでもfigma-mcpを起動できます：

npx figma-mcp

これにより、お使いのアーキテクチャ向けのプリビルドネイティブバイナリが自動的にダウンロードされ、サーバーが起動します。

または、Cursor / Claude Desktop / Windsurf / Antigravity MCP設定で設定する場合：

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

2. またはソースからビルド（Rust）

前提条件: Rustツールチェーン（cargo >= 1.80）。

git clone https://github.com/BuiHung1612/figma-mcp.git
cd figma-mcp
cargo build --release
./target/release/figma-mcp

3. Figmaプラグインのインストール

1. Figma Desktopを開きます。

2. プラグイン → 開発 → マニフェストからプラグインをインポート... に移動します。

3. このリポジトリからplugin/manifest.jsonファイルを選択します。

4. プラグインを実行します（プラグイン → 開発 → Figma MCP Bridge）。

5. プラグインUIに緑のドット（接続済み）が表示されます。

4. MCPクライアントの設定

Google Antigravity（SSEトランスポート - 推奨）

~/.gemini/config/mcp_config.jsonまたはプロジェクトの.agents/mcp_config.jsonに追加します：

{
  "mcpServers": {
    "figma-mcp": {
      "serverUrl": "http://127.0.0.1:38451/sse"
    }
  }
}

Claude Code / Cursor / Windsurf / VS Code

SSEまたはstdioで接続できます：

オプションA: SSEトランスポート（推奨）

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://127.0.0.1:38451/sse"
    }
  }
}

オプションB: Stdioサブプロセス（NPX経由）

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

🛠️ MCPツールリファレンス

figma-mcpは7つのファーストクラスMCPツールを公開しています：

figma_get_selection

Figmaキャンバス上で現在選択されているレイヤー/フレームを超高速かつトークン圧縮で検査します。レイアウトとタイポグラフィの階層を60〜80%少ないトークンで返します。

figma_inspect_node

IDまたは名前で特定のノードを検査し、完全なデザインコンテキスト、CSS、オートレイアウトルール、タイポグラフィを返します。

figma_export_asset

任意のFigmaノード/レイヤーをPNG、JPG、SVGに直接エクスポートします。

• outputPath: 指定すると（例: src/assets/logo.png）、ディスクに直接保存し、コンテキストウィンドウを大きなbase64文字列で埋める代わりに最小限のJSONメタデータを返します！

figma_status

ライブブリッジ接続ステータス、接続されているFigmaタブ、アクティブなファイル名、レイテンシ統計を確認します。

figma_write

サンドボックス化されたVM内でJavaScript描画コマンドを実行し、Figmaキャンバス上でデザインを構築または変更します。

• オートレイアウト（layoutMode、itemSpacing、padding）、タイポグラフィ、塗り、ストローク、角丸、ドロップシャドウ、コンポーネント作成をサポートします。

• アイコン読み込みをサポート: figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" })。

• 画像挿入をサポート: figma.loadImage(url, { width: 300, height: 200 })。

figma_read

高度なクエリのためのユニバーサルリーダー: get_design、scan_design、screenshot、export_svg、get_variables、get_styles、search_nodes。ファイルエクスポート用のoutputPathをサポートします。

figma_docs

figma_write用の組み込みドキュメント、デザインルール、レイアウトガイドライン、コード例を取得します。

• section: "all" | "rules" | "layout" | "api" | "tokens" | "icons"

figma_rules

現在のFigmaドキュメントを監査し、AI生成を導くための一貫性ルールとトークン定義を生成します。

💻 開発とテスト

# Run server directly in debug mode
cargo run

# Build release binary
cargo build --release

# Run automated MCP test suite
./scripts/test-rust-mcp.sh

# Rebuild Figma plugin bundle (if plugin-src/ is modified)
node scripts/build-plugin.js

📄 ライセンス

MIT © BuiHung1612 — 自由に使用、変更、配布できます。詳細はLICENSEを参照してください。