Free · Local · MCP · 2026

Give Claude
hands inside your Figma file.

Twenty-one MCP tools. One local bridge. Zero Dev Mode seats. Read screens, ship an offline agent handoff bundle, lint design-systems, recolor, clone, and translate frames — directly from any MCP-speaking agent, running on your own machine.

Install in 3 minutes → npx figbridge-mcp init GitHub ↗

01 · OverviewOne transcript

Architecture — everything on 127.0.0.1

claude desktop · figbridge

Lint the whole file for DS violations.
→ lint_ds({})
833 findings across 3 rules —
   691 non-grid-spacing
    96 duplicate-name
    46 unbound-color
Recolor the brand #ff7a29 → #3ddc97 file-wide, bind loose fills.
→ recolor · apply_tokens
Recolored 9 fills / 58 nodes.
Bound 14 layers to --color-brand-primary.

MCP tools

vs $25/seat Dev Mode

100%

local · no account

3 min

to install

02What you can dosix flows

Six flows Dev Mode cannot ship.

Each card is a real transcript shape — prompt → tool call → numbers from a real file.

Flow 01 · Spec → App

Ship the whole app from one file.

One call returns every screen, component variant, token, CSS var, and Tailwind config. Claude scaffolds the project.

Use export_app_spec. Scaffold Next.js + Tailwind.
export_app_spec()
fileName: "Draftr — iOS App Design"
screens: 37   components: 43
tokens.colors: 35   numbers: 13
writing app/(onboarding)/*, tailwind.config.js…

Flow 02 · Rebrand

Flip a brand color file-wide.

Swap hex→hex across the whole file, then bind loose fills to variables so the next swap is one line.

Recolor #ff7a29 → #3ddc97 file-wide, bind loose fills.
recolor(scope: "file", mapping: {…})
changes: 9   nodesVisited: 58
apply_tokens({})
bound: 14   unboundRemaining: 1

Flow 03 · /design-review

A PR-ready design-system lint.

The /design-review slash command ships with Figbridge. Grouped findings, markdown-ready.

/design-review
lint_ds({})
findings: 833
· unbound-color      46
· non-grid-spacing  691
· duplicate-name     96

Flow 04 · Asset dump

Every icon straight into your repo.

Base64 SVG for icons & illustrations, PNG@2x for image fills. Claude decodes and writes them.

Export all icons to src/icons/.
list_assets(kind: "icon", limit: 200)
Icon/Home         391B
Icon/Scripts      640B
Icon/Characters   445B
wrote 24 files to src/icons/

Flow 05 · Localization

Onboarding in five languages.

clone_screen with textReplacements duplicates frames and swaps strings. Fonts auto-loaded.

Clone every onboarding screen, translate EN → JA.
list_screens() → filter category=onboarding → 5
clone_screen × 5 (textReplacements: {…})
S02 Welcome / ja   → 1:9-copy
S03 Sign in / ja   → 1:37-copy
42 text replacements applied

Flow 06 · Pair-design

Claude sees what you select, in real time.

Live bridge auto-pushes on every selection change. Suggests fixes, offers to clone_screen with the fix for side-by-side diff.

Rewrite this hierarchy for a11y. Clone with the fix.
get_current_selection({format: "all"})
S10 — Write · html 221B · css 114B
H2 → H3 · contrast 3.1 → 7.2
clone_screen(sourceNodeId: "49:137")
→ 49:137-copy placed at +1600px

03How it worksthree processes

Three processes, one localhost port.

The plugin runs inside Figma. The bridge runs on your machine. Your agent connects over stdio. Nothing leaves 127.0.0.1.

① Plugin side

Runs inside Figma's sandbox under documentAccess: "dynamic-page". Pushes payloads on selection-change, answers commands over SSE.

② Bridge side

Tiny Node server. HTTP for the plugin, stdio for the MCP client. Command queue with UUID + Promise + timeout. Persists the last 25 payloads to ~/.figbridge/.

③ Agent side

Any MCP client launches figbridge-mcp as a subprocess. Tools appear alongside your other MCP servers. No keys, no auth, no network.

04The surface21 tools

Twenty-one tools, three jobs.

Every tool runs through the plugin — no REST, no PAT, no Figma account required.

Read

· Eight tools

get_current_selectionHTML / CSS / Tailwind / tokens for the current selection.
get_last_exportAlias. Last pushed payload.
list_historyRecent selections, newest first.
get_tokensTokens + CSS vars + Tailwind config.
bridge_statusHealth + plugin-connected status.
diff_sinceHistory after a timestamp, with SHA-1 fingerprints.
list_pagesNew. Every page in the file, with frame counts.
list_framesNew. Top-level frames on a page, by id.

Catalog

· Eight tools

list_screensAll top-level frames, categorized.
list_componentsComponents + sets with variants.
describe_screenSemantic summary: size, bg, text, components used.
export_app_specOne-shot JSON spec of the whole file + flows.
export_all_pagesNew. Walk every page; merged HTML / CSS / tokens.
list_assetsBase64 SVG / PNG dump of icons, images, illustrations.
select_nodeSelect & scroll to a node by id or name.
export_nodeExport a specific node without a user click.

Act & Handoff

· Five tools

get_agent_bundleNew. Zip: hierarchy.md · components.json · tokens.* · AGENTS.md · CHANGES.md · flow.mmd · ISSUES.md.
clone_screenDuplicate a frame; optional per-TEXT replacements.
recolorSwap hex colors across selection / page / file.
apply_tokensBind loose fills to matching local color variables.
lint_dsUnbound colors · non-grid spacing · orphans · dup names.

05New · Agent handoffoffline · diff-aware

One zip. Everything an agent needs.

The official Figma MCP needs a live server and poisons the agent's context with its own React+Tailwind conventions. Figbridge's bundle is static, offline, token-budgeted, and deterministic — the exact shape agent loops ask for.

get_agent_bundle(budget: "medium")

figbridge-bundle.zip
├── DESIGN.md         # palette · rhythm · do/don't
├── hierarchy.md      # indented tree · stable slugs
├── components.json   # variants + props schema
├── tokens.json       # DTCG-shaped
├── tokens.css        # :root + modes
├── flow.mmd          # prototype → Mermaid
├── responsive.md     # mobile/tablet/desktop merge
├── ISSUES.md         # a11y audit the agent won't repeat
├── CHANGES.md        # surgical diff since last bundle
├── AGENTS.md         # "use  → "
├── manifest.json     # sha-256 · token counts · stable order
└── screenshots/       # 1:1 with hierarchy slugs

Deterministic slugs

Every node gets a stable path like home/hero/title that survives renames, so the next bundle diffs cleanly.

Three budgets

small (8k) · medium (32k) · large (128k). Files emit in stable-first order so repeated calls hit Anthropic's prompt cache.

Surgical diffs

CHANGES.md tells the agent exactly what to edit — "home/hero/title: 'Welcome' → 'Welcome back'" — instead of re-translating the whole file.

Fuzzy component mapping

Paste src/components/**/*.tsx. Each Figma component is matched to its real file so AGENTS.md can say "use import Button from '@/components/Button'".

