{"id":50444059,"url":"https://github.com/rudraptpsingh/figbridge","last_synced_at":"2026-05-31T20:30:24.946Z","repository":{"id":352914883,"uuid":"1217204199","full_name":"rudraptpsingh/figbridge","owner":"rudraptpsingh","description":"Figma → Code (HTML/CSS/Tailwind/tokens), read by any AI agent via MCP. Free, local, no Dev seat, no account.","archived":false,"fork":false,"pushed_at":"2026-05-12T17:18:37.000Z","size":557,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-12T17:36:24.719Z","etag":null,"topics":["ai-agents","anthropic","claude","cursor","design-to-code","design-tokens","figma","figma-plugin","figma-to-code","mcp","model-context-protocol","tailwindcss"],"latest_commit_sha":null,"homepage":"https://rudraptpsingh.github.io/figbridge/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rudraptpsingh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-21T16:44:14.000Z","updated_at":"2026-05-12T17:20:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/rudraptpsingh/figbridge","commit_stats":null,"previous_names":["rudraptpsingh/figbridge"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rudraptpsingh/figbridge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rudraptpsingh%2Ffigbridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rudraptpsingh%2Ffigbridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rudraptpsingh%2Ffigbridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rudraptpsingh%2Ffigbridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rudraptpsingh","download_url":"https://codeload.github.com/rudraptpsingh/figbridge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rudraptpsingh%2Ffigbridge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33748607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agents","anthropic","claude","cursor","design-to-code","design-tokens","figma","figma-plugin","figma-to-code","mcp","model-context-protocol","tailwindcss"],"created_at":"2026-05-31T20:30:24.447Z","updated_at":"2026-05-31T20:30:24.936Z","avatar_url":"https://github.com/rudraptpsingh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figbridge\n\n**Figma ↔ code, in both directions.** Free, local, no Dev Mode seat, no account.\n\nFigbridge 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`.\n\n```\n┌──────────┐   postMessage   ┌──────────┐   HTTP + SSE    ┌───────────────┐     stdio     ┌──────────────┐\n│  Figma   │ ──────────────▶ │  Plugin  │ ──────────────▶ │  MCP Server   │ ◀──────────── │  AI agent    │\n│  Desktop │                  │   UI     │   :7331/push    │  (localhost)  │   tools/call  │  (Claude …)  │\n└──────────┘                  └──────────┘                 └───────────────┘               └──────────────┘\n```\n\n## Why\n\nFigma's own [Dev Mode MCP](https://help.figma.com/hc/en-us/articles/32132100833559) requires a **$25/seat Dev subscription**, runs in the cloud, and emits prescriptive React+Tailwind that poisons an agent's context. Third-party plugins like Anima / Codejet / Builder.io require accounts and run in the cloud.\n\nFigbridge:\n- **Free.** MIT. Runs entirely on your machine.\n- **No account, no token.** Uses your existing Figma desktop session.\n- **40+ MCP tools.** Read, catalog, write-back, lint, ship an agent handoff bundle, import a live URL into Figma, audit the imported design across 5 dimensions, and round-trip changes back to a source repo as a patch.\n- **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.\n- **Deterministic.** No LLM rewrites. What you select is what you get.\n- **Live.** Toggle \"Live bridge\" and every selection change auto-pushes; agents pull the current selection instantly.\n\n## Install — ~3 minutes\n\nThe plugin is **not in Figma Community yet**, so you clone the repo to get it. The MCP server comes from npm.\n\n```bash\n# 1. Get the Figma plugin (clone the repo)\ngit clone https://github.com/rudraptpsingh/figbridge\n\n# 2. Patch Claude Desktop's MCP config\nnpx figbridge-mcp init\n```\n\nThen:\n\n1. **Quit and reopen Claude Desktop** — it only reads MCP config at launch.\n2. In Figma: **Plugins → Development → Import plugin from manifest…** → pick the `plugin/manifest.json` from the clone above. (One-time.)\n3. 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.\n4. In Claude: *\"What tools does figbridge expose?\"* — you should see 40+.\n\nFor any other MCP client (Cursor, Cline, VS Code, …), point it at the same binary: `npx figbridge-mcp`.\n\n### Via the MCP registry\n\nFigbridge is also listed on the official [Model Context Protocol registry](https://registry.modelcontextprotocol.io/) as `io.github.rudraptpsingh/figbridge`. Clients that support the registry (Claude Desktop, Cursor, VS Code) can discover and install it without hand-editing config.\n\n### Troubleshooting\n\nIf Claude Desktop shows **\"Server disconnected\"** or port 7331 gets stuck, run:\n\n```bash\nnpx figbridge-mcp doctor\n```\n\nIt 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.\n\n### Updating\n\n`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.\n\nIf you installed an older version (≤ 0.1.1) that baked an absolute path into your config, run this once to self-heal:\n\n```bash\nnpx figbridge-mcp@latest update\n```\n\nUse `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.\n\n## MCP tools\n\n**Read (8)** — `get_current_selection` · `get_last_export` · `list_history` · `get_tokens` · `bridge_status` · `diff_since` · `list_pages` · `list_frames`\n\n**Catalog (8)** — `list_screens` · `list_components` · `describe_screen` · `export_app_spec` · `export_all_pages` · `list_assets` · `select_node` · `export_node`\n\n**Act \u0026 Handoff (5)** — `get_agent_bundle` · `clone_screen` · `recolor` · `apply_tokens` · `lint_ds`\n\n**Browser (6)** — `import_url` (live URL → Figma frame), `screenshot_url`, `probe_url`, `fingerprint_url`, `verify_text_fidelity`, `measure_fidelity`\n\n**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)\n\n**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)\n\nAll audits are pure deterministic measurement — no LLM. They return numeric scores and structured issue lists ready to feed back into a planning loop.\n\n## The agent handoff bundle\n\n`get_agent_bundle` is the differentiator. One call returns a zip:\n\n```\nDESIGN.md          palette · rhythm · do/don't\nhierarchy.md       indented tree with deterministic slugs\ncomponents.json    variants + props schema\ntokens.json        DTCG-shaped\ntokens.css         :root + per-mode blocks\nflow.mmd           Figma prototype → Mermaid graph\nresponsive.md      mobile/tablet/desktop merged\nISSUES.md          a11y audit the agent shouldn't repeat\nCHANGES.md         surgical diff since last bundle\nAGENTS.md          \"when you see slug X, import Y\"\nmanifest.json      sha-256 + token counts, stable order for prompt cache\nscreenshots/       1:1 paired with hierarchy slugs\n```\n\nThree 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.\n\n## The closed loop: URL → Figma → diff → patch\n\nFigbridge is the first MCP-native tool that closes the loop in both directions.\n\n```\n                 import_url                      diff_to_source\n   ┌──────────┐  ──────────▶  ┌──────────┐  ──────────▶  ┌──────────┐\n   │  Source  │                │  Figma   │                │  changes │\n   │  (URL,   │                │  frame   │                │   list   │\n   │   repo)  │ ◀──────────    │ (edited) │                └────┬─────┘\n   └──────────┘  generate_patch└──────────┘                     │\n                                                                ▼\n                                                         apply or review\n```\n\n1. **`import_url`** pulls a live URL into a Figma page (multi-page aware via `pageName`).\n2. **Audit** the result with the five Pillar 2 tools to find palette drift, contrast failures, off-grid spacing, mobile breakage.\n3. The designer edits the frame in Figma.\n4. **`diff_to_source`** reports exactly which text-node fields diverged from the source URL — characters / fontSize / fontFamily / color / presence.\n5. **`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.\n\nNo LLM rewrites in the loop. Every step is deterministic and idempotent.\n\n## Output formats\n\n| Format | Shape |\n|---|---|\n| **HTML + CSS** | Self-contained document, positional layout preserving pixel fidelity. |\n| **Tailwind** | Same tree with Tailwind arbitrary-value utilities (`w-[120px]`, `bg-[#ff7a29]`) + CDN script. |\n| **Design tokens** | DTCG JSON tree, `:root { --var: value }` CSS, Tailwind config fragment. Reads Figma Variables + local paint styles. |\n\n## Architecture\n\n- **Plugin main thread** (`plugin/code.js`) — reads the node tree, computes HTML/CSS/Tailwind/tokens deterministically. ES2017-safe (no spread / `??` / `?.`) for the Figma sandbox.\n- **Plugin UI** (`plugin/ui.html`) — cream/ink/rust theme, Figma-native layer navigator, inline Commands panel with a Run button per tool.\n- **MCP server** (`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`.\n\n## What Figbridge does *not* do\n\n- No reach into Figma without the desktop app + plugin open. No REST API, no PAT.\n- No AI code rewrites. It's a deterministic tree walker.\n- No publishing to Figma or to the cloud.\n\n## Development\n\n```bash\ncd mcp \u0026\u0026 npm install \u0026\u0026 npm test        # integration smoke test\nnode test-agent/run.js                   # 130 unit tests on the render pipeline\nnode test/scenarios.mjs                  # 54 real-world scenario checks\nnode test/real-figma.mjs                 # 43 checks against a parsed real .fig\nnode test/tools-all.mjs                  # 21-tool MCP surface + e2e\nnode --check plugin/code.js              # plugin syntax check\n```\n\n## Links\n\n- Landing page: https://rudraptpsingh.github.io/figbridge/\n- npm: https://www.npmjs.com/package/figbridge-mcp\n\n## License\n\nMIT © Rudra Pratap Singh\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudraptpsingh%2Ffigbridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frudraptpsingh%2Ffigbridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudraptpsingh%2Ffigbridge/lists"}