The full upstream README, mirrored here for reference. Install config, tool schemas, adoption signals, and an original overview live on the Figbridge listing page.
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.
Figbridge is built for the community path: free, open source, local, and useful from website capture all the way back to source patches.
Figbridge:
preflight_import flags bot pages, deep DOM, low-res images, SVG-heavy pages, and downloadable font assets before a full import.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-extension/ unpacked to send visible viewports, full pages, selected elements, authenticated tabs, localhost, or staging pages directly to the local bridge.get_agent_bundle produces a zip (hierarchy · tokens · components · AGENTS.md · CHANGES.md) an agent can ship from without a live MCP connection.The plugin is not in Figma Community yet, so you clone the repo to get it. The MCP server comes from npm.
Then:
plugin/manifest.json from the clone above. (One-time.)For any other MCP client (Cursor, Cline, VS Code, …), point it at the same binary: npx figbridge-mcp.
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.
If Claude Desktop shows "Server disconnected" or port 7331 gets stuck, run:
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:
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.
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:
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.
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)
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 (fast structured field-level diff between two rendered URLs) · 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)
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.
The chrome-extension/ folder contains an unpacked MV3 extension for authenticated pages:
chrome://extensions, enable Developer mode, and load the chrome-extension/ folder unpacked.Browser captures can group each website or project into its own Figma page, for example Chrome Capture - Raycast or Chrome Capture - Localhost, so separate projects stay navigable inside one open Figma file.
The extension only posts to 127.0.0.1:7331..7340; it does not send page data to a cloud service.
get_agent_bundle is the differentiator. One call returns a zip:
Three budget tiers (small 8k / medium 32k / large 128k tokens). Slugs are deterministic — rename a node, the slug stays — so CHANGES.md is a real surgical diff instead of a whole-file retranslation.
Figbridge is the first MCP-native tool that closes the loop in both directions.
import_url pulls a live URL into a Figma page (multi-page aware via pageName; section-aware via rootSelector).audit_regression to compare production/staging against a local candidate and catch UI/UX regressions before updating Figma or shipping code.diff_to_source reports exactly which text-node fields diverged from the source URL — characters / fontSize / fontFamily / color / presence.generate_patch turns the diff into a minimal before/after edit list against a local source directory. Style swaps get structured hints (token vs literal) instead of blind text replacements.No LLM rewrites in the loop. Every step is deterministic and idempotent.
| Format | Shape |
|---|---|
| HTML + CSS | Self-contained document, positional layout preserving pixel fidelity. |
| Tailwind | Same tree with Tailwind arbitrary-value utilities (w-[120px], bg-[#ff7a29]) + CDN script. |
| Design tokens | DTCG JSON tree, :root { --var: value } CSS, Tailwind config fragment. Reads Figma Variables + local paint styles. |
plugin/code.js) — reads the node tree, computes HTML/CSS/Tailwind/tokens deterministically. ES2017-safe (no spread / ?? / ?.) for the Figma sandbox.plugin/ui.html) — cream/ink/rust theme, Figma-native layer navigator, inline Commands panel with a Run button per tool.mcp/src/) — stdio MCP via @modelcontextprotocol/sdk, sibling HTTP + SSE server on :7331 for plugin pushes and bidirectional commands. State in-memory + persisted to ~/.figbridge/last.json.MIT © Rudra Pratap Singh