Figma MCP Bridge

• Demo
• Quick Start
• Available Tools
• Local development
• Structure
• How it works

[!NOTE]
Requires the Figma desktop app (macOS/Windows). The browser version of Figma does not support importing development plugins.

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.

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.

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.

Available Tools

All tools accept an optional fileKey parameter when multiple Figma files are connected. Use list_files to discover connected files and their keys.

Editing Notes

• Edit tools work only when the plugin is opened in Figma's design editor (Dev Mode is read-only — they will return a clear error there).
• The current user must have permission to edit the target file.
• delete_nodes is intentionally gated behind confirm: true.
• Text edits automatically load the fonts currently used by the target text node before applying the new content.
• New text nodes default to 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.
• import_html_layers takes a JSON file produced by html-figma's browser htmlToFigma(). The path resolves relative to the MCP server working directory and must stay inside it, even when absolute. Everything lands inside one wrapper frame, and the response reports layerCount against expectedLayerCount so partial imports are visible.
• create_page returns the new page's ID — pass it as parentId to create_frame / create_text / create_shape / create_image to author content on that page without switching the editor.

What You Can Build

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.

Local development

This repo uses Bun as its package manager and script runner throughout. Install it first if you don't have it.

1. Clone this repository locally

git clone git@github.com:gethopp/figma-mcp-bridge.git

2. Install root tooling

Install the root depen