figma-console-mcp
bysouthleft· 1 MCP server
> Your design system as an API. Model Context Protocol server that bridges design and development—giving AI assistants complete access to Figma for extraction, creation, debugging, and bidirectional token sync.
How to install figma-console-mcp?
southleft/figma-console-mcp
$git clone https://github.com/southleft/figma-console-mcpInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install figma-console-mcp by running `git clone https://github.com/southleft/figma-console-mcp`, then use it for the current task and follow its documentation at https://github.com/southleft/figma-console-mcp.
README.md
| 1 | # Figma Console MCP Server |
| 2 | |
| 3 | [](https://modelcontextprotocol.io/) |
| 4 | [](https://www.npmjs.com/package/figma-console-mcp) |
| 5 | [](https://opensource.org/licenses/MIT) |
| 6 | [](https://docs.figma-console-mcp.southleft.com) |
| 7 | [](https://github.com/sponsors/southleft) |
| 8 | |
| 9 | > **Your design system as an API.** Model Context Protocol server that bridges design and development—giving AI assistants complete access to Figma for **extraction**, **creation**, **debugging**, and **bidirectional token sync**. |
| 10 | |
| 11 | > **🆕 Target Lock for Parallel Work (v1.36.0):** `figma_navigate` now takes a `lock: true` flag that pins the active file — so an AI agent can keep working in one Figma file while you work in another, without commands silently routing to the wrong file. New connections, reconnects, and your own selection/page changes in other files no longer move the target; the pin auto-releases if that file disconnects. `figma_list_open_files` reports a `targetLocked` flag for a pre-write guard. Server-only release — **no plugin re-import needed**. [See what's new →](CHANGELOG.md#1360---2026-07-16) |
| 12 | |
| 13 | ## What is this? |
| 14 | |
| 15 | Figma Console MCP connects AI assistants (like Claude) to Figma, enabling: |
| 16 | |
| 17 | - **🎨 Design system extraction** - Pull variables, components, and styles |
| 18 | - **🔁 Bidirectional token sync** - Export Figma variables to DTCG JSON (legacy or 2025.10 dialect) + 9 more formats; push code-side edits back to Figma with full apply — creates, renames, alias re-targeting, and replace-gated deletes. Replaces Style Dictionary and Tokens Studio's export pipeline. |
| 19 | - **📸 Visual debugging** - Take screenshots for context |
| 20 | - **✏️ Design creation** - Create UI components, frames, and layouts directly in Figma — including one-call component-set creation from a variant axes matrix |
| 21 | - **🔧 Variable management** - Create, update, rename, and delete design tokens |
| 22 | - **🕰 Version history & time-series awareness** - List versions, diff snapshots, generate markdown changelogs, trace property/variant introduction via binary-search blame |
| 23 | - **⚡ Real-time monitoring** - Watch console logs from the Desktop Bridge plugin |
| 24 | - **📌 FigJam boards** - Create stickies, flowcharts, tables, and code blocks on collaborative boards |
| 25 | - **🎞️ Slides presentations** - Build and manage Figma Slides decks programmatically |
| 26 | - **♿ Accessibility scanning** - 14 WCAG design checks with conformance level tagging, component scorecards, axe-core code scanning, design-to-code parity |
| 27 | - **🛡 Cross-MCP identity** - Every tool response carries `_mcp: "figma-console-mcp"` and errors are prefixed `[figma-console-mcp]` so attribution stays unambiguous in agents running multiple Figma MCPs |
| 28 | - **☁️ Cloud Write Relay** - Web AI clients (Claude.ai, v0, Replit) can design in Figma via cloud pairing |
| 29 | - **🔄 Four ways to connect** - Remote SSE, Cloud Mode, NPX, or Local Git |
| 30 | |
| 31 | --- |
| 32 | |
| 33 | ## ⚡ Quick Start |
| 34 | |
| 35 | ### Choose Your Setup |
| 36 | |
| 37 | **First, decide what you want to do:** |
| 38 | |
| 39 | | I want to... | Setup Method | Time | |
| 40 | |--------------|--------------|------| |
| 41 | | **Create and modify designs with AI** | [NPX Setup](#-npx-setup-recommended) (Recommended) | ~10 min | |
| 42 | | **Design from the web** (Claude.ai, v0, Replit, Lovable) | [Cloud Mode](#-cloud-mode-web-ai-clients) | ~5 min | |
| 43 | | **Contribute to the project** | [Local Git Setup](#for-contributors-local-git-mode) | ~15 min | |
| 44 | | **Just explore my design data** (read-only) | [Remote SSE](#-remote-sse-read-only-exploration) | ~2 min | |
| 45 | |
| 46 | ### ⚠️ Important: Capability Differences |
| 47 | |
| 48 | | Capability | NPX / Local Git | Cloud Mode | Remote SSE | |
| 49 | |------------|-----------------|------------|------------| |
| 50 | | Read design data | ✅ | ✅ | ✅ | |
| 51 | | **Create components & |
Related
6 picksType
- figma-context-mcpGive your coding agent access to your Figma data. Implement designs in any framework in one-shot.Jul 2026
- sunnysidefigma-context-mcpModel Context Protocol server for Figma integrationApr 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverJul 2026
- dembrandtExtract design tokens and publicly visible CSS information from any websiteJul 2026
- touchdesigner-mcpMCP server for TouchDesigner - Control and operate TouchDesigner projects through AI agentsJul 2026
- cursor-talk-to-figma-mcpCursor Talk to Figma MCPJul 2026
