Figma Bridge

Let any AI agent design in the Figma desktop app, with no rate limits.

Figma Bridge is a local MCP server plus a Figma plugin. Your agent gets full read and write access to the open file through the Plugin API, not the web API: no tokens, no quotas. (A token is only needed for the optional comments and version history tools.)

Works with Claude Code, Claude Desktop, Codex, Antigravity, Gemini CLI, Cursor, Windsurf and any other MCP client.

Features

• Build whole layouts in one call from a JSON spec: auto-layout and grid, rich text, icons, images, component sets with variants and properties, prototype links, and professional layer names (Header, Card, Title, PrimaryButton) (naming). The spec is checked first: CSS habits (borderRadius, "16px", rgb(), "100%") are converted and unknown properties come back as warnings with the right name, so nothing is silently ignored.

• Import any website or HTML as editable auto-layout frames, one per viewport (details).

• Round-trip the design system: write variables with Light/Dark modes and styles from JSON, W3C tokens or Tailwind; export them to DTCG, CSS, Tailwind v3/v4, SCSS or TypeScript (details).

• Score and fix design system health: token coverage, contrast, text styles, detached instances, duplicates, naming, with safe automatic fixes.

• Read existing designs compactly, search every page, and reuse the file's design system.

• Check its own work with screenshots, a design audit, and a pixel diff against a mockup.

• Hand off to your codebase: export a frame into your project with its own components, tokens and stack (React, Next, Vue, Svelte, React Native; Tailwind, CSS modules, styled-components; shadcn, MUI, Chakra) (details), plus Dev Mode annotations.

• Ship to Roblox: turn a frame into native Roblox UI (ScreenGui, UIListLayout, UICorner, UIStroke, UIShadow, 9-slice panels), all in scale with professional names, as an .rbxmx model and a Luau script for a Roblox Studio MCP, with optional asset upload (details).

• Figma Design, FigJam and Slides: stickies, shapes, connectors, tables, Mermaid flowcharts laid out as diagrams, and slide decks; several files at once (details).

• 200 000+ icons through Iconify, checkpoints to roll back, and a library of reusable scripts.

• Zero-friction connection: the plugin connects and reconnects on its own. Each AI command is one Ctrl+Z step, and you can cancel it from the plugin.

Related MCP server: Writable Figma MCP Bridge

How it compares

Based on each project's documentation in October 2026; "—" means it isn't documented there. Corrections are welcome in an issue.

Installation

Requires Node.js 20+ and the Figma desktop app.

1. Run:

   npx @clovis500c/figma-bridge setup

   It adds Figma Bridge to every AI client installed on your machine (originals are backed up), copies the Figma plugin to ~/.figma-bridge/plugin and prints the path of its manifest.

2. In Figma: Plugins → Development → Import plugin from manifest… and select that manifest.json.

3. Restart your AI client, open a Figma file and run Plugins → Development → Figma Bridge. A green Live badge means it's connected.

Updates are automatic: each time your AI client starts, it runs the latest release and refreshes the plugin. Reopen the plugin in Figma when it shows Update installed. To review each release yourself instead, run npx @clovis500c/figma-bridge setup --pin: your clients then run that exact version until you run setup again.

Download the latest release, unzip it, and run in that folder:

bun install
bun run setup

Then import the manifest.json it prints (in ~/.figma-bridge/plugin) in Figma as in step 2.

npx @clovis500c/figma-bridge setup --print prints these snippets. To target one client: setup --client codex.

Most clients (mcpServers in their JSON config):

{
  "mcpServers": {
    "FigmaBridge": {
      "command": "npx",
      "args": ["-y", "@clovis500c/figma-bridge"]
    }
  }
}

On Windows, use "command": "cmd" and "args": ["/c", "npx", "-y", "@clovis500c/figma-bridge"].

Codex (~/.codex/config.toml):

[mcp_servers.FigmaBridge]
command = 'npx'
args = ['-y', '@clovis500c/figma-bridge']
startup_timeout_sec = 60

Usage

Keep the plugin open (the — button collapses it to a thin bar) and ask your agent, for example:

Design a mobile sign-in screen from scratch on a new page: logo, email and password fields, a primary button and a "Forgot password?" link.

Import https://example.com/pricing at desktop and mobile widths, then rename the layers and use our text styles.

Export the selected card into C:\code\my-app using our existing components, then write it.

Audit our design system, fix what can be fixed safely, and tell me the score before and after.

Clients that support MCP prompts also offer ready-made workflows: new-screen, apply-design-system, reproduce-screenshot, import-website, figma-to-code, audit-and-fix and figma-to-roblox. Ready-made specs and tokens are in examples/.

When your agent needs you to point at something, the plugin shows Your agent is waiting until you select it. A running command has a Cancel button: build stops at the next layer, but a script cannot be interrupted and finishes in the background.

To reopen the plugin later, use Ctrl+Alt+P or the Figma Bridge button in the right panel.

Tools

Each tool describes its parameters to the agent, which needs no extra instructions. The server's instructions stay under 2 000 characters (some clients cut longer ones); the details are one guide call away. To hide tools you never use, list them in FIGMA_BRIDGE_DISABLE_TOOLS, e.g. export_roblox,comments,versions.

Troubleshooting

Logs, screenshots, comparison heatmaps and exported code are written to %TEMP%\figma-bridge. import_web uses your installed Chrome or Edge; set FIGMA_BRIDGE_BROWSER to use another Chromium-based browser.

Development

bun install       # also builds the plugin and dist/server.js
bun run build     # plugin/code.ts → plugin/code.js, src/cli.ts → dist/server.js (Node)
bun run check     # type-check server and plugin, reject syntax Figma cannot run
bun test          # unit tests (bridge, setup, schemas, tokens, code generation, web import, Roblox)
bun run test      # end-to-end test against an open Figma file

To release, change version in package.json and server.json in your PR and merge it: the Release workflow starts on its own, publishes to npm and creates the GitHub release, and every AI client runs the new version at its next start (npx @latest). Actions → Release → Run workflow on main still works by hand. Directory listings (MCP Registry, Glama, Smithery, LobeHub) are described in docs/publishing.md.

Options: FIGMA_BRIDGE_PORT (default 3055), FIGMA_BRIDGE_CHANNEL, FIGMA_BRIDGE_OUT, FIGMA_BRIDGE_SNIPPETS, FIGMA_BRIDGE_BROWSER, FIGMA_BRIDGE_DISABLE_TOOLS, FIGMA_TOKEN for the optional REST tools, and ROBLOX_API_KEY + ROBLOX_CREATOR_ID for Roblox asset upload.

The server listens on 127.0.0.1 only, and browsers can't send it commands. A web page can't pose as the plugin either: a sandboxed iframe sends the same Origin: null as Figma's plugin UI, so the hub also requires a pairing token that only the installed copy in ~/.figma-bridge/plugin carries (written by setup and refreshed at each server start; the token itself is in ~/.figma-bridge/pairing-token). To run the plugin straight from a clone's plugin/ folder, set FIGMA_BRIDGE_PAIRING=0 for the server, or import ~/.figma-bridge/plugin/manifest.json, which the server keeps in step with your build.