Figma MCP Bridge

Pairing with Hopp

Figma-Context-MCPのような素晴らしいFigma MCPサーバーは他にも存在しますが、一つの課題として無料ユーザー向けのAPI制限があります。

無料アカウントの制限は1ヶ月あたり6リクエスト、そう、1ヶ月あたりです。

Figma MCP Bridgeはこの問題を解決します。これはプラグインとMCPサーバーを組み合わせたもので、Figma APIのレート制限に達することなく、ライブのFigmaドキュメントデータをAIツールにストリーミングします。つまり、すべての人のためのFigma MCPです ✊

デモ

Figma MCP Bridgeを使ってCursorでUIを構築するデモを見る

動画を見る

クイックスタート

1. お使いのAIツールにMCPサーバーを追加する

AIツールのMCP設定（例：Cursor、Windsurf、Claude Desktop）に以下を追加してください：

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

以上です。バイナリのダウンロードやインストールは不要です。

2. Figmaプラグインを追加する

最新リリースページからプラグインをダウンロードし、Figmaで Plugins > Development > Import plugin from manifest に移動して、plugin/ フォルダー内の manifest.json ファイルを選択します。

3. 使用を開始する 🎉

Figmaファイルを開き、プラグインを実行して、AIツールへのプロンプトを開始します。MCPサーバーは自動的にプラグインに接続します。

仕組みの詳細については、仕組みセクションをお読みください。

利用可能なツール

ツール	説明
`get_document`	現在のFigmaページのドキュメントツリーを取得
`get_selection`	Figmaで現在選択されているノードを取得
`get_node`	IDで特定のFigmaノードを取得（コロン形式、例：`4029:12345`）
`get_styles`	すべてのローカルペイント、テキスト、エフェクト、グリッドスタイルを取得
`get_metadata`	ファイル名、ページ、現在のページ情報を取得
`get_design_context`	デザインコンテキストを理解するために最適化された、深さ制限付きのツリーを取得
`get_variable_defs`	すべての変数コレクション、モード、値（デザイントークン）を取得
`get_screenshot`	ノードをPNG/SVG/JPG/PDFとしてエクスポート（base64エンコード）
`save_screenshots`	スクリーンショットをエクスポートし、ローカルファイルシステムに直接保存

ローカル開発

1. このリポジトリをローカルにクローンする

git clone git@github.com:gethopp/figma-mcp-bridge.git

2. サーバーをビルドする

cd server && npm install && npm run build

3. プラグインをビルドする

cd plugin && bun install && bun run build

4. お使いのAIツールにMCPサーバーを追加する

ローカル開発の場合は、AIツールのMCP設定に以下を追加してください：

{
  "figma-bridge": {
    "command": "node",
    "args": ["/path/to/figma-mcp-bridge/server/dist/index.js"]
  }
}

構造

Figma-MCP-Bridge/
├── plugin/   # Figma plugin (TypeScript/React)
└── server/   # MCP server (TypeScript/Node.js)
    └── src/
        ├── index.ts      # Entry point
        ├── bridge.ts     # WebSocket bridge to Figma plugin
        ├── leader.ts     # Leader: HTTP server + bridge
        ├── follower.ts   # Follower: proxies to leader via HTTP
        ├── node.ts       # Dynamic leader/follower role switching
        ├── election.ts   # Leader election & health monitoring
        ├── tools.ts      # MCP tool definitions
        └── types.ts      # Shared types

仕組み

Figma MCP Bridgeには2つの主要なコンポーネントがあります：

1. Figmaプラグイン

Figmaプラグインは、Figma MCP Bridgeのユーザーインターフェースです。MCPサーバーを使用したいFigmaファイル内でこれを実行し、必要なすべての情報を取得する役割を担います。

2. MCPサーバー

MCPサーバーはFigma MCP Bridgeの中核です。FigmaプラグインがWebSocket接続を介してMCPサーバーと接続すると、MCPサーバーは以下の役割を担います：

FigmaプラグインからのWebSocket接続の処理
Figmaプラグインへのツール呼び出しの転送
Figmaプラグインへの応答のルーティング
リーダー選出の処理（MCPサーバーへのWS接続は一度に1つしか許可されないため）

┌─────────────────────────────────────────────────────────────────────────────┐
│                              FIGMA (Browser)                                │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                         Figma Plugin                                  │  │
│  │                    (TypeScript/React)                                 │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      │ WebSocket
                                      │ (ws://localhost:1994/ws)
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                          PRIMARY MCP SERVER                                 │
│                         (Leader on :1994)                                   │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │  Bridge                                    Endpoints:               │    │
│  │  • Manages WebSocket conn                  • /ws    (plugin)        │    │
│  │  • Forwards requests to plugin             • /ping  (health)        │    │
│  │  • Routes responses back                   • /rpc   (followers)     │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────────────────┘
                           ▲                              ▲
                           │ HTTP /rpc                    │ HTTP /rpc
                           │ POST requests                │ POST requests
                           │                              │
         ┌─────────────────┴───────────┐    ┌─────────────┴───────────────┐
         │    FOLLOWER MCP SERVER 1    │    │    FOLLOWER MCP SERVER 2    │
         │                             │    │                             │
         │  • Pings leader /ping       │    │  • Pings leader /ping       │
         │  • Forwards tool calls      │    │  • Forwards tool calls      │
         │    via HTTP /rpc            │    │    via HTTP /rpc            │
         │  • If leader dies →         │    │  • If leader dies →         │
         │    attempts takeover        │    │    attempts takeover        │
         └─────────────────────────────┘    └─────────────────────────────┘
                    ▲                                      ▲
                    │                                      │
                    │ MCP Protocol                         │ MCP Protocol
                    │ (stdio)                              │ (stdio)
                    ▼                                      ▼
         ┌─────────────────────────────┐    ┌─────────────────────────────┐
         │      AI Tool / IDE 1        │    │      AI Tool / IDE 2        │
         │      (e.g., Cursor)         │    │      (e.g., Cursor)         │
         └─────────────────────────────┘    └─────────────────────────────┘

Figma MCP Bridge

Figma MCP Bridge

デモ

クイックスタート

1. お使いのAIツールにMCPサーバーを追加する

2. Figmaプラグインを追加する

3. 使用を開始する 🎉

利用可能なツール

ローカル開発

1. このリポジトリをローカルにクローンする

2. サーバーをビルドする

3. プラグインをビルドする

4. お使いのAIツールにMCPサーバーを追加する

構造

仕組み

1. Figmaプラグイン

2. MCPサーバー

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API