figma-console-mcp weekly downloads statistics

Figma Console MCP Server

Your design system as an API. A design-system-focused Model Context Protocol server for Figma. It works in both directions (Figma ⇄ code), writes to Figma, and runs deterministic checks for design-code parity, accessibility, and design-system health. It hands the AI exact tokens, variants, bindings, and states as structured data rather than prescribing a framework or house style, so generated code follows your team's own stack and conventions.

🆕 Accuracy & safety fixes (latest v1.40.9): Nine patches since v1.40.0's Design System Extraction, driven by community reports. Generated component docs now describe every variant accurately — backgrounds, hidden layers and the properties that show them, per-corner radius and border tokens, typography and layer structure across variants, and source links pinned to a commit. figma_export_tokens can no longer overwrite a token file from the wrong Figma file, overrides in extended variable collections are visible, min/max sizing survives every JSON extraction path, colors set to another color at an opacity export and import with their link intact, and the published package passes npm audit cleanly. Server-only — no plugin re-import needed. See what's new →

What is this?

Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:

• 🎨 Design system extraction - Pull variables, components, and styles
• 🧬 Codebase → design system extraction - Scan a production codebase, mine its de-facto styling into DTCG tokens with per-token provenance, scaffold a design-system package with a wired Storybook workshop, and gate it with deterministic fidelity evals — then round-trip the tokens into Figma variables (Local Mode)
• 🔁 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.
• 📸 Visual debugging - Take screenshots for context
• ✏️ Design creation - Create UI components, frames, and layouts directly in Figma — including one-call component-set creation from a variant axes matrix
• 🔧 Variable management - Create, update, rename, and delete design tokens
• 🕰 Version history & time-series awareness - List versions, diff snapshots, generate markdown changelogs, trace property/variant introduction via binary-search blame, and fold per-component design + git history into generated component docs
• ⚡ Real-time monitoring - Watch console logs from the Desktop Bridge plugin
• 📌 FigJam boards - Create stickies, flowcharts, tables, and code blocks on collaborative boards
• 🎞️ Slides presentations - Build and manage Figma Slides decks programmatically
• ♿ Accessibility scanning - 14 WCAG design checks with conformance level tagging, component scorecards, axe-core code scanning, design-to-code parity
• 🔍 Design-code parity & component docs - Deterministic comparison of a Figma component with its code (visual, spacing, typography, tokens, component API, accessibility), and generated component documentation with per-variant tokens and an optional design + git changelog
• 📋 Design-system health audits - Lighthouse-style scored audit across naming, tokens, component metadata, accessibility, consistency, and coverage — available as a plain tool for any MCP client (with per-finding auto-fix guidance) and as a visual dashboard app
• 🛡 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
• ☁️ Cloud Write Relay - Web AI clients (Claude.ai, v0, Replit) can design in Figma via cloud pairing
• 🔄 Four ways to connect - Remote SSE, Cloud Mode, NPX, or Local Git

---

⚡ Quick Start

Choose Your Setup

First, decide what you want to do:

I want to...	Setup Method	Time
Create and modify designs with AI	NPX Setup (Recommended)	~10 min
Design from the web (Claude.ai, v0, Replit, Lovable)	Cloud Mode	~5 min
Contribute to the project	Local Git Setup	~15 min
Just explore my design data (read-only)	Remote SSE	~2 min

⚠️ Important: Capability Differences

Capability	NPX / Local Git	Cloud Mode	Remote SSE
Read design data	✅	✅	✅
Create components & frames	✅	✅	❌
Edit existing designs	✅	✅	❌
Manage design tokens/variables	✅	✅	❌
FigJam boards (stickies, flowcharts)	✅	✅	❌
Real-time monitoring (console, selection)	✅	❌	❌
Codebase → design system extraction (figma_ds_*)	✅	❌	❌
Desktop Bridge plugin	✅	✅	❌
Requires Node.js	Yes	No	No
Total tools available	121	96 after pairing	Read-only subset