Skip to main content
New in v1.11.2 — Connect your Figma design system to AI code generators like Lovable, v0, and Replit via the remote MCP endpoint. The figma_get_design_system_kit tool extracts your tokens, component specs, and resolved styles in a single call — so generated code builds with your brand, not generic defaults.

​
Your Design System as an API

Design systems shouldn’t be static documents locked in a visual tool. They should be queryable, programmable, and always in sync with your codebase. Figma Console MCP bridges the gap between design and development—giving AI assistants complete access to your Figma files for extraction, creation, and debugging.

Extract

Variables, styles, and components as structured data

Create

Components and designs via natural language

Debug

Real-time console logs from your plugins

​
The Problem

Every time a developer opens Figma, eyeballs the padding, and writes margin: 16px instead of var(--spacing-md)—that’s design system debt. Every design token manually transcribed to CSS, every component spec described in a Slack message, every “just check Figma” that leads to approximation—it compounds. What if your design system was queryable? 
"Get the Button component specs and implement it in React with our design tokens."
Real component data. Real token values. Real code that uses your actual design system.

​
Two Workflows

​
Make Your Work Programmable

Your design system is a product. Developers are your users. Give them an API.
1

Define in Figma

Create tokens and components as you normally would
2

AI Extracts

Design tokens export to CSS, Tailwind, or Sass automatically
3

Stay in Sync

Single source of truth that developers can query directly
Result: Developers stop guessing at values. Design debt decreases. Documentation stays accurate.

​
Capabilities

Extract variables, styles, and components as structured data. Export to CSS custom properties, Tailwind config, Sass variables, or JSON.
  • figma_get_design_system_kit — Full design system in one call — tokens, components, styles, visual specs, and resolved values
  • figma_get_variables — Design tokens with multi-format export
  • figma_get_styles — Color, text, and effect styles
  • figma_get_component — Component metadata or reconstruction spec
  • figma_get_design_system_summary — Overview of entire system
Real-time console log capture from your Figma plugins. No more console.log archaeology.
  • figma_get_console_logs — Retrieve logs with filtering
  • figma_watch_console — Real-time log streaming
  • figma_take_screenshot — Capture UI state for debugging
Execute Figma Plugin API code directly. Build, modify, and organize components programmatically.
  • figma_execute — Run any Plugin API code
  • figma_arrange_component_set — Organize variants with labels
  • figma_create_variable — Add design tokens
  • Plus 20+ node manipulation tools
AI sees your components visually and as structured data. Implementation guidance that matches the design.
  • figma_get_component_for_development — Visual reference + specs
  • figma_capture_screenshot — Node-specific renders
  • figma_get_component_image — Export as PNG/SVG

​
Choose Your Setup

Important: Remote Mode is read-only with 22 tools. For design creation, development workflows, variable management, and full capabilities (57+ tools), use NPX Setup.

NPX Setup (Recommended)

Full capabilities — 57+ toolsCreate, modify, and develop with AI. Manage variables, instantiate components, and bridge design to code. Requires Node.js and a Figma token.

Remote SSE (Read-Only)

Quick exploration — 22 toolsZero setup, just paste a URL. Read design data, take screenshots. Cannot create or modify designs. Best for evaluating the tool.
1

Get Figma Token

Visit figma.com/developers/api#access-tokens and create a Personal Access Token
2

Configure Your MCP Client

Add the server to your MCP client config (Claude Code, Cursor, Windsurf, Claude Desktop, etc.):
{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}
3

Connect to Figma Desktop

Install the Desktop Bridge Plugin — one-time import, no debug flags needed. Run it in your Figma file to connect.
4

Restart Your MCP Client

Restart your MCP client to load the new config

Full Setup Guide

Detailed instructions for NPX, Local Git, and Remote SSE installation across all AI clients.

​
Resources

Introduction

New to MCP? Start here.

Use Cases

Real scenarios and workflows

All Tools

Complete reference for 57+ tools

Troubleshooting

Common issues and solutions
Open Source — MIT licensed. Self-host for enterprise requirements or contribute on GitHub.
Support this project — Figma Console MCP is free and open source. If it’s improved your workflow, consider sponsoring its development.