Figma Mcp Console

npm MCP License: MIT

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.

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

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

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

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

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

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

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

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

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "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:

2. In Figma Desktop: Plugins → Development → Import plugin from manifest… → select manifest.json (one-time step)
3. Run it: Plugins → Development → Figma MCP Console — and keep the plugin window open while you work. 🟢 Green dot = connected
4. 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.