A community-driven registry for Claude, Cursor, Windsurf, Cline & more. Not affiliated with Anthropic.
Are you the author? Sign in to claim
Figma Plugin & MCP server to bypass API limits
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 ✊
It supports multiple Figma files connected simultaneously; open the plugin in each file and your AI agent can query any of them by fileKey. Single-file setups work exactly as before with no changes required.
It also includes a small, opt-in set of write tools for safe agent-driven edits — see Editing Notes below.
Watch a demo of building a UI in Cursor with Figma MCP Bridge
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.
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.
Open a Figma file, run the plugin, and start prompting your AI tool. The MCP server will automatically connect to the plugin.
To work across multiple files, just open the plugin in each Figma file. The bridge keeps all connections active and your AI agent can target any of them by fileKey.
If you want to know more about how it works, read the How it works section.
| Tool | Description |
|---|---|
list_files | List all connected Figma files (supports multi-file workflows) |
get_document | Get the current Figma page document tree |
get_selection | Get the currently selected nodes in Figma |
get_node | Get a specific Figma node by ID (colon format, e.g. 4029:12345) |
get_styles | Get all local paint, text, effect, and grid styles |
get_metadata | Get file name, pages, and current page info |
get_design_context | Get a depth-limited tree optimized for understanding design context |
get_variable_defs | Get all variable collections, modes, and values (design tokens) |
get_screenshot | Export nodes as PNG/SVG/JPG/PDF (base64-encoded) |
save_screenshots | Export and save screenshots directly to the local filesystem |
set_node_visibility | Show or hide specific nodes |
set_text_content | Replace the contents of a text node |
set_text_properties | Patch font, size, alignment, auto-resize, color, and bounds on a text node |
set_node_properties | Patch common node properties: name, position, size, visibility, opacity, corner radius |
set_solid_fill | Replace a node's fill or stroke with a single solid paint |
set_gradient_fill | Replace a node's fill or stroke with a linear/radial/angular/diamond gradient |
set_effects | Replace a node's effects list (drop/inner shadows, layer/background blurs) |
set_stroke_properties | Patch stroke weight, align, dash pattern, cap, and join |
set_auto_layout | Configure auto-layout direction, padding, gap, alignment, sizing, and wrap |
create_frame | Create a new frame, optionally under a parent |
create_text | Create a new text node |
create_shape | Create a rectangle, ellipse, or line |
create_image | Create an image-backed rectangle from a local path, URL, or data URI |
duplicate_nodes | Duplicate nodes in place |
reparent_nodes | Move nodes into another parent |
group_nodes | Wrap a list of nodes (sharing a parent) in a new group |
ungroup_node | Ungroup a group or frame — children move up to its parent |
set_selection | Set the page selection to a list of node IDs (works in Dev Mode) |
scroll_and_zoom_into_view | Frame the viewport around the given nodes (works in Dev Mode) |
delete_nodes | Delete nodes with explicit confirmation |
All tools accept an optional fileKey parameter when multiple Figma files are connected. Use list_files to discover connected files and their keys.
delete_nodes is intentionally gated behind confirm: true.Inter Regular unless a font is provided.create_image reads local paths relative to the MCP server working directory unless you pass an absolute path.With the current write surface, an agent can build a basic slide deck in a new empty Figma file: create slide frames, style titles and body copy, lay out rectangles/ellipses/lines for cards and dividers, duplicate slide templates, reparent content into the right frame, and adjust common geometry/visual properties — including solid/gradient paints, shadows and blurs, stroke geometry, and auto-layout configuration.
The current version is intentionally limited — no components/instances, no variables/styles authoring, no per-segment text styling, and no vector boolean operations yet.
git clone git@github.com:gethopp/figma-mcp-bridge.git
cd server && npm install && npm run build
cd plugin && bun install && bun run build
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"]
}
}
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
There are two main components to the Figma MCP Bridge:
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.
The MCP server is the core of the Figma MCP Bridge. It maintains a registry of WebSocket connections keyed by fileKey, so multiple Figma files can be connected simultaneously. The server is responsible for:
fileKey┌─────────────────────────────────────────────────────────────────────────────┐
│ 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) │
└─────────────────────────────┘ └─────────────────────────────┘
A Jetbrains IDE IntelliJ plugin aimed to provide coding agents the ability to leverage intelliJ's indexing of the codeba
Run Claude Code as an MCP server so any agent can delegate coding tasks to it
@microsoft✓ OfficialBrowser automation using accessibility snapshots instead of screenshots