localhost-figma-mcp

Connects Claude to the Figma file you have open. It runs entirely on your machine with no telemetry. The only network traffic is 127.0.0.1:38470, plus any URLs you ask Claude to fetch.

Claude ──stdio MCP──> dist/server.js ──SSE / POST on localhost:38470──> Figma plugin UI ──postMessage──> figma.* API

Tools

| Tool | What it does | |---|---| | figma_execute | Runs any JS in the file with the whole Figma Plugin API in scope (async body, return a value, console.log is captured). files: {key: path or URL} makes local files or downloads available as files.key | | figma_screenshot | Returns a PNG of a node, the current selection, or the page (long side capped at 2048px) | | figma_export | Writes nodes to disk as PNG, JPG, SVG or PDF (default folder: figma-exports/) | | figma_html | Renders HTML/CSS in a real browser engine inside the plugin and rebuilds it as editable layers (see HTML import) | | figma_status | Lists the Figma files with the plugin open, the connected Claude sessions, and the bridge version |

Every tool except figma_status takes an optional file: the name of the Figma file to target. Without it, commands go to the plugin window opened most recently.

The server also sends Claude a short list of Figma API tips when it connects, such as loading fonts before editing text.

HTML import

figma_html lays the page out in a hidden browser frame, measures every element, and rebuilds it in Figma:

• Layers: frames, text, images (<img>, CSS backgrounds, <canvas>), inline SVG, form field values and placeholders, and ::before/::after pseudo-elements.
• Styles: fills, borders, per-corner radius, shadows, opacity, clipping, and linear, radial and conic gradients (repeating ones too), including several layered on one element.
• Layout: flex containers become auto layout and CSS grids become Figma grids when Figma reproduces the browser's layout within 2px; everything else keeps exact positions. flex-grow and stretched children become "fill" and "stretch" where that matches. Rotated and scaled elements keep their transform, and layers stack by z-index across their whole stacking context.
• Fonts: text is measured in the font Figma will draw it in: the page's font when Figma has it, otherwise the same Inter Figma uses, so line wraps match. The page's own web fonts (for example from Google Fonts) are downloaded and used. The result lists each font that was replaced.
• Assets: local and remote images, stylesheets and fonts referenced by the page are inlined automatically.

Install

pnpm install
pnpm build

Figma (Desktop app): Plugins → Development → Import plugin from manifest → dist/figma-plugin/manifest.json. Then run Localhost MCP Bridge in the file you want Claude to edit. It works in Design, FigJam and Slides files, and in Dev Mode, where Figma makes it read-only.

Claude Code, choose one:

# from npm (no clone or build needed)
claude mcp add -s user figma-local -- npx -y localhost-figma-mcp

# as a plugin (includes a check at session start that tells Claude whether Figma is connected)
claude plugin marketplace add /path/to/localhost-figma-mcp
claude plugin install localhost-figma@localhost-figma

# or as a plain MCP server
claude mcp add -s user figma-local -- node /path/to/localhost-figma-mcp/dist/server.js

Claude Desktop: add {"mcpServers":{"figma-local":{"command":"npx","args":["-y","localhost-figma-mcp"]}}} to claude_desktop_config.json.

When the plugin window says Connected to Claude, the bridge is working. The window also shows the heartbeat, which Claude sessions are connected, and every command as it runs, with its duration and any error. Run pnpm build again after pulling changes, then re-run the plugin and restart Claude.

Notes

• Several Claude sessions: the first session's server owns the port and the others relay through it. If the first session exits, another takes over and the plugin reconnects on its own.
• Several Figma files: run the plugin in each file. Pass file to pick one, otherwise the most recently opened window is used.
• Security: websites and non-localhost Host headers are rejected. The relay endpoint refuses any request that comes from a browser.
• Slow PNG exports: Figma slows down rendering while its window is in the background, so PNG exports and screenshots can take over a minute. Keep Figma visible for fast screenshots.
• HTML import limits: grid tracks become fixed sizes, skew is dropped, and non-uniform scale only stretches the frame. See BACKLOG.md for the rest.
• No undo protection: figma_execute runs whatever code Claude writes, with full edit rights to the open file. Use Ctrl+Z or version history to undo.

Development

pnpm install
pnpm test:setup   # once: Chromium for the HTML measurement tests
pnpm check        # typecheck, lint, tests

dist/ isn't committed, so run pnpm build after cloning or pulling. Contributing: see AGENTS.md.