Figma MCP Bridge
- Demo
- Quick Start
- Local development
- Structure
- How it works
While other amazing Figma MCP servers like Figma-Context-MCP exist, one issues is the API limiting for free users.
The limit for free accounts is 6 requests per month, yes per month.
Figma MCP Bridge is a solution to this problem. It is a plugin + MCP server that streams live Figma document data to AI tools without hitting Figma API rate limits, so its Figma MCP for the rest of us ✊
Demo
Watch a demo of building a UI in Cursor with Figma MCP Bridge
Quick Start
1. Add the MCP server to your favourite AI tool
Add the following to your AI tool's MCP configuration (e.g. Cursor, Windsurf, Claude Desktop):
{
"figma-bridge": {
"command": "npx",
"args": ["-y", "@gethopp/figma-mcp-bridge"]
}
}
That's it — no binaries to download or install.
2. Add the Figma plugin
Download the plugin from the latest release page, then in Figma go to Plugins > Development > Import plugin from manifest and select the manifest.json file from the plugin/ folder.
3. Start using it 🎉
Open a Figma file, run the plugin, and start prompting your AI tool. The MCP server will automatically connect to the plugin.
If you want to know more about how it works, read the How it works section.
Local development
1. Clone this repository locally
git clone [email protected]:gethopp/figma-mcp-bridge.git
2. Build the server
cd server && npm install && npm run build
3. Build the plugin
cd plugin && bun install && bun run build
4. Add the MCP server to your favourite AI tool
For local development, add the following to your AI tool's MCP config:
{
"figma-bridge": {
"command": "node",
"args": ["/path/to/figma-mcp-bridge/server/dist/index.js"]
}
}
Structure
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
How it works
There are two main components to the Figma MCP Bridge:
1. The Figma Plugin
The Figma plugin is the user interface for the Figma MCP Bridge. You run this inside the Figma file you want to use the MCP server for, and its responsible for getting you all the information you need.
2. The MCP Server
The MCP server is the core of the Figma MCP Bridge. As the Figma plugin connects with the MCP server via a WebSocket connection, the MCP server is responsible for:
- Handling WebSocket connections from the Figma plugin
- Forwarding tool calls to the Figma plugin
- Routing responses back to the Figma plugin
- Handling leader election (as we can have only one WS connection to an MCP server at a time)
┌─────────────────────────────────────────────────────────────────────────────┐
│ 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) │
└─────────────────────────────┘ └─────────────────────────────┘
