Figbridge

Figbridge

Figma ↔ code, in both directions. Free, open source, local, and built for the community.

Figbridge is a Figma plugin + local MCP server. Open the plugin on any file, toggle the Live bridge, and any MCP-capable agent (Claude Desktop, Claude Code, Cursor, Continue, Cline…) can read screens, tokens, and components, import a whole URL into Figma, audit the imported design, diff it back against the source, and emit a patch for the source repo — over 127.0.0.1.

┌──────────┐   postMessage   ┌──────────┐   HTTP + SSE    ┌───────────────┐     stdio     ┌──────────────┐

│ Figma │ ──────────────▶ │ Plugin │ ──────────────▶ │ MCP Server │ ◀──────────── │ AI agent │ │ Desktop │ │ UI │ :7331/push │ (localhost) │ tools/call │ (Claude …) │ └──────────┘ └──────────┘ └───────────────┘ └──────────────┘

Why

Figbridge is built for the community path: free, open source, local, and useful from website capture all the way back to source patches.

Figbridge:

• Free. MIT. Runs entirely on your machine.
• No account, no token. Uses your existing Figma desktop session.
• 54 MCP tools. Read, catalog, write-back, lint, map Figma components to code (Code Connect without a Dev seat), ship an agent handoff bundle, import a live URL into Figma, audit the imported design across 5 dimensions, round-trip changes back to a source repo as a patch, and run a closed visual-diff loop that brings a running app into line with its mockup.
• Import diagnostics before you wait. preflight_import flags bot pages, deep DOM, low-res images, SVG-heavy pages, and downloadable font assets before a full import.
• Hybrid fallback for hard pages. import_url({ hybridSnapshot: true }) can place a full-page screenshot reference under editable layers for video-heavy or generated sites where pixel fidelity matters.
• Chrome/Edge current-tab capture. Load chrome-extension/ unpacked to send visible viewports, full pages, selected elements, authenticated tabs, localhost, or staging pages directly to the local bridge.
• Offline agent bundle. get_agent_bundle produces a zip (hierarchy · tokens · components · AGENTS.md · CHANGES.md) an agent can ship from *without* a live MCP connection.
• Deterministic. No LLM rewrites. What you select is what you get.
• Live. Toggle "Live bridge" and every selection change auto-pushes; agents pull the current selection instantly.

Install — ~3 minutes

The plugin is not in Figma Community yet, so you clone the repo to get it. The MCP server comes from npm.

# 1. Get the Figma plugin (clone the repo)

git clone https://github.com/rudraptpsingh/figbridge

2. Patch Claude Desktop's MCP config

npx figbridge-mcp init

Then:

1. Quit and reopen Claude Desktop — it only reads MCP config at launch.
2. In Figma: Plugins → Development → Import plugin from manifest… → pick the plugin/manifest.json from the clone above. (One-time.)
3. Run the Figbridge plugin on any frame, toggle Live bridge on. A green dot in the plugin header = connected to the local bridge. The footer shows the port.
4. In Claude: *"What tools does figbridge expose?"* — you should see 40+.

For any other MCP client (Cursor, Cline, VS Code, …), point it at the same binary: npx figbridge-mcp.

Via the MCP registry

Figbridge is also listed on the official Model Context Protocol registry as io.github.rudraptpsingh/figbridge. Clients that support the registry (Claude Desktop, Cursor, VS Code) can discover and install it without hand-editing config.

Troubleshooting

If Claude Desktop shows "Server disconnected" or port 7331 gets stuck, run:

npx figbridge-mcp doctor

It reaps orphan figbridge-mcp processes and reports which ports are alive. The bridge auto-falls-back to 7332..7340 if 7331 is held, and the plugin auto-probes the same range — so "port in use" won't block you. FIGBRIDGE_PORT=NNNN overrides the preferred starting port.

For long local agent sessions that drive Figma through POST /command, run a persistent bridge:

npx figbridge-mcp bridge

This starts only the local HTTP+SSE bridge and keeps it alive after stdin closes. Use this when a desktop/terminal tool starts short-lived commands but you want the Figma plugin connection to remain stable across multiple agent actions.

Updating

init writes a config that runs npx -y figbridge-mcp@latest, so every Claude Desktop launch pulls the current version — no action needed after a new release.

If you installed an older version (≤ 0.1.1) that baked an absolute path into your config, run this once to self-heal:

npx figbridge-mcp@latest update

Use npx figbridge-mcp init --pin if you'd rather lock to the currently installed copy (no auto-updates). npx figbridge-mcp --version prints the installed version.

MCP tools

Read (8) — get_current_selection · get_last_export · list_history · get_tokens · bridge_status · diff_since · list_pages · list_frames

Catalog (8) — list_screens · list_components · describe_screen · export_app_spec · export_all_pages · list_assets · select_node · export_node

Act & Handoff (5) — get_agent_bundle · clone_screen · recolor · apply_tokens · lint_ds

Browser (11) — preflight_import (risk check before import, including font download URLs), import_url (live URL → Figma frame; optional hybridSnapshot screenshot reference), import_responsive_set (desktop / tablet / mobile and optional light / dark theme captures), import_url_batch (bulk URL imports), screenshot_url, probe_url, fingerprint_url, audit_interactions (hover / focus discovery), verify_text_fidelity, measure_fidelity, audit_regression (baseline URL vs candidate URL frontend/UI regression audit)

