What is Figbridge?
Figbridge is a free, MIT licensed Figma plugin paired with a local MCP server. With the plugin's Live bridge on, an MCP client reads selections, tokens and components over 127.0.0.1, imports a live URL into Figma, audits it, and generates a patch for the source repo. It exposes 48 tools.
Figbridge is two pieces that work together: a Figma plugin you run on a file, and a local MCP server that an AI coding agent talks to. The plugin pushes your selection to the server on your own machine.
It needs no Figma account token and no REST API. The README says it uses your existing Figma desktop session, runs entirely locally, and does not publish anything to Figma or the cloud.
What changes in your agent's output
- Screens come out as HTML and CSS, Tailwind with arbitrary-value utilities, or design tokens as DTCG JSON and CSS variables.
get_agent_bundlereturns a zip with DESIGN.md, a hierarchy tree, tokens, components and an AGENTS.md, so work can continue without a live connection.- Slugs stay stable when you rename a node, so CHANGES.md shows a real diff instead of a full retranslation.
- Everything is deterministic measurement and tree walking. The README states there are no model calls inside the tools.
The URL to Figma to patch loop
import_urlpulls a live page into a Figma frame, andpreflight_importflags risky pages first.- Five audit tools check palette, typography, accessibility, whitespace and mobile behavior on the imported design.
- A designer edits the frame, then
diff_to_sourcelists which text-node fields drifted from the source. generate_patchturns that diff into a minimal edit list against a local source directory.
Who Figbridge is for
Best for
- Developers who want tokens and screens from Figma without a Dev seat. Framelink Figma MCP is another page to compare.
- Teams that already capture live sites and want an audit step. Related: web quality audit.
- Anyone comparing Figma bridges, for example Claude Talk to Figma.
Not for
- People without the Figma desktop app. The plugin must be open for any call to reach Figma.
- Anyone expecting a hosted server. The bridge listens on 127.0.0.1 only.
- Teams wanting AI rewrites of the code. Figbridge measures and diffs, and leaves rewriting to your agent.
Use it with UiChemy
Figbridge moves a design between a live page, Figma and your repo. For WordPress, UiChemy picks up at the Figma frame: Figma to WordPress converts it into an editable page, and Composer refines it. Click Get Started on uichemy.com.
Connect Figbridge MCP: Figma to Code and Back Through a Local Bridge to your AI client
npx figbridge-mcp initClone the plugin
Run
git clone https://github.com/rudraptpsingh/figbridge. The README says the plugin is not in Figma Community yet, so the clone is how you get it.Patch the client config
Run
npx figbridge-mcp initto write the MCP entry for Claude Desktop, then quit and reopen it. Other clients, such as Cursor, Cline or VS Code, point atnpx figbridge-mcp.Import the plugin into Figma
In Figma choose Plugins, Development, Import plugin from manifest, then pick
plugin/manifest.jsonfrom the clone. This is a one-time step.Turn on Live bridge
Run the plugin on a frame and toggle Live bridge. A green dot in the plugin header means it reached the local bridge, and the footer shows the port.
Confirm the tools
Ask your agent what tools figbridge exposes. The README says you should see more than 40. If a port is stuck, run
npx figbridge-mcp doctor.
Endpoints and ports
127.0.0.1:7331Falls back to ports 7332 to 7340, override with FIGBRIDGE_PORThttps://rudraptpsingh.github.io/figbridge/Project site from the READMEWhat you can do with it
- Free and localMIT licensed, runs on your machine, and needs no account or token.
- Two-way Figma and codeRead screens and tokens out of Figma, or pull a website into Figma and trace edits back to source.
- Import diagnosticsPreflight flags bot pages, deep DOM, SVG-heavy pages and low-res images before you wait on an import.
- Hybrid fallbackA full-page screenshot can sit under editable layers for video-heavy or generated sites.
- Chrome and Edge captureAn unpacked extension sends the visible viewport, a full page or a picked element to the local bridge.
- Five design auditsPalette, typography, accessibility, whitespace rhythm and mobile checks return scores and structured issue lists.
- Offline agent bundleOne zip carries the hierarchy, tokens, components and instructions an agent can build from.
- Deterministic outputNo LLM rewrites inside the tools, so the same selection gives the same result.
Tools it exposes
get_current_selection
Reads the node or nodes currently selected in Figma.
get_tokens
Returns design tokens, reading Figma Variables and local paint styles.
list_screens
Lists the screens found in the open file.
describe_screen
Describes a single screen for the agent.
get_agent_bundle
Produces the offline zip of hierarchy, tokens, components, AGENTS.md and CHANGES.md in small, medium or large token tiers.
preflight_import
Checks a URL for bot pages, deep DOM, low-res images and font assets before a full import.
import_url
Imports a live URL into a Figma frame, with an optional hybrid screenshot reference.
import_responsive_set
Captures desktop, tablet and mobile versions, with optional light and dark themes.
audit_a11y
Checks WCAG 2.x contrast, landmarks and alt text.
audit_regression
Compares a baseline URL against a candidate for UI regressions across three viewports.
diff_to_source
Reports per text-node field differences between an imported frame and the live source.
generate_patch
Turns that diff into a minimal patch against a local source directory.
match_mockup
Runs a render, diff and refine loop that scores a running app against its mockup and returns a punch-list.
Frequently asked questions
What is Figbridge?
Figbridge is a Figma plugin plus a local MCP server. The plugin pushes your selection to the server, and an MCP-capable agent can read screens, tokens and components, import a live URL, run audits and generate source patches.
How do I install Figbridge?
Clone the repository to get the Figma plugin, run npx figbridge-mcp init to patch your client config, import plugin/manifest.json in Figma, then toggle Live bridge. The README estimates about three minutes.
Does Figbridge work with Claude Code, Cursor and other agents?
The README names Claude Desktop, Claude Code, Cursor, Continue and Cline as MCP-capable clients. The init command patches Claude Desktop automatically, and other clients point at npx figbridge-mcp by hand.
Does it need a Figma token or a Dev seat?
No. The README says there is no account and no token, because it uses your Figma desktop session through the plugin. It also states it has no REST API access, so the desktop app and plugin must be open.
How many tools does Figbridge expose?
The README says 48 MCP tools, grouped into read, catalog, act and handoff, browser, round-trip editing, design audits and match-the-mockup. Another line says you should see more than 40 when you ask your agent to list them.
Does Figbridge send my design data to the cloud?
The README says it runs entirely on your machine and does not publish to Figma or the cloud. The Chrome extension only posts to 127.0.0.1 on ports 7331 to 7340, not to a cloud service.
How is it different from other Figma MCP servers?
Its focus is the round trip from a live URL into Figma and back to a patch. To compare other Figma servers, see Claude Talk to Figma and the Figma MCP page.