figma-mcp-go

Figma MCP — Local Plugin Integration

Open-source Figma MCP server with full read/write access via plugin. Turn text into designs and designs into real code. Works with Cursor, Claude, GitHub Copilot, and any MCP-compatible AI tool.

Highlights

• Operates locally via the Figma Plugin API (no REST API token required)
• Real-time execution directly on your local machine
• Read and Write live Figma data via plugin bridge — 60 tools total
• Full design automation — styles, variables, components, prototypes, content, and transactional batch pipelines
• Design strategies included — read_design_strategy, design_strategy, and more prompts built in

Styles, Variables, Components, Prototypes, and Content

https://github.com/user-attachments/assets/eae41471-fc72-4574-8261-4f42c38b8c99

Text to Design, Design to Code

https://github.com/user-attachments/assets/17bda971-0e83-4f18-8758-8ac2b8dcba62

Why this exists

Most Figma MCP servers rely on the cloud-based Figma REST API.

While the REST API is excellent for server-to-server integrations, experimenting with AI tools often involves making hundreds of rapid tool calls per session. A cloud-based approach can introduce network latency and overhead.

This project takes a different approach by running as a local Figma Plugin. By bridging directly to the Figma Plugin API on your desktop, it provides instant, real-time read/write access to your active documents without relying on external cloud APIs or requiring an API token.

Installation & Setup

Install via npx or bunx — no build step required. Watch the setup video or follow the steps below.

1. Configure your AI tool

Claude Code CLI

# via npx
claude mcp add -s project figma-mcp-go -- npx -y @tunglt1810/figma-mcp-go@latest

# or via bunx
claude mcp add -s project figma-mcp-go -- bunx @tunglt1810/figma-mcp-go@latest

Codex CLI

# via npx
codex mcp add figma-mcp-go -- npx -y @tunglt1810/figma-mcp-go@latest

# or via bunx
codex mcp add figma-mcp-go -- bunx @tunglt1810/figma-mcp-go@latest

.mcp.json (Claude and other MCP-compatible tools)

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go"]
    }
  }
}

.vscode/mcp.json (Cursor / VS Code / GitHub Copilot)

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@tunglt1810/figma-mcp-go"
      ]
    }
  }
}

Plugin panel

The panel shows the connected file, the current selection, and what the AI is doing right now. Three controls sit above the connection row:

Guard, log, and the panel's size are remembered per machine. Drag the corner to resize it. The panel follows Figma's light and dark themes.

Dev Mode

Figma's Dev Mode Code panel shows the code you attach to a node with set_codegen_result. The code lives in the Figma file, so every teammate's Dev Mode shows it — not only the machine that generated it.

The panel looks for code on the node itself, then on the component an instance came from, then on its ancestors. Attaching code to a COMPONENT or COMPONENT_SET therefore covers every instance of it.

This is deliberately not live generation. Generating on demand would mean the Code panel asking your editor for a completion mid-render, which needs MCP sampling — optional in the protocol, and not implemented by the clients this server targets. Writing the code from your editor, where the repository is in front of it, produces better code anyway.

The Code panel has a Language selector. A node often carries several blocks — the component, its styles, the query behind it — and picking a language shows only those. A language with nothing stored for the node falls back to showing everything, so the setting never reads as "this node has no code".

2. Install the Figma plugin

1. In Figma Desktop: Plugins → Development → Import plugin from manifest
2. Select manifest.json from the plugin.zip
3. Run the plugin inside any Figma file

3. Running more than one AI tool at once (optional)

Every MCP client starts its own copy of the server, but only one process can hold the plugin connection on a given port. There are two ways to share, and they do different things.

Same Figma file, no configuration. Leave the default config everywhere. The first process to bind port 1994 owns the WebSocket to the plugin; the others detect the port is taken and proxy their tool calls to it over HTTP. Every client drives the one file the plugin is open in. If the process holding the port exits, another takes over within a few seconds.

Different Figma files, one port each. Give each client its own port and point a separate plugin instance at it:

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go", "--port", "1995"]
    }
  }
}

Then open the plugin in the second Figma file and set the port to match under the settings gear. Each client now talks to its own file, with no proxying.

Note that the plugin stores host and port in figma.clientStorage, which is shared across files — changing the port makes it the default the next time you open the plugin anywhere, so expect to set it on whichever instance should use 1994.

--ip moves the listener off 127.0.0.1 (use 0.0.0.0 to accept connections from another machine).

The plugin connection is not authenticated. On the default 127.0.0.1 bind that costs nothing: only this machine can reach it. Move it off loopback and anyone who can reach the port can read and edit whatever file the plugin is open in. The server warns at startup when you do, and the plugin panel turns its confirm guard on and says so, which gates the destructive tools rather than the connection. Prefer an SSH tunnel to opening the port.

Upgrading

Re-download the plugin when you update the server. The server updates itself through npx, but the Figma plugin is installed by hand, so the two can drift apart. A plugin older than the server will reject commands it does not know with Unknown request type.

Behaviour changes in 0.3.0

No tool changed its name or its arguments. Five things behave differently:

• Log format. Server logs are now structured (time=… level=INFO msg=… component=bridge …) rather than prefixed ([bridge] …). Anything grepping for [bridge] needs updating. Logs still go to stderr; stdout still carries only the MCP protocol.
• Log level. Set FIGMA_MCP_LOG to debug, info, warn or error. The default is info, and tool parameters — your text, colours and names — now appear only at debug.
• Starting up. A call made before the server has settled on a leader now says so, instead of failing with connection refused. A call made while the plugin is reconnecting after a leader handover waits for it rather than reporting the plugin as absent.
• Large requests. Sending a large payload — an image, a long pipeline — no longer risks the plugin being disconnected mid-transfer, and no longer blocks other calls that have a shorter deadline of their own.
• /ping returns role, connected, pending and uptimeSeconds alongside status and version.

Tool consolidation

Eighteen tools were removed by folding each into one that already covered it. No capability was lost — everything possible before is still one call: