</>MCP Agents Market
MCP Server

figma-console-mcp

by southleft2.2kTypeScriptUpdated 2026-09-03

Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.

Claude CodeClaude DesktopCursorWindsurf

figma-console-mcp is an MCP server that bridges AI assistants like Claude to Figma, providing complete programmatic access for design system extraction, component creation, debugging, and bidirectional token synchronization. It offers 114 tools in local mode (101 in cloud mode, 9 read-only via remote SSE) covering design creation, variable management, FigJam boards, Slides presentations, accessibility auditing, and version history tracking. Developers and designers can use natural language with AI assistants to extract design tokens to DTCG/CSS/Tailwind formats, create UI components directly in Figma, analyze codebases to generate design systems, and maintain design-code parity across their workflow.

Key Features

Design system extraction from production codebases with automatic token mining (CSS custom properties, SCSS, Tailwind, shadcn), component inventory, and variant inference
Bidirectional token sync between Figma and code via 10 export formats (DTCG, CSS, Tailwind v3/v4, SCSS, TypeScript, Style Dictionary) with diff-aware merging
AI-assisted design creation through 114 tools for creating frames, components, variants, FigJam boards, and Slides presentations using natural language
Desktop Bridge plugin with WebSocket transport for real-time monitoring, console logs, selection tracking, and variable management on any Figma plan
Cloud Write Relay enabling web AI clients (Claude.ai, v0, Replit) to create Figma designs without Node.js via 6-character pairing codes
Version history analysis with snapshot diffing, markdown changelog generation, and binary-search property/variant introduction tracking
Accessibility auditing with 14 WCAG checks, component scorecards, axe-core scanning, and Lighthouse-style design system health dashboards
Shared library inspection resolving component keys to full properties/variants and importing library variables on any plan via Plugin API

Use Cases

  • 01Extract design tokens from an existing production codebase, convert them to DTCG format, and import directly into Figma variables for a code-to-design workflow
  • 02Generate complete UI components in Figma through conversational AI by describing layouts, then iterate with natural language refinement and automatic visual validation
  • 03Maintain design-code parity by comparing Figma component specs against React/Vue implementations and generating component documentation that merges design and code metadata
  • 04Debug Figma plugins in real-time by monitoring console logs, errors, and selection changes through the Desktop Bridge without switching contexts
  • 05Build FigJam retrospective boards, user flows, or brainstorming sessions programmatically with stickies, connectors, shapes, and tables via AI commands
  • 06Audit design system health with scored reports across naming conventions, token architecture, accessibility compliance, and component metadata completeness

Related MCP Servers

View more

markitdown

Python tool for converting files and office documents to Markdown.

MCP Server187.9k

firecrawl

The context API to search, scrape, and interact with the web at scale. 🔥

MCP Server187.6k

prompts.chat

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

MCP Server171.8k

langflow

Langflow is a powerful tool for building and deploying AI-powered agents and workflows.

MCP Server155.4k

figma-console-mcp — FAQ

What is figma-console-mcp?+

figma-console-mcp is an MCP server that connects AI assistants like Claude to Figma, enabling design system extraction, component creation, debugging, token sync, and accessibility auditing through 114 tools. It works in local mode (NPX/Git), cloud mode (web clients without Node.js), or read-only remote SSE.

How do I install figma-console-mcp?+

For full capabilities, run 'claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest' (Claude Code), or add the npx command to your MCP client's config JSON (Claude Desktop, Cursor, Windsurf). Then import the Desktop Bridge plugin manifest from ~/.figma-console-mcp/plugin/manifest.json and run it in Figma Desktop.

Which AI clients work with figma-console-mcp?+

Local mode (114 tools) works with Claude Code, Claude Desktop, Cursor, and Windsurf. Cloud mode (101 tools) works with web AI clients like Claude.ai, v0, Replit, and Lovable via the cloud relay. Remote SSE (9 read-only tools) works with any MCP-compatible client.

Do I need a Figma Enterprise plan?+

No. The Desktop Bridge plugin uses the Figma Plugin API, so variable management, component creation, and most features work on Free, Pro, and Organization plans. Only remote mode without the plugin requires Enterprise for variables.

What API keys or tokens do I need?+

For local/cloud mode, you need a Figma Personal Access Token (starts with figd_) with File content (Read), File versions (Read), Variables (Read), and Comments (Read/Write) scopes. Remote SSE uses OAuth with automatic browser authorization on first use.

Is figma-console-mcp free?+

Yes, figma-console-mcp is open source under the MIT license and free to use. It requires a Figma account (Free, Pro, or Enterprise) and works with free AI clients like Claude or paid ones like Claude Pro/Code.

How do I install figma-console-mcp?+

Open the source repository on GitHub and follow its README. figma-console-mcp is a mcp server — MCP Agents Market links you directly to the official repo.

Is figma-console-mcp free?+

figma-console-mcp is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.

Related searches

Design MCP ServersDeveloper Tools MCP ServersProductivity & Workflow MCP ServersBest SkillsBest PluginsBest AgentsTop rated listingsClaude Code toolsBrowse all categories