Verified on a real .fig file (Draftr iOS App Design): 17 color tokens, nested S1_Home tree, deterministic s1-home / quick-capture / section-label slugs — 43/43 checks pass end-to-end.

06vs Dev Mode / Code Connect

Everything they charge for — plus everything they won't ship.

Both let agents read Figma. Only one is free, local, and actually writes back.

Capability

Dev Mode MCP

Code Connect

Figbridge

Price

$25 / seat / mo

Org plan

Free forever

Requires cloud / account

Yes

No — localhost only

Read screens / components / tokens

Yes

Write back to Figma

recolor · clone · tokens

Whole-file spec export

Selection-scoped

export_app_spec

Design-system lint

lint_ds

Bulk asset dump

One at a time

list_assets

Offline agent handoff bundle

Live server only

get_agent_bundle (zip)

Surgical diff since last export

CHANGES.md

Token-budget tiers

small · medium · large

Deterministic slugs

stable across renames

Live pair-design

Live bridge (SSE)

Works offline

Yes

Open source

MIT

07Setupfour steps · three minutes

Four steps. Three minutes.

One command patches Claude Desktop. Clone the repo to get the plugin. One menu click loads it. You own the whole stack — nothing leaves your machine.

Run the installer

npx figbridge-mcp init
Live on npm and the official MCP registry as io.github.rudraptpsingh/figbridge. Patches Claude Desktop config. No globals, no sudo. Auto-updates on every Claude launch — run npx figbridge-mcp@latest update once if you're on ≤ 0.1.1. Stuck? Run npx figbridge-mcp doctor to reap orphan processes and free port 7331.

ii.

Clone & import the plugin

The plugin is not in Figma Community yet — clone the repo locally:
git clone https://github.com/rudraptpsingh/figbridge
Then: Figma · Plugins · Development · Import plugin from manifest… → pick figbridge/plugin/manifest.json. You only do this once.

iii.

Restart Claude Desktop

Quit & reopen — Claude only reads its MCP config at launch. Then ask: "what tools does figbridge expose?" Expect 21.

iv.

Toggle Live bridge

Run the Figbridge plugin on any frame. Flip Live bridge on. Green dot in the plugin header = connected to the local bridge. The footer shows the port.

Stuck?

Claude shows "Server disconnected" → npx figbridge-mcp doctor reaps orphan bridges and probes ports 7331–7340. Then restart Claude.
Plugin says "NO BRIDGE ON 7331–7340" → the bridge isn't running. Quit and reopen Claude Desktop; its launch spawns the bridge. If it still fails, run doctor.
Running an older install (≤ 0.1.1) → npx figbridge-mcp@latest update self-heals the stale npx-cache path.
Prefer to lock a version → npx figbridge-mcp init --pin opts out of auto-updates.

Figma Dev Mode is $25 a seat. Your agent already lives on your machine.
Figbridge is the part that shouldn't have needed paying for.

— MIT · 2026 · Rudra Pratap Singh

Give Claude hands inside your Figma file.