figma-console-mcp
installs/mo · npmstarsforks
How to install figma-console-mcp?
southleft/figma-console-mcp
$git clone https://github.com/southleft/figma-console-mcp> 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.
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 & |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
- kicad-mcp-proAI-ready MCP server for KiCad: automate schematic, PCB, ERC/DRC, DFM, BOM and manufacturing review from Claude, Cursor, Copilot and other AI agents.MCP ServersJul 2026
