figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.

🔗 View on GitHub: southleft/figma-console-mcp

🚀 Quick Installation

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

Claude Code (CLI)

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

Cursor / Windsurf / Claude Desktop

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

What It Does

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

• 🐛 Plugin debugging — Capture console logs, errors, and stack traces
• 📸 Visual debugging — Take screenshots for context
• 🎨 Design system extraction — Pull variables, components, and styles
• ✏️ Design creation — Create UI components, frames, and layouts directly in Figma
• 🔧 Variable management — Create, update, rename, and delete design tokens
• ⚡ Real-time monitoring — Watch logs as plugins execute
• ☁️ Cloud Write Relay — Web AI clients (Claude.ai, v0, Replit) can design in Figma via cloud pairing

Four Connection Modes

Key Features

Design System Extraction

• Extract design tokens/variables (works on Free, Pro, Org plans)
• Get component data with visual references
• Export color, text, and effect styles
• Full file structure access

Design Creation

• Create frames, shapes, text, components via natural language
• Apply auto-layout, styles, effects
• Build complete UI mockups programmatically
• Arrange variants into professional component sets

Variable Management

• Create COLOR, FLOAT, STRING, BOOLEAN variables
• Update values in specific modes (Light/Dark/Brand)
• Batch create/update up to 100 variables at once
• Add/rename modes for multi-theme support

MCP Apps (Interactive UI)

• Token Browser — Browse design tokens with filtering and search
• Design System Dashboard — Lighthouse-style health scorecard

Example Use Cases

"Create a login card with email and password fields, a 'Forgot password?' link, and a primary Sign In button. Use 32px padding, 16px border radius, and subtle shadow."

"Set up a color token collection with Light and Dark modes"

"Get all design variables from [Figma file URL]"

"Compare the Button component in Figma against our React implementation"

"Take a screenshot of the current Figma canvas"

Requirements

• Figma Personal Access Token (starts with figd_)
• Figma Desktop (for full features)
• Node.js 18+ (for NPX/Local modes)
• MCP-compatible AI client (Claude, Cursor, etc.)

📚 Documentation Site | 🐛 Report Issues