Pillar 1 — Round-trip editing (2) — diff_to_source (per-text-node field diff between imported frame and live source) · generate_patch (turn the diff into a minimal HTML/JSX/etc patch against a source dir; style swaps get structured CSS-file hints)

Pillar 2 — Design intelligence audits (5) — audit_palette · audit_typography · audit_a11y (WCAG 2.x contrast, landmarks, alt text) · audit_whitespace (padding/gap rhythm, 4/8-grid conformance) · audit_mobile (multi-viewport responsive: horizontal scroll, overflow-x, sub-44px touch targets, sub-12px text)

Code Connect (3) — connect_components (seed / edit figbridge.connect.json: Figma component → code component + props) · get_code_connect (mapped component, props and a ready-to-paste JSX snippet for an instance) · lint_connect (CI gate: files, exports, props, literal values and Figma properties all still exist). See Code Connect without a Dev seat.

Pillar 3 — Match the mockup (3) — match_mockup (closed render → diff → refine loop: renders a running app and its target mockup, returns per-viewport visual scores plus a prioritized punch-list of copy / color / typography / spacing / elevation / icon / structure differences, a design-language style fingerprint, and — with sourceDir — the source file to edit for each item) · diff_specs (exact structured field-level diff between rendered URLs or captured spec JSON files) · map_components (index an app's source tree — data-testid / component → file, plus design tokens — so diffs name the file to change and the token a literal should become)

Component check against Figma. Screenshot one variant with any Figma exporter (plugin export_frame, or a Figma MCP screenshot), render the same component at its size with screenshot_url (width + height, fullPage: false), then diff_images both: you get a score, SSIM and a montage PNG. Serve a kit page that renders every variant (e.g. a ?kit route) and point match_mockup at it for whole-sheet runs.

Find the sizing rule in code. For a matched design HTML view and app state, pass the repo root as sourceDir to match_mockup or diff_specs. Deltas include viewport x/y and size. FigBridge resolves a data-testid plus data-state (or figbridge.connect.json component name) to a source file and shows the nearby JSX class. When the current dimension has one matching authored literal, codeChange gives the exact line, current rule, and suggested replacement; otherwise it leaves the edit unresolved. It also compares Figma-exported float variables in tokens.json with generated v2Tokens.json and reports tokenDrift. A screenshot by itself only supports the pixel comparison, and different photos or UI states cannot certify a whole-screen match.

The structured diff now keeps uniquely named siblings aligned when the app inserts a bar or panel, reports differing explicit data-state markers, and discloses omitted findings if the punch list reaches its cap. Comparable colour, geometry and style values are reported exactly by default; set tolerant: true to suppress small numeric and sub-JND colour differences. A missing or incomplete structured comparison cannot pass on pixel score alone. The two URLs still need matching content/state and an inspectable design export; FigBridge cannot infer Electron DOM fields or Figma token values from a PNG.

Native Electron state. diff_specs accepts appSpecPath in place of appUrl (and mockupSpecPath in place of mockupUrl). Capture the actual Electron Playwright page after the target state settles. Read mcp/src/dom-to-spec.js, then run await page.evaluate(extractor) and await page.evaluate(() => window.domToSpec({ rootSelector: 'body', viewport: 1440, embedImages: false })); save the result as JSON. Playwright evaluation works with a packaged renderer's script-src 'self' policy, while page.addScriptTag({ content: extractor }) can be blocked by it. Call diff_specs with a rendered Figma HTML mockupUrl, the native appSpecPath, and sourceDir to get exact paired values plus source locations. Both sides may instead be captured JSON files. Each side must provide exactly one URL or spec path. A Figma PNG supports pixel comparison only; exact Figma fields require its inspectable export, and a whole-screen verdict still requires matched content and state.

Different layer trees. Pass anchors to diff_specs when a native DOM tree does not mirror Figma's layer nesting. Each pair names a Figma node (mockupId from a structured Figma spec, or unique mockupName) and an app data-testid; fields can limit a pair to properties actually inspected, such as ['x','y','width','height']. FigBridge compares viewport geometry from both specs and reports exact per-anchor deltas with app source mapping. coverage shows requested, uniquely matched and missing/ambiguous anchors; any unmatched anchor prevents ok: true. This is a measured subset, so add anchors for every region whose properties you intend to certify. Example: { "name": "Action pill", "mockupId": "95:2956", "appTestid": "photo-toolbar-pill", "fields": ["x", "y", "width", "height"] }. A Figma spec node can carry _figmaId and the values read from its live node; a screenshot alone cannot supply them.

All audits are pure deterministic measurement — no model calls. They return numeric scores and structured issue lists ready to feed back into a planning loop. audit_regression can be used as a local/CI gate before shipping a UI change: it compares screenshots, missing visible text, responsive issue deltas, and CSS-feature drift across desktop/tablet/mobile.

Chrome current-tab capture

The chrome-extension/ folder contains an unpacked MV3 extension for authenticated pages:

1. Open chrome://extensions, enable Developer mode, and load the chrome-extension/ folder unpacked.
2. Start Figbridge MCP and open the Figbridge Figma plugin with **Li