Claude Code skills that move designs from Figma into a codebase and code state back into Figma, plus a style-system governance skill.
582TypeScriptMITUpdated 3 months ago
southleft/figma-console-mcp
An MCP server that connects AI assistants to Figma so they can extract design tokens, create and edit designs, and run design-code parity and accessibility checks.
Open-source alternative to:Figma Dev Mode
- Stars
- 3,165
- Forks
- 287
- Open issues
- 9
- Last commit
- 9 days ago
What is it?
Figma Console MCP is a Model Context Protocol server that exposes Figma files to AI clients such as Claude, Cursor and Codex. It reads variables, components, styles and file structure, and it can also write back to Figma: creating frames and components, managing variables and modes, and editing text, fills and layouts through a Desktop Bridge plugin that runs in Figma Desktop.
Beyond basic read and write, the project covers design-system work. It can sync Figma variables with DTCG JSON and several token formats in both directions, check a Figma component against its code implementation, run WCAG-style accessibility lints, and generate component documentation. Tools return structured data such as tokens, variants and bindings so that the generated code follows the team's own stack.
Full write access requires the NPX or Local Git setup, which runs on Node.js and offers 130 tools. Cloud Mode lets web AI clients such as Claude.ai pair with a running plugin without Node.js, with 105 tools. The Remote SSE endpoint is read-only.
Key features
- 01Reads Figma variables, components, styles and file structure for AI use
- 02Creates and edits frames, components, text, fills and auto layout in Figma
- 03Syncs design tokens bidirectionally with DTCG JSON, CSS, Tailwind and other formats
- 04Compares Figma components with code implementations and reports differences
- 05Runs WCAG-based accessibility checks and component accessibility scorecards
- 06Works with Claude Code, Cursor, Windsurf, Claude Desktop, Codex and Gemini CLI
Use cases
- Letting an AI assistant generate UI mockups or components directly inside a Figma file
- Keeping Figma variables and code design tokens in sync across a team
- Checking whether a coded component matches its Figma design before sign-off
- Auditing a design system for naming, token and accessibility issues
Quick start
- 1
Get a Figma personal access token from Figma Help
- 2
Add the server to your MCP client with npx (Claude Code example)
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 - 3
Import the Desktop Bridge plugin manifest in Figma Desktop and run it
- 4
Restart your MCP client to load the configuration
Things to know
- Full functionality requires Figma Desktop and a Desktop Bridge plugin connection.
- Remote SSE mode is read-only and cannot create or modify designs.
- Some features, such as variables, require a Figma Enterprise plan.
In collections
Topics
FAQ
- What is figma-console-mcp?
- An MCP server that connects AI assistants to Figma so they can extract design tokens, create and edit designs, and run design-code parity and accessibility checks. Figma Console MCP is a Model Context Protocol server that exposes Figma files to AI clients such as Claude, Cursor and Codex. It reads variables, components, styles and file structure, and it can also write back to Figma: creating frames and components, managing variables and modes, and editing text, fills and layouts through a Desktop Bridge plugin that runs in Figma Desktop.
- Is figma-console-mcp free to use? What license does it have?
- figma-console-mcp is open source under the MIT license. Check the license terms before using it in commercial products.
- Is figma-console-mcp still maintained?
- Actively maintained. The last commit to figma-console-mcp was on Oct 29, 2026.
- What can I use figma-console-mcp for?
- Letting an AI assistant generate UI mockups or components directly inside a Figma file Keeping Figma variables and code design tokens in sync across a team Checking whether a coded component matches its Figma design before sign-off Auditing a design system for naming, token and accessibility issues
- How do I install figma-console-mcp?
- Get a Figma personal access token from Figma Help Add the server to your MCP client with npx (Claude Code example): 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 Import the Desktop Bridge plugin manifest in Figma Desktop and run it Restart your MCP client to load the configuration
- Where can I get figma-console-mcp?
- The source code and installation instructions are on GitHub: https://github.com/southleft/figma-console-mcp
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
An MCP server and shadcn/ui registry that gives coding agents design systems, UI/UX guidance, icons and accessibility review rules.
556+11 this week34TypeScriptMITUpdated 13 days ago
A CLI that lets an AI assistant build and edit real, editable designs in your local Figma Desktop app, with no API key.
1.1K+11 this week132JavaScriptMITWell maintainedUpdated 17 days ago
CLI that points a headless browser at any website and extracts its design system as DTCG tokens, Tailwind config, Figma variables and more.
4.8K+388 this week405HTMLMITWell maintainedUpdated 2 days ago
A React UI component library and design system with 80+ components, Figma design-to-code support and 3000+ design tokens.
10.5K+21 this week853TypeScriptOtherUpdated 2 days ago
A curated collection of DESIGN.md files extracted from brand websites, so AI coding agents can generate UI matching those design systems.
125.9K+1.2K this week13.9KMITUpdated 10 days ago