Figma UI MCP

figma-ui-mcp

Claude Code to Figma · Antigravity to Figma · Cursor to Figma · Any MCP IDE to Figma

✅ Tested: Claude Code, Antigravity | 🔧 Compatible: Cursor, VS Code, Windsurf, Zed (any MCP stdio client)

Bidirectional Figma MCP bridge — let AI assistants (Claude Code, Cursor, Windsurf, Antigravity, VS Code Copilot, or any MCP-compatible IDE) draw UI directly on Figma canvas and read existing designs back as structured data, screenshots, or code-ready tokens. No Figma API key needed — works entirely over localhost.

Requires Figma Desktop — the plugin communicates with the MCP server over localhost HTTP polling. Figma's web app does not allow localhost network access, so Figma Desktop is required.

Claude ──figma_write──▶ MCP Server ──HTTP (localhost:38451)──▶ Figma Plugin ──▶ Figma Document

Claude ◀─figma_read──── MCP Server ◀──HTTP (localhost:38451)── Figma Plugin ◀── Figma Document

How the localhost bridge works

The MCP server starts a small HTTP server bound to localhost:38451. The Figma plugin (running inside Figma Desktop) uses long polling — the server holds requests up to 8s until work arrives, flushing immediately when new ops are queued (near-realtime latency <100ms). All traffic stays on your machine — nothing is sent to any external server.

Multi-instance support (v2.3.0+): Multiple Figma files/tabs can connect simultaneously. Each plugin instance sends a sessionId, and the bridge routes operations to the correct session. Use the optional sessionId param in figma_write/figma_read to target a specific file.

---

Features

What's new in v2.5

Full version history: see CHANGELOG.md.

---

Quick Start

Step 1 — Add the MCP server to your AI client

Choose your platform:

Claude Code (CLI)

# Project scope (default)

claude mcp add figma-ui-mcp -- npx figma-ui-mcp

Global scope (all projects)

claude mcp add --scope user figma-ui-mcp -- npx figma-ui-mcp

</details>

Claude Desktop

Edit config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{

"mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-ui-mcp"] } } }

</details>

Cursor

Edit .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

{

"mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-ui-mcp"] } } }

</details>

VS Code / GitHub Copilot

Edit .vscode/mcp.json (project) or add to settings.json (global):

{

"mcp": { "servers": { "figma": { "command": "npx", "args": ["-y", "figma-ui-mcp"] } } } }

</details>

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

{

"mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-ui-mcp"] } } }

</details>

Antigravity (Google)

1. Open "..." dropdown at the top of the agent panel
2. Click "Manage MCP Servers" → "View raw config"
3. Add to mcp_config.json:

{

"mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-ui-mcp"] } } }

</details>

From source (any client)

git clone https://github.com/TranHoaiHung/figma-ui-mcp

cd figma-ui-mcp npm install

Then point your MCP client to: node /path/to/figma-ui-mcp/server/index.js

</details>

⚠️ IMPORTANT: After adding the MCP server, you MUST restart your IDE / AI client (quit and reopen). The MCP server only loads on startup — simply saving the config file is not enough. This applies to Claude Code, Cursor, VS Code, Windsurf, and Antigravity.

Step 2 — Install the Figma plugin

[⬇ Download plugin.zip](https://github.com/TranHoaiHung/figma-ui-mcp/raw/main/plugin.zip) — no git clone needed

1. Download and unzip plugin.zip anywhere on your machine
2. Open Figma Desktop (required — web app cannot access localhost)
3. Go to Plugins → Development → Import plugin from manifest...
4. Select manifest.json from the unzipped folder
5. Run Plugins → Development → Figma UI MCP Bridge

The plugin UI shows a green dot when the MCP server is connected.

Updating to a newer version

# Step 1 — get the new version + plugin path

npx figma-ui-mcp@latest --version

figma-ui-mcp v2.5.12 — plugin: /.../.npm/_npx/.../figma-ui-mcp/plugin

Step 2 — restart Claude / your IDE so the MCP server reloads

Step 3 — re-link the Figma plugin (manual, one-time per update)

Figma Desktop → Plugins → Development → Manage plugins in development

Remove old "Figma UI MCP Bridge" → "+" → Import plugin from manifest...

Select manifest.json from the plugin path printed in Step 1

Step 4 — verify

Ask your AI: "figma_status"

pluginVersion in the response should match the npm version above

The Figma plugin does not auto-update — re-linking (Step 3) is required whenever the plugin changes.

Step 3 — Connect AI to Figma

Tell your AI assistant to connect:

"Connect to figma-ui-mcp"

The AI will call figma_status and confirm:

✅ Connected — File: "My Project", Page: "Page 1", Plugin v2.5.5

If you see "Plugin not connected", make sure the Figma plugin is running (Step 2).

Step 4 — Start designing with prompts

Once connected, just describe what you want in natural language:

"Use figma-ui-mcp to draw a login screen for mobile"

The AI will automatically:

1. Call figma_docs to load the API reference and design rules
2. Call figma_read get_page_nodes to understand the current canvas
3. Call figma_write to create the design on your Figma canvas
4. Call figma_read screenshot to verify the result

Prompt examples

| "Take a screenshot of the current frame" | Return