Figma MCP Console

Let your AI assistant design in Figma — no API token, no rate limits.
Works with Claude CLI · Claude Desktop · Codex · VS Code · Cursor · Antigravity · any MCP client.

✨ What can it do?

• 🖥️ Figma → Code — paste a link to a Figma frame, and the AI implements that exact screen in your codebase, exporting the design's icons and images into your project instead of inventing its own
• 🎨 Requirement → Figma — paste a requirement, and the AI draws the screen in Figma, then screenshots its own work and fixes what's off
• 🔁 Token sync — pull design tokens into your theme config, or build a design system in Figma from your code
• ✏️ Bulk editing — rename layers, replace text across a page, reorganize frames

⚡ Quick start

Prerequisites

• Node.js 18+ — check with node --version
• Figma Desktop app (the web app can't run development plugins)

Step 1 — Add the server to your AI tool

No install needed — npx downloads and runs everything automatically.

For one project — run inside that project (registers it there only):

claude mcp add figma-console -- npx -y figma-mcp-console@latest

For all your projects at once — add it globally instead:

claude mcp add --scope user figma-console -- npx -y figma-mcp-console@latest

Both work the same at runtime: each Claude session starts its own server instance in that project's directory (so exported assets land in the right project), and all instances share one local bridge to Figma automatically.

Or add to the project's .mcp.json:

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-mcp-console@latest"]
    }
  }
}

Settings → Developer → Edit Config (claude_desktop_config.json):

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-mcp-console@latest"]
    }
  }
}

Restart Claude Desktop. On Windows use "command": "cmd", "args": ["/c", "npx", "-y", "figma-mcp-console@latest"].

codex mcp add figma-console -- npx -y figma-mcp-console@latest

Or in ~/.codex/config.toml:

[mcp_servers.figma-console]
command = "npx"
args = ["-y", "figma-mcp-console@latest"]

Create .vscode/mcp.json (or Command Palette → "MCP: Add Server"):

{
  "servers": {
    "figma-console": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-mcp-console@latest"],
      "cwd": "${workspaceFolder}"
    }
  }
}

Use it from Copilot Chat in Agent mode.

Create .cursor/mcp.json (or Settings → MCP → Add new MCP server):

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-mcp-console@latest"]
    }
  }
}

Agent panel → MCP Servers → Manage MCP servers → View raw config (mcp_config.json):

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-mcp-console@latest"]
    }
  }
}

Click Refresh after saving.

Standard MCP stdio transport — any client works. Set the command to npx with args ["-y", "figma-mcp-console@latest"].

Step 2 — Install the Figma plugin

First, get the plugin folder onto your machine — pick either option:

📦 Option A — Download from GitHub (recommended)

1. Download plugin.zip → unzip it

⌨️ Option B — Get it via command (if the download doesn't work)

1. Run npx figma-mcp-console install-plugin
2. It saves the plugin to a folder and opens it automatically so you can see manifest.json

Then, in both cases:

1. In Figma Desktop: Plugins → Development → Import plugin from manifest… → select manifest.json (one-time step)
2. Run it: Plugins → Development → Figma MCP Console — and keep the plugin window open while you work. 🟢 Green dot = connected
3. Working with several Figma files at once? Run the plugin in each file — every window connects to the same local bridge, and the AI picks the right file per call

Step 3 — Try it

Figma → code — right-click a frame → Copy link to selection, then:

Implement this Figma page in our project: <paste link>. Match layout, spacing,
type and colors; export its icons/images into the project; screenshot the frame
and compare when done.

Requirement → Figma:

Design a SaaS landing page in Figma (desktop, 1440px): hero + CTA, three feature
cards, pricing with three plans, footer. Light theme, use auto-layout, then
screenshot and fix anything off.

🎯 Asking the AI to screenshot and compare at the end makes it check its own work instead of guessing.

🗂 Multiple files, multiple projects

All AI sessions and all Figma files share one local bridge on port 2000 — the first MCP server to start owns it, later ones join it automatically, and if the owner exits another session takes over within a second. Nothing to configure.

• Several Figma files: run the plugin in each file (its window shows Connected · <file name>). With more than one file connected, every tool accepts a file parameter (file name, case-insensitive), and list_files shows what's connected — so you can say things like "copy the primary color from Design System into the CTA button in Landing Page" in a single session. With one file connected, nothing changes.
• Several code projects: each AI session (one per project) reaches every connected file through the shared bridge. State which file you mean in the prompt and each session works with the right one.

🧠 Teach your AI what to export, and where

Exports follow the file extension the AI picks (.svg for vector, .png/.jpg for bitmap, with an optional 0.5–4x scale). It decides based on what you ask — so put your preferences in the project rules file once, and stop repeating yourself:

📋 Copy-paste rules (adjust paths — this fits Next.js):

## Figma asset rules
- Icons: SVG into public/icons/. Images: PNG into public/images/.
- File names: kebab-case English (arrow-left.svg, hero-banner.png).
- Read design tokens with get_variable_defs; map them to our theme config.
- After building a screen, screenshot and fix issues before finishing.

🔧 Troubleshooting

📄 License

MIT — © Hoang Le Thien An

This is an independent community project, not affiliated with or endorsed by Figma, Inc. "Figma" is a trademark of Figma, Inc.