Connect Figma to code

To build from a design with an AI assistant, the assistant needs a live line into Figma — to read the frame, its structure, and its token bindings. This is the setup we use, and it's the first thing to get working before any design-to-code build (it's what powers Step 0 of the demo build logs).

There are two ways to connect. We use the first (the Neumo Toolkit bridge); the second (the official Figma MCP) is a good read-only alternative.

	Neumo Toolkit + figma-console-mcp (what we use)	Official Figma MCP (alternative)
Direction	Live, two-way — read selection/variables, run code, write back	Mostly read (design → code)
Setup	Install our plugin + run the bridge	Enable Figma's MCP server
Best for	The full design↔code loop	Quick read-only design/token pulls

Path A — Neumo Toolkit + `figma-console-mcp` (what the demos use)

The Neumo Toolkit is our Figma plugin. It wraps figma-console-mcp and opens a live WebSocket bridge between the Figma desktop app and your AI client, so the assistant can call Figma tools against the file you have open.

The connection has three pieces: the plugin (in Figma), the bridge + MCP server (figma-console-mcp), and your AI client (Claude Code).

Claude Code  ⇄  figma-console-mcp (MCP server + Desktop Bridge)  ⇄  Neumo Toolkit plugin  ⇄  your Figma file
   (stdio)                       (WebSocket :9220–9232)

In code (your AI client)

Register figma-console-mcp as an MCP server so Claude gets its tools. In your project .mcp.json:
```
{
  "mcpServers": {
    "figma-console-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["figma-console-mcp"]
    }
  }
}
```
(Or: claude mcp add --scope project figma-console-mcp -- npx figma-console-mcp.)
Run the bridge. figma-console-mcp exposes a Desktop Bridge over WebSocket on ws://localhost:9220, rolling forward to 9221…9232 if a port is busy. Start it in a terminal:
```
npx figma-console-mcp
```
Note the port it actually claims — you select it in the plugin next:
```
lsof -nP -iTCP -sTCP:LISTEN | grep -E ':92[0-9][0-9]'
```

In Figma

Install the toolkit (private package — needs your npm token; see the npm access token guide):
```
npm install --save-dev @kofile/neumo-toolkit
```
In the Figma desktop app (plugin dev needs desktop, not browser): Plugins → Development → Import plugin from manifest… → select node_modules/@kofile/neumo-toolkit/manifest.json.
Open your design file, then run Neumo Toolkit from Plugins → Development.
In the plugin's Bridge tab, set PORT to the port the bridge claimed in the previous step, and click Connect. The header pill turns green when the WebSocket handshake completes.

Verify + use it

In Claude Code, /mcp should list figma-console-mcp as connected.
With a file open and the bridge green, the assistant can call the figma-console-mcp tools — e.g. read the current selection, read variables (figma_get_variables), and screenshot a node (figma_take_screenshot / figma_get_screenshot) — against the live file.

Troubleshooting

The #1 issue is a port mismatch — the plugin pill goes red / shows a close event. The bridge bound to a different port than the dropdown. Fix: find the real port (lsof … above), select it in the Bridge tab, reconnect. Full troubleshooting (stray processes, pinning 9220, re-import) is on the Toolkit page.

Path B — Official Figma MCP (read-only alternative)

If you just need to read a design (design → code) and don't need the live write-back loop, Figma's own MCP server works well. Two flavors:

Remote (recommended, all plans): https://mcp.figma.com/mcp. Auth via a Figma personal access token (file:read). No Figma-side setup.
Desktop / Dev Mode (paid Dev/Full seat): the Figma desktop app runs a local server at http://127.0.0.1:3845/mcp. Toggle Dev Mode → enable MCP server in the right sidebar. This flavor adds selection-scoped context.

In the client

# remote
claude mcp add --transport http figma https://mcp.figma.com/mcp
# desktop (Figma open, Dev Mode MCP enabled)
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

.mcp.json equivalent:

{ "mcpServers": { "figma": { "type": "http", "url": "https://mcp.figma.com/mcp" } } }

claude mcp list should show it connected.

Point it at a design

From a Figma node URL …/design/<fileKey>/<name>?node-id=1-2, the fileKey is the slug after /design/ and the nodeId is 1-2 (→ 1:2). Then:

get_screenshot — a PNG of the node
get_design_context — reference code + context
get_variable_defs — the node's variable/token bindings (the ground truth for aligning to tokens — see the demo write-up's Pass 5)
get_metadata — lightweight structure (node ids/types/sizes)

Notes

Remote needs a Figma account + PAT; desktop needs a paid Dev/Full seat + Dev Mode enabled + the desktop app running.
Common failures: MCP not enabled in Figma, wrong URL, missing node-id, or the desktop app closed. Verify with claude mcp list.

Which should I use?

Building against the design system, iterating live, or writing back to Figma → Path A (Neumo Toolkit). It's the full loop and what our demos use.
A quick, read-only design/token pull → Path B (official Figma MCP), especially the remote server (works on any plan, just needs a token).

You can have both configured; they don't conflict.