southleft/figma-console-mcp
Developer ToolsAn MCP server that lets AI assistants read, create, and debug Figma designs and design systems.
What it does
Figma Console MCP is a Model Context Protocol server that gives AI assistants such as Claude, Cursor, and Windsurf access to a Figma file. In Local Mode it runs through a Desktop Bridge plugin over WebSocket and exposes around 130 tools: design system extraction (variables, components, styles), design creation via the Figma Plugin API, console and visual debugging, screenshots, accessibility linting, design-code parity checks, FigJam boards, and slides Documentation.
It is aimed at designers and developers who want to drive Figma work from natural-language prompts, or pull design tokens and component specs into a codebase.
Quick start
The recommended Local Mode requires Node.js 18+, Figma Desktop (not just the web app), an MCP client, and a Figma personal access token starting with figd_. Create the token with File content, File versions, Library content, Library assets, Comments, and Current user scopes; Variables requires an Enterprise plan Setup guide.
- Register the server in Claude Code:
claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
For Cursor, Windsurf, or Claude Desktop, add the equivalent mcpServers JSON entry to that client's config file.
-
In Figma Desktop, go to Plugins → Development → Import plugin from manifest... and select
~/.figma-console-mcp/plugin/manifest.json. Runnpx figma-console-mcp --print-pathif you need the exact path; on macOS the dot-folder is hidden, so press ⌘⇧G in the dialog. -
Restart the MCP client, then send
Check Figma statusandCreate a simple frame with a blue backgroundto confirm read and write access test prompts.
Other connection modes
- Cloud Mode needs no Node.js: add the
https://figma-console-mcp.southleft.com/mcpconnector to a web AI client, then pair the Desktop Bridge plugin with a 6-character code. It offers 105 tools but no real-time monitoring or codebase extraction. - Remote SSE is read-only: use
npx -y mcp-remote@latestagainst the SSE endpoint. Claude Code's native SSE transport has a known bug, so the README recommendsmcp-remotenote. - Local Git builds from source with
npm install && npm run build:localfor contributors who need the full 130-tool set plus source access.
Constraints
Figma Desktop is required for write operations through the bridge; Remote SSE cannot create or modify designs. Variables through the Plugin API work on Free, Pro, and Organization plans in Cloud Mode, but Local Mode variable tooling notes Enterprise requirements in the token scopes. The figma_ds_* codebase-to-design-system tools read and write the local filesystem and are registered only in Local Mode. Multi-instance support uses ports 9223–9232 automatically since v1.10.0. The project is MIT-licensed, and the README positions it as complementary to Figma's official MCP server rather than a replacement.
HotRepo's take
On 2026-11-05 the project gained 242 stars in the TypeScript daily list and reached 7th place. That is a single snapshot, not a trend, but it shows the repo drew attention on the day the MCP-to-Figma workflow was being circulated. The README's depth — a 130-tool inventory, a comparison across four install modes, and a note on version 1.46.0 — suggests an actively maintained tool rather than a thin connector. Readers evaluating it should weigh the setup cost (Node.js, desktop plugin, token scopes) against the amount of Figma work they want to hand to an AI assistant.
Written by AI from the project's README, updated . The project's own docs are the source of truth.