Layerbridge

A Figma plugin and a local MCP server that let AI tools — Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, Codex, anything that speaks the Model Context Protocol — read, edit, check and export the Figma file you have open. Everything runs on your computer: no API rate limits, no Figma token needed.

• 116 tools for Figma design files, FigJam boards and Slides decks, plus 6 optional REST tools.
• Quality checks nobody else ships together: WCAG contrast (also over images and gradients), target size, design-system lint and one-step fixes that bind raw values to your variables.
• Design ↔ code: compact code context (JSON, JSX + Tailwind, HTML + CSS), token export and import, pixel diffs between a design and the page you built, a local page imported as layers.
• Reliable on big files: every call has a timeout that names the stuck layer, long jobs report progress, bulk exports dedupe and write a manifest.

Derived from gethopp/figma-mcp-bridge (MIT). See CHANGELOG.md and NOTICE.md. Not affiliated with, endorsed or sponsored by Figma, Inc.

How it works

AI tool ──stdio──▶ MCP server (Node, 127.0.0.1:1995) ◀──WebSocket── Figma plugin ──Plugin API──▶ your open file

The plugin can only reach the file it is running in, and only while it is open. The server only listens on your own machine.

Install

Requires Node 20+ and Figma desktop (recommended — see Limits).

1. Add the server to your AI tool
   • Claude Code (server + skills): /plugin marketplace add muradyf/layerbridge, then /plugin install layerbridge@layerbridge
   • Claude Code (server only):
     Terminal

     Copy

     claude mcp add --transport stdio --scope user layerbridge -- npx -y layerbridge@latest
     

   • Claude Desktop: open the .mcpb file from the latest release.
   • Cursor, VS Code, Windsurf, Codex: npx -y layerbridge@latest setup --client <name> prints the config. Add --write to write it for Cursor, Windsurf or Claude Desktop (it shows the diff and keeps a backup).
2. Add the plugin to Figma (once): run npx -y layerbridge@latest setup. It prints a manifest path. In Figma desktop: Plugins → Development → Import plugin from manifest… → that path. For FigJam boards and Slides decks, also import the second manifest it prints (Figma won't let one plugin run in both Dev Mode and FigJam). Re-run setup after updating.
3. Restart the AI tool.

Something not working? npx -y layerbridge@latest doctor checks Node, the port, the access token, connected files and the installed plugin.

Every session

1. Open the Figma file.
2. Plugins → Development → Layerbridge. The panel shows a green dot when connected.
3. Ask your AI tool to work on the file. Keep the plugin window open; it can be collapsed.

The server also offers prompts — implement-design, audit-design, build-in-figma, sync-tokens, troubleshoot — and the Claude Code plugin adds skills for the same workflows plus asset export.

Tools

Deleting pages, slides, styles or variables requires confirm: true. Bulk changes (fix_design_system, import_tokens) show what they would do unless you pass dryRun: false.

Quality checks

• check_accessibility — WCAG 2.2 text contrast (1.4.3 AA / 1.4.6 AAA), target size (2.5.8 at 24px with the spacing exception, 2.5.5 at 44px) and very small text. Contrast is computed from the layers behind each text; over images, gradients, blurs or blend modes the containing layer is rendered and the pixels behind the text are sampled, reporting the worst background. Each failure names the nearest colour variable or style in the file that would pass. outputDir writes JSON and Markdown reports; annotate: true adds Figma annotations to failing layers (works in Dev Mode) and replaces its own on re-runs. APCA Lc is included for information.
• lint_design_system — unbound colours, spacing and radii (with the matching variable or style, respecting scopes and modes), text without a style, detached instances, values off your spacing/radius scale, default layer names, hidden and empty layers. Counts per rule and a score.
• fix_design_system — applies the lint's safe fixes: binds variables that resolve to the same value in the layer's mode (colours within ΔE 2), single-paint styles and exactly matching text styles, and reports what it skipped and why.

Design ↔ code

• get_code_context reads a layer once and returns a compact tree: flex/grid layout, deduped style tables, mixed-text segments, instances with variant props, icons collapsed to an asset hint, images as refs. Every variable-bound value carries its variable name and the same CSS custom property export_tokens writes. format: "jsx-tailwind" or "html-css" returns starter code headed by the tokens, components, icons and images it needs.
• import_tokens brings W3C DTCG JSON, CSS custom properties or Tailwind v4 @theme into local variables. :root is the default mode; [data-theme="x"], .dark and @media (prefers-color-scheme: dark) are other modes. It round-trips export_tokens output and never deletes.
• compare_to_image diffs a layer against a screenshot of what you built, writes design, actual and diff images, and lists the areas that differ with the layers under each.
• import_url turns a page running on your machine into editable layers.
• The URL options of compare_to_image and import_url need Playwright, which is not installed by default: in server/ run bun add playwright then npx playwright install chromium, or point FIGMA_BRIDGE_PLAYWRIGHT at an existing install. JPG screenshots need jpeg-js.

Optional REST tools

Comments, reading version history, listing a team's files and rendering files that aren't open are not possible from a plugin. To enable them, create a personal access token (Figma → Settings → Security) and set FIGMA_ACCESS_TOKEN in the server's environment. These calls count against Figma's REST rate limits, which are very low for files on the Starter plan and for View/Collab seats.

Configuration