Skip to main content
Glama
deenesjakoruzh
gethopp

Figma MCP Bridge

by gethopp
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

Figma MCP Bridge

Pairing with Hopp

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

無料アカウントの制限は月間6リクエスト、そう、月間です。

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

複数のFigmaファイルを同時に接続することをサポートしています。各ファイルでプラグインを開けば、AIエージェントはfileKeyを指定してそれらのいずれにもクエリを実行できます。単一ファイルのセットアップは、これまで通り変更なしで動作します。

デモ

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

動画を見る

Related MCP server: Figma Bridge MCP

クイックスタート

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サーバーは自動的にプラグインに接続します。

複数のファイルで作業するには、各Figmaファイルでプラグインを開くだけです。ブリッジはすべての接続をアクティブに保ち、AIエージェントはfileKeyによってそれらのいずれかをターゲットにできます。

仕組みについて詳しく知りたい場合は、仕組みセクションをお読みください。

利用可能なツール

ツール

説明

list_files

接続されているすべてのFigmaファイルを一覧表示（マルチファイルワークフローをサポート）

get_document

現在のFigmaページのドキュメントツリーを取得

get_selection

Figmaで現在選択されているノードを取得

get_node

ID（コロン形式、例：4029:12345）で特定のFigmaノードを取得

get_styles

すべてのローカルペイント、テキスト、エフェクト、グリッドスタイルを取得

get_metadata

ファイル名、ページ、現在のページ情報を取得

get_design_context

デザインコンテキストを理解するために最適化された、深さ制限付きのツリーを取得

get_variable_defs

すべての変数コレクション、モード、値（デザイントークン）を取得

get_screenshot

ノードをPNG/SVG/JPG/PDFとしてエクスポート（base64エンコード）

save_screenshots

スクリーンショットをエクスポートし、ローカルファイルシステムに直接保存

すべてのツールは、複数のFigmaファイルが接続されている場合にオプションのfileKeyパラメーターを受け入れます。list_filesを使用して、接続されているファイルとそのキーを確認してください。

ローカル開発

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の中核です。fileKeyごとにキー付けされたWebSocket接続のレジストリを保持するため、複数のFigmaファイルを同時に接続できます。サーバーは以下の役割を担います：

  • 1つ以上のFigmaプラグインインスタンスからのWebSocket接続の処理

  • fileKeyに基づいた正しいファイルへのツール呼び出しのルーティング

  • AIクライアントへの応答の転送

  • リーダー選出の処理（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)         │
         └─────────────────────────────┘    └─────────────────────────────┘

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityActive
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • mcp-figma

    tranhoangtu-it
    A
    license
    Not graded
    quality
    D
    maintenance
    Bridges AI clients to Figma Desktop via Plugin API and WebSocket, enabling real-time design manipulation without rate limits.
    1,213 npm
    MIT

  • figma-mcp-rust

    alvinindra
    A
    license
    Not graded
    quality
    A
    maintenance
    An MCP server that enables AI tools to read and write Figma designs via a plugin bridge, bypassing the Figma REST API and rate limits.
    61
    MIT

  • figma-meta-mcp

    shinjiyu
    A
    license
    A
    quality
    C
    maintenance
    Figma MCP server that lets agents execute arbitrary JavaScript inside a running Figma desktop app via a local development plugin, enabling real-time document inspection and manipulation while avoiding REST API rate limits.
    3
    MIT