What is Figma MCP Bridge?
Figma MCP Bridge is a Figma desktop plugin plus a local MCP server started with npx -y @gethopp/figma-mcp-bridge. It streams live document data to your agent without calling the Figma REST API, so free-plan request limits do not apply. It also has opt-in write tools.
Figma MCP Bridge is a plugin and MCP server pair. The plugin runs inside the Figma desktop app and streams live document data to a local MCP server, so your AI coding agent reads the file without calling the Figma REST API.
The README says it was built because free Figma accounts get 6 API requests per month, which hampers servers like Framelink MCP for Figma on the free plan. The bridge has no such limit because it reads from the open file instead.
What it changes in your workflow
- Your agent reads the document tree, selection, styles, variables and prototype flows from a file you have open.
- It exports screenshots as PNG, SVG, JPG or PDF, and can save them straight to disk.
- Opt-in write tools let it create frames, text and shapes, set fills and auto layout, and reparent or delete nodes.
- Several Figma files can be connected at once, and the agent targets each by file key.
Bridge or official server
| Figma MCP Bridge | Official Figma server | |
|---|---|---|
| Data source | Open file via a desktop plugin | Figma's own service |
| Free-plan limits | No REST API calls | See the official server page for current plans |
| Setup | MCP entry plus a development plugin | Per Figma's docs |
| Needs desktop app | Yes, macOS or Windows | Depends on the mode |
Who it is for
Best for
- Designers and developers on Figma free plans who hit REST API limits.
- Teams that want an agent to read variables, styles and prototype flows live.
- Workflows that need light, scripted edits in Figma or FigJam.
Not for
- Browser-only Figma. The README says the web version cannot import development plugins.
- Production-grade design-to-code on its own. It returns data, and you still decide the code. For the official route see Figma MCP.
Use it with UiChemy
The bridge hands your agent design data. UiChemy turns Figma designs into editable WordPress pages with its Figma to WordPress product, and Composer is a visual editor for Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Figma MCP Bridge: Free Figma Access for AI Agents to your AI client
npx -y @gethopp/figma-mcp-bridgeAdd the MCP server
Put the config above in your AI tool's MCP configuration, under its server list. The README names Cursor, Windsurf and Claude Desktop.
Download the plugin
Get the plugin from the latest release on GitHub and unzip it.
Import it into Figma
In the Figma desktop app go to Plugins, Development, Import plugin from manifest, and pick manifest.json from the plugin folder.
Run the plugin
Open a Figma file and run the plugin. The MCP server connects to it automatically. Repeat in each file for multi-file work.
Try a prompt
Ask the agent to list connected files, then get the design context for the selected frame.
Client configuration
{
"figma-bridge": {
"command": "npx",
"args": ["-y", "@gethopp/figma-mcp-bridge"]
}
}Endpoints and ports
npx -y @gethopp/figma-mcp-bridgeStarts the MCP server over stdio.plugin/manifest.jsonDevelopment plugin imported from the release download.https://github.com/gethopp/figma-mcp-bridge/releasesWhere the plugin zip is published.What you can do with it
- No REST API callsData comes from the open file through the plugin, so the monthly free-plan request limit in the README does not apply.
- Multi-file supportOpen the plugin in each file and the agent targets any of them by fileKey. List them with list_files.
- Design, Dev Mode and FigJamThe same plugin runs in design files, Dev Mode where it is read-only, and FigJam boards.
- Tokens and stylesVariables with modes and values, plus local paint, text, effect and grid styles, are readable.
- Prototype tracingRead-only tools list prototype interactions and trace flows between screens.
- Opt-in write toolsCreate, edit, align, group and delete nodes, but only when the plugin runs in the design editor.
- Screenshot exportExport nodes in four formats and save them directly to the local filesystem.
Tools it exposes
list_files
Lists the connected Figma files for multi-file work.
get_document
Gets the current page's document tree.
get_selection
Gets the currently selected nodes.
get_node
Gets a node by ID in colon format such as 4029:12345, with optional prototype data.
get_design_context
Returns a depth-limited tree tuned for understanding design context.
get_variable_defs
Returns variable collections, modes and values, which are the design tokens.
get_styles
Returns local paint, text, effect and grid styles.
get_screenshot
Exports nodes as PNG, SVG, JPG or PDF, base64-encoded.
trace_prototype_flow
Traces prototype navigation between screens.
create_frame
Creates a frame, optionally under a parent. One of the opt-in write tools, alongside text, shape, fill and auto-layout tools.
import_html_layers
Bulk-imports an html-figma layer tree as frames, text, rectangles and vectors.
Frequently asked questions
What is Figma MCP Bridge?
It is a Figma desktop plugin and a local MCP server that stream live document data to an AI coding agent without using the Figma REST API. It also includes a small set of opt-in write tools for agent-driven edits.
How do I set up Figma MCP Bridge?
Add an MCP entry with command npx and args -y and @gethopp/figma-mcp-bridge, then download the plugin from the GitHub releases page and import its manifest.json in Figma under Plugins, Development. Run the plugin in an open file and start prompting.
Does it work on the free Figma plan?
That is its main purpose. The README says free accounts are limited to 6 REST API requests per month, and the bridge avoids the REST API by reading the open file through the plugin. You still need the Figma desktop app.
Can it use Figma in the browser?
No. The README says the browser version of Figma does not support importing development plugins, so you need the desktop app on macOS or Windows to run it. The plugin also runs in Dev Mode, where it is read-only, and in FigJam boards.
Can the agent edit my design?
Yes, with write tools, but only when the plugin runs in Figma's design editor. Dev Mode is read-only and returns a clear error for edits. Test on a duplicate file first, since changes apply to the live document.
Which AI coding agents work with it?
The README mentions Cursor, Windsurf and Claude Desktop, and the demo uses Cursor. Any MCP client that can launch a stdio command should work with the same npx entry, though only those are named.
Can I connect more than one Figma file?
Yes. Open the plugin in each file and the server keeps every connection active. Pass fileKey to a tool to target a file, and call list_files to see keys. Single-file setups need no changes.
How does it differ from the official Figma server?
See Figma MCP for the official server. The bridge reads the open file through a plugin, while the official server uses Figma's own service and its plan rules. Both can sit beside the 21st MCP in one setup.