Skip to main content
Glama
deenesjakoruzh
gethopp

Figma MCP Bridge

by gethopp
OverviewSchemaRelated ServersScoreDiscussions
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 installed

A
license - permissive license
-
quality - not tested
A
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
1wRelease cycle
18Releases (12mo)
Commit activity
Issues opened vs closed

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

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

Related MCP Servers

  • mcp-figma

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

  • Figma MCP Go

    tunglt1810
    A
    license
    -
    quality
    A
    maintenance
    Figma MCP server with full read/write access via plugin bridge — no API token, no rate limits. 83 tools for design automation: styles, variables, components, prototypes, and content.
    8
    MIT

  • figma-mcp-rust

    alvinindra
    A
    license
    -
    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.
    22
    MIT

View all related MCP servers

Related MCP Connectors

  • Figma MCP Server

    The Figma MCP server brings Figma design context directly into your AI workflow.

  • anythingmcp

    Self-hosted MCP gateway: turn any API, database or MCP server into AI connectors — no code.

  • mcp

    MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

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/gethopp/figma-mcp-bridge'

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