Find your next open-source project

Search by name, purpose, or keyword — or paste a GitHub repository URL

southleft/figma-console-mcp

Developer Tools

An MCP server that lets AI assistants read, create, and debug Figma designs and design systems.

3,180
289
TypeScript
MIT
1 year old

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.

  1. 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.

  1. In Figma Desktop, go to Plugins → Development → Import plugin from manifest... and select ~/.figma-console-mcp/plugin/manifest.json. Run npx figma-console-mcp --print-path if you need the exact path; on macOS the dot-folder is hidden, so press ⌘⇧G in the dialog.

  2. Restart the MCP client, then send Check Figma status and Create a simple frame with a blue background to confirm read and write access test prompts.

Other connection modes

  • Cloud Mode needs no Node.js: add the https://figma-console-mcp.southleft.com/mcp connector 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@latest against the SSE endpoint. Claude Code's native SSE transport has a known bug, so the README recommends mcp-remote note.
  • Local Git builds from source with npm install && npm run build:local for 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.

Hacker News

Figma Console MCP
▲ 1 · 0 comments · July 21, 2026