figma-console-mcp README

The project's README from github.com/southleft/figma-console-mcp. As one markdown file: README.md.

Figma Console MCP Server

MCP npm License: MIT Documentation Sponsor

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.

🆕 Shaders, grid and auto layout, OKLCH and P3 color, text wrap and variable fonts (latest v1.46.0): apply shaders and set their properties by name (figma_apply_shader, figma_list_shaders), set auto layout or grid layout in one call with CSS-style grid tracks (figma_set_layout), use OKLCH, Display P3 and other CSS colors on fills and strokes, and set text wrap (balance, pretty) and variable-font axes with figma_set_text (v1.46.0). v1.45 added Motion: animate layers with presets, custom animation styles or keyframes bound to Timing and Easing tokens, export video, and find code layers. See what's new →

What is this?

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

⚡ 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 130 105 after pairing Read-only subset

Bottom line: Remote SSE is read-only until you pair the plugin. Cloud Mode unlocks write access (105 tools) from web AI clients without Node.js. NPX/Local Git gives the full 130 tools with real-time monitoring.

Best for: Designers who want full AI-assisted design capabilities.

What you get: All 130 tools including design creation, variable management, and component instantiation.

Prerequisites

Step 1: Get Your Figma Token

  1. Go to Manage personal access tokens in Figma Help
  2. Follow the steps to create a new personal access token
  3. Enter description: Figma Console MCP
  4. Set scopes (all Read unless noted): File content, File versions, Library content, Library assets, Comments (Read and write), Current user, and Variables (Enterprise only, optional). See why each is needed
  5. Copy the token — you won't see it again! (starts with figd_)

Step 2: Configure Your MCP Client

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

OpenAI Codex (CLI):

codex mcp add figma-console --env FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE --env ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

Then set startup_timeout_sec = 60 and tool_timeout_sec = 300 for it in ~/.codex/config.toml (Codex's 10 s / 60 s defaults are too short). The Codex app and IDE extension share this config. Full Codex setup →

Gemini CLI:

gemini mcp add -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true figma-console npx -y figma-console-mcp@latest

Google Antigravity (IDE, CLI, app): add the JSON below to ~/.gemini/config/mcp_config.json, plus "timeoutSeconds": 300 in the server entry. Full Antigravity setup →

Cursor / Windsurf / Claude Desktop:

Add to your MCP config file (see Where to find your config file below):

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

📂 Where to Find Your Config File

If you're not sure where to put the JSON configuration above, here's where each app stores its MCP config:

App macOS Windows
Claude Desktop ~/Library/Application Support/Claude/claude_desktop_config.json %APPDATA%\Claude\claude_desktop_config.json
Claude Code (CLI) ~/.claude.json %USERPROFILE%\.claude.json
Cursor ~/.cursor/mcp.json %USERPROFILE%\.cursor\mcp.json
Windsurf ~/.codeium/windsurf/mcp_config.json %USERPROFILE%\.codeium\windsurf\mcp_config.json
OpenAI Codex (app, CLI, IDE) ~/.codex/config.toml (TOML, see format) %USERPROFILE%\.codex\config.toml
Gemini CLI ~/.gemini/settings.json %USERPROFILE%\.gemini\settings.json
Google Antigravity (IDE, CLI, app) ~/.gemini/config/mcp_config.json %USERPROFILE%\.gemini\config\mcp_config.json

Tip for designers: The ~ symbol means your home folder. On macOS, that's /Users/YourName/. On Windows, it's C:\Users\YourName\. You can open these files in any text editor — even TextEdit or Notepad.

Can't find the file? If it doesn't exist yet, create it. The app will pick it up on its next restart. Make sure the entire file is valid JSON (watch for missing commas or brackets).

Claude Code users: You can skip manual editing entirely. Just run the claude mcp add command above and it handles everything for you.

Step 3: Connect to Figma Desktop

Desktop Bridge Plugin:

  1. Open Figma Desktop normally (no special flags needed) and open a file
  2. Go to Plugins → Development → Import plugin from manifest...
  3. Select ~/.figma-console-mcp/plugin/manifest.json (stable path, auto-created by the MCP server). Run npx figma-console-mcp --print-path to print the exact path for your machine.
  4. Run the plugin in your Figma file — it scans ports 9223–9232 and connects automatically to your running MCP server

Can't see the folder in the import dialog? .figma-console-mcp starts with a dot, so macOS hides it. In the dialog, press ⌘⇧G and paste the path (or press ⌘⇧. to show hidden files). On Windows the folder is visible as normal.

Heads-up on plugin updates. Figma caches plugin files (code.js and ui.html) at the application level. The MCP server refreshes the files at ~/.figma-console-mcp/plugin/ on every startup, but Figma keeps using its cached copy until you re-import the manifest.

Re-importing is required only when a release notes entry says so — typically when the plugin adds a new method the server needs (e.g. v1.22.4, v1.10.0). The plugin files last changed in v1.41.5; if your imported plugin predates that, re-import once. The plugin shows an update banner when the server bundles a newer plugin than the one running. For most upgrades the new server stays wire-compatible with the previous plugin, and re-importing is optional: you'll still get every functional change, just not the cosmetic plugin-side touches (status-pill copy, pluginVersion reporting).

When you do re-import: Plugins → Manage plugins → re-import ~/.figma-console-mcp/plugin/manifest.json. The stable path never changes, so it's a one-click step.

Step 4: Restart Your MCP Client

Restart your MCP client to load the new configuration.

Step 5: Test It!

Check Figma status

→ Should show connection status with active WebSocket transport

Create a simple frame with a blue background

→ Should create a frame in Figma (confirms write access!)

📖 Complete Setup Guide

For Contributors: Local Git Mode

Best for: Developers who want to modify source code or contribute to the project.

What you get: Same 130 tools as NPX, plus full source code access.

Quick Setup

# Clone and build
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install
npm run build:local

Configure Your MCP Client

Add to your config file (see Where to find your config file):

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": ["/absolute/path/to/figma-console-mcp/dist/local.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Then follow NPX Steps 3-5 above.

📖 Complete Setup Guide

📡 Remote SSE (Read-Only Exploration)

Best for: Quickly evaluating the tool or read-only design data extraction.

What you get: the read-only tools — view file data, components, styles, comments and version history, take screenshots, read logs, check design-code parity. Cannot create or modify designs.

Claude Desktop (UI Method)

  1. Open Claude Desktop → Settings → Connectors
  2. Click "Add Custom Connector"
  3. Enter:
    • Name: Figma Console (Read-Only)
    • URL: https://figma-console-mcp.southleft.com/sse
  4. Click "Add" — Done! ✅

OAuth authentication happens automatically when you first use design system tools.

Claude Code

⚠️ Known Issue: Claude Code's native --transport sse has a bug. Use mcp-remote instead:

claude mcp add figma-console -s user -- npx -y mcp-remote@latest https://figma-console-mcp.southleft.com/sse

💡 Tip: For full capabilities, use NPX Setup instead of Remote SSE.

Other Clients (Cursor, Windsurf, etc.)

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
    }
  }
}

Upgrading to Full Capabilities

Ready for design creation? Follow the NPX Setup guide above, or try Cloud Mode if you don't want to install Node.js.

📖 Complete Setup Guide

☁️ Cloud Mode (Web AI Clients)

Best for: Using Claude.ai, v0, Replit, or Lovable to create and modify Figma designs — no Node.js required.

What you get: 105 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.

Prerequisites

Step 1: Add the MCP Connector

Add this endpoint to your AI platform's MCP settings:

URL: https://figma-console-mcp.southleft.com/mcp Auth: Your Figma PAT as Bearer token

In Claude.ai: Settings → Connectors → Add Custom Connector → paste the URL above. In Lovable/v0/Replit: Look for "Add MCP Server" or "Integrations" in settings → paste the URL and add your token.

Step 2: Pair the Plugin

  1. Open the Desktop Bridge plugin in Figma Desktop (Plugins → Development → Figma Desktop Bridge)
  2. Tell your AI assistant:
    Connect to my Figma plugin
  3. The AI gives you a 6-character pairing code (expires in 5 minutes)
  4. In the plugin: Toggle "Cloud Mode" → enter the code → click Connect
  5. You're paired! Full write access is now available

What You Can Do

Once paired, use natural language to design:

Create a card component with a header image, title, description, and action button
Set up a color token collection with Light and Dark modes
Add a "High Contrast" mode to my existing token collection

How It Works

Your AI client sends write commands through the cloud MCP server, which relays them via WebSocket to the Desktop Bridge plugin running in your Figma Desktop. The plugin executes the commands using the Figma Plugin API and returns results back through the same path.

AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugin → Figma

Variables on any plan: Cloud Mode uses the Plugin API (not the Enterprise REST API), so variable management works on Free, Pro, and Organization plans.

📖 Complete Setup Guide

📊 Installation Method Comparison

Feature NPX (Recommended) Cloud Mode Local Git Remote SSE
Setup time ~10 minutes ~5 minutes ~15 minutes ~2 minutes
Total tools 130 105 after pairing 130 (Local Git) Read-only subset
Design creation ✅ ✅ ✅ ❌
Variable management ✅ ✅ ✅ ❌
Component instantiation ✅ ✅ ✅ ❌
FigJam boards ✅ ✅ ✅ ❌
Real-time monitoring ✅ ❌ ✅ ❌
Desktop Bridge plugin ✅ ✅ ✅ ❌
Variables (no Enterprise) ✅ ✅ ✅ ❌
Console logs ✅ (zero latency) ❌ ✅ (zero latency) ✅
Read design data ✅ ✅ ✅ ✅
Requires Node.js Yes No Yes No
Authentication PAT (manual) OAuth (automatic) PAT (manual) OAuth (automatic)
Automatic updates ✅ (@latest) ✅ Manual (git pull) ✅
Source code access ❌ ❌ ✅ ❌

Key insight: Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 130 tools.

📖 Complete Feature Comparison

🎯 Test Your Connection

After setup, try these prompts:

Basic test (all modes):

Navigate to https://www.figma.com and check status

Design system test (requires auth):

Get design variables from [your Figma file URL]

Cloud Mode test:

Connect to my Figma plugin

→ Follow the pairing flow, then try: "Create a simple blue rectangle"

Plugin test (Local Mode only):

Show me the primary font for [your theme name]

🔐 Authentication

Remote Mode - OAuth (Automatic)

When you first use design system tools:

  1. Browser opens automatically to Figma authorization page
  2. Click "Allow" to authorize (one-time)
  3. Token stored securely and refreshed automatically
  4. Works with Free, Pro, and Enterprise Figma plans

Local Mode - Personal Access Token (Manual)

  1. Visit https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
  2. Generate token with scopes (all Read unless noted): File content, File versions, Library content, Library assets, Comments (Read and write), Current user, and Variables (Enterprise only, optional)
  3. Add to MCP config as FIGMA_ACCESS_TOKEN environment variable

🛠️ Available Tools

Status & Diagnostics

Console Debugging

Visual Debugging

👁️ Real-Time Awareness (Local Mode only)

Design System Extraction

📚 Shared Library Inspection

☁️ Cloud Relay

✏️ Design Creation (Local Mode + Cloud Mode)

🧩 Figma Slots (Local Mode + Cloud Mode)

🎬 Motion (Local Mode + Cloud Mode)

Figma Motion (Plugin API beta). Animations play in Figma's preview and in video export, not in static screenshots.

🧱 Code Layers (Local Mode + Cloud Mode)

✨ Shaders (Local Mode + Cloud Mode)

📐 Layout (Local Mode + Cloud Mode)

🔍 Design-Code Parity (All Modes)

🔬 Components, Nodes & Deep Analysis (Local Mode + Cloud Mode unless noted)

♿ Accessibility (Local Mode + Cloud Mode)

📝 Annotations & Comments

🕰 Version History

🔁 Token Sync (Local Mode + Cloud Mode)

🧬 Design System Extraction (Local Mode only)

Turn a production codebase into a design system: analyze → extract tokens → scaffold → port components → verify. Local Mode only — these tools read and write your local filesystem, so they are never registered in Cloud Mode.

🔧 Variable Management (Local Mode + Cloud Mode)

📌 FigJam Board Tools (Local Mode + Cloud Mode)

🎞️ Slides Presentation Tools (Local Mode + Cloud Mode)

📖 Detailed Tool Documentation

📖 Example Prompts

Cloud Mode (Web AI Clients)

Connect to my Figma plugin so we can start designing
Pair with my Figma file and create a login form with email, password, and submit button
Set up a brand color token collection with Light and Dark modes

Plugin Debugging

Navigate to my Figma plugin and show me any console errors
Watch the console for 30 seconds while I test my plugin
Get the last 20 console logs

Design System Extraction

Get all design variables from https://figma.com/design/abc123
Extract color styles and show me the CSS exports
Get the Button component with a visual reference image
Get the Badge component in reconstruction format for programmatic creation

Design Creation (Local Mode + Cloud Mode)

Create a success notification card with a checkmark icon and message
Design a button component with hover and disabled states
Build a navigation bar with logo, menu items, and user avatar
Create a modal dialog with header, content area, and action buttons
Arrange these button variants into a component set
Organize my icon variants as a proper component set with the purple border

Variable Management (Local Mode + Cloud Mode)

Create a new color collection called "Brand Colors" with Light and Dark modes
Add a primary color variable with value #3B82F6 for Light and #60A5FA for Dark
Rename the "Default" mode to "Light Theme"
Add a "High Contrast" mode to the existing collection

Design-Code Parity

Compare the Button component in Figma against our React implementation
Check design parity for the Card component before sign-off
Generate component documentation for the Dialog from our design system

FigJam Boards

Create a retrospective board with "Went Well", "To Improve", and "Action Items" columns
Build a user flow diagram for the checkout process with decision points
Read this brainstorming board and summarize the key themes
Generate an affinity map from these meeting notes
Create a comparison table of our three platform options

Slides Presentations

List all slides and tell me which ones are skipped
Add a new slide with the title "Thank You" in 72px text
Set a DISSOLVE transition on the first slide with 0.5 second duration
Duplicate slide 5 for an A/B comparison
Skip slides 8 and 9 — they're not ready for the client presentation
Reorder my slides so the conclusion comes before Q&A

Visual Debugging

Take a screenshot of the current Figma canvas
Navigate to this file and capture what's on screen

📖 More Use Cases & Examples

🎨 AI-Assisted Design Creation

Requires Desktop Bridge: This feature works with Local Mode (NPX or Local Git) and Cloud Mode. Remote SSE without Cloud Mode pairing is read-only and cannot create or modify designs.

One of the most powerful capabilities of this MCP server is the ability to design complete UI components and pages directly in Figma through natural language conversation with any MCP-compatible AI assistant like Claude Desktop or Claude Code.

What's Possible

Create original designs from scratch:

Design 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.

Leverage existing component libraries:

Build a dashboard header using the Avatar component for the user profile,
Button components for actions, and Badge components for notifications.

Generate complete page layouts:

Create a settings page with a sidebar navigation, a main content area with form fields,
and a sticky footer with Save and Cancel buttons.

How It Works

  1. You describe what you want in plain English
  2. The AI searches your component library using figma_search_components to find relevant building blocks
  3. Components are instantiated with proper variants and properties via figma_instantiate_component
  4. Custom elements are created using the full Figma Plugin API via figma_execute
  5. Visual validation automatically captures screenshots and iterates until the design looks right

Who Benefits

Role Use Case
Designers Rapidly prototype ideas without manual frame-by-frame construction. Explore variations quickly by describing changes.
Developers Generate UI mockups during planning discussions. Create visual specs without switching to design tools.
Product Managers Sketch out feature concepts during ideation. Communicate visual requirements directly to stakeholders.
Design System Teams Test component flexibility by generating compositions. Identify gaps in component coverage.
Agencies Speed up initial concept delivery. Iterate on client feedback in real-time during calls.

Example Workflows

Brand New Design:

"Create a notification toast with an icon on the left, title and description text, and a dismiss button. Use our brand colors."

The AI creates custom frames, applies your design tokens, and builds the component from scratch.

Component Composition:

"Build a user profile card using the Avatar component (large size), two Button components (Edit Profile and Settings), and a Badge for the user's status."

The AI searches your library, finds the exact components, and assembles them with proper spacing and alignment.

Design Iteration:

"The spacing feels too tight. Increase the gap between sections to 24px and make the heading larger."

The AI modifies the existing design, takes a screenshot to verify, and continues iterating until you're satisfied.

Visual Validation

The AI automatically follows a validation workflow after creating designs:

  1. Create → Execute the design code
  2. Screenshot → Capture the result
  3. Analyze → Check alignment, spacing, and visual balance
  4. Iterate → Fix any issues detected
  5. Verify → Final screenshot to confirm

This ensures designs aren't just technically correct—they look right.

The Figma Desktop Bridge plugin is the recommended way to connect Figma to the MCP server. It communicates via WebSocket — no special Figma launch flags needed, and it persists across Figma restarts.

Setup

  1. Open Figma Desktop (normal launch — no debug flags needed)
  2. Go to Plugins → Development → Import plugin from manifest...
  3. Select ~/.figma-console-mcp/plugin/manifest.json — the stable path the MCP server keeps up to date (npx figma-console-mcp --print-path prints it; on macOS press ⌘⇧G in the dialog and paste it, since the folder is hidden). If you cloned this repo for development, you can select figma-desktop-bridge/manifest.json from the clone instead.
  4. Run the plugin in your Figma file — it auto-connects via WebSocket (scans ports 9223–9232)
  5. Ask your AI: "Check Figma status" to verify the connection

One-time import. Once imported, the plugin stays in your Development plugins list. Just run it whenever you want to use the MCP.

📖 Desktop Bridge Documentation

Capabilities

Read Operations:

Write Operations:

How the Transport Works

Multiple files: The WebSocket server supports multiple simultaneous plugin connections — one per open Figma file. Each connection is tracked by file key with independent state (selection, document changes, console logs).

Environment variables:

Cloud Mode: The plugin also supports a Cloud Mode toggle for pairing with web AI clients (Claude.ai, v0, Replit, Lovable). Toggle "Cloud Mode" in the plugin UI, enter the 6-character pairing code from your AI assistant, and click Connect. See Cloud Mode for details.

Plugin Limitation: In Local Mode, works with NPX or Local Git. In Cloud Mode, pairs with the remote MCP endpoint. Remote SSE without Cloud Mode pairing is read-only.

🔀 Multi-Instance Support (v1.10.0)

Figma Console MCP now supports multiple simultaneous instances — perfect for designers and developers who work across multiple projects or use Claude Desktop's Chat and Code tabs at the same time.

The Problem (Before v1.10.0)

When two processes tried to start the MCP server (e.g., Claude Desktop's Chat tab and Code tab), the second one would crash with EADDRINUSE because both competed for port 9223.

How It Works Now

What This Means for You

Scenario Before v1.10.0 Now
Two Claude Desktop tabs (Chat + Code) Second tab crashes Both work independently
Multiple CLI terminals on different projects Only one can run All run simultaneously
Claude Desktop + Claude Code CLI Port conflict Both coexist

Do I Need to Do Anything?

Nothing. Multi-instance support is fully automatic:

(Re-importing the manifest is only required when the plugin code itself changes — e.g. after a package update. Port-range scanning is already in the shipped plugin.)

Sharing one server over HTTP (optional)

Normally each MCP client starts its own server over stdio. To let several local clients share one server and its Figma connection, set FIGMA_MCP_HTTP_PORT. The server then also serves MCP at http://127.0.0.1:<port>/mcp, and lists that URL in its port file (mcpHttpUrl) and in figma_get_status (transport.mcpHttp).

# Start a shared server in a terminal (keep it open)
FIGMA_ACCESS_TOKEN=figd_... FIGMA_MCP_HTTP_PORT=9300 npx -y figma-console-mcp@latest

# Point clients at it, e.g. Claude Code:
claude mcp add --transport http figma-console-shared http://127.0.0.1:9300/mcp

🧩 MCP Apps (Experimental)

Figma Console MCP includes support for MCP Apps — rich interactive UI experiences that render directly inside any MCP client that supports the MCP Apps protocol extension. Built with the official @modelcontextprotocol/ext-apps SDK.

What are MCP Apps? Traditional MCP tools return text or images to the AI. MCP Apps go further — they render interactive HTML interfaces inline in the chat, allowing users to browse, filter, and interact with data directly without consuming AI context.

Token Browser

An interactive design token explorer.

Usage: Ask Claude to "browse the design tokens" or "show me the design tokens" while connected to a Figma file.

Features:

Design System Dashboard

A Lighthouse-style health scorecard that audits your design system across six categories.

Usage: Ask Claude to "audit the design system" or "show me design system health" while connected to a Figma file.

Features:

No MCP Apps support? Same audit, plain tool: figma_audit_design_system_report runs the identical scoring engine and returns the report as data — summary by default, per-category drill-down via category, full JSON via format: "full" — with a remediation section stating which findings this MCP can fix (design), which need a design decision first (design-assisted), and which need human design work (manual). Works in every MCP client with no ENABLE_MCP_APPS flag; results cache for 5 minutes (forceRefresh to re-crawl).

Enabling MCP Apps:

MCP Apps are enabled by default in the setup configurations above (via "ENABLE_MCP_APPS": "true"). If you set up before v1.10.0 and don't have this in your config, add it to your env section:

"env": {
  "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
  "ENABLE_MCP_APPS": "true"
}

Note: MCP Apps require an MCP client with ext-apps protocol support (e.g. Claude Desktop). This feature is experimental and the protocol may evolve.

Future MCP Apps Roadmap

Planned MCP Apps:

The architecture supports adding new apps with minimal boilerplate — each app is a self-contained module with its own server-side tool registration and client-side UI.

🚀 Advanced Topics

🤝 vs. Figma's Official MCP Server

The two servers are complementary, and both can run in the same MCP client.

Figma's official MCP server is hosted by Figma. It focuses on design-to-code context (get_design_context), Code Connect, library search, and creating content in Figma: it writes through use_figma, creates files, generates FigJam diagrams, generates code layers, and works with shaders.

Figma Console MCP focuses on design-system operations:

📖 Full comparison

🛤️ Roadmap

Current Status: v1.46.0 (Stable) - Production-ready. Latest: shaders applied with properties set by name, figma_set_layout for auto layout and grid layout, OKLCH/Display P3 and other CSS colors on fills and strokes, and text wrap style and variable-font axes in figma_set_text (server-only). On top of v1.45.1's figma_get_code_layers no longer hangs on a file in a background window, and the tool docs were audited against every tool's real parameters (server-only). On top of v1.45.0's Motion tools — apply, read, remove and export Figma Motion animations, manage custom animation styles, write Timing and Easing variables from token files, and find code layers (server-only). On top of v1.44.2's Cloud sign-in requests library_assets:read, so component lookups by key work over OAuth (server-only). On top of v1.44.1's Cloud Mode accepting personal access tokens without the Current user scope, 403 errors name the missing scope, and setup guides for Codex, Gemini CLI and Antigravity (server-only). On top of v1.44.0's opt-in Streamable HTTP endpoint for Local Mode (FIGMA_MCP_HTTP_PORT, loopback only, optional bearer token) so several local clients share one server and its Figma connection (server-only). On top of v1.43.0's @modelcontextprotocol/sdk 1.32.1 and zod 4 clear all seven production security advisories, with tool behavior unchanged and Gemini-safe schemas (server-only). On top of v1.42.1's commands to a plugin stuck on a timed-out script fail fast with a busy message instead of queuing behind it, port-exhaustion eviction ends the least recently used server instead of the oldest, and figma_execute accepts up to a 300 s timeout (server-only). On top of v1.42.0's figma_get_comments returning compact threads (root + replies, newest activity first) with node_id, thread_id and since filters and limit/offset paging, 30 threads by default; summary counts are per thread (server-only, PR #139). On top of v1.41.5's component-set analysis reporting gradient/image/paint-opacity, corner radius, typography and label text, swapped spacing tokens, nested layer geometry and vector shape changes (re-import the plugin). On top of v1.41.4's variant background/stroke and auto-layout changes. On top of v1.41.3's component-set analysis reporting changes inside nested layers (instance swaps, nested token changes, opacity on the variant itself) and no longer reports a layer hidden in every variant as a change (re-import the plugin). On top of v1.41.2's design-system summary and figma_get_token_values report the file's tokens (they always reported 0) (server-only). On top of v1.41.1's component-set analysis reports real variant differences (Figma's default variant, size and layer changes), component loading no longer times out on large files (throttled plugin timers), relevance-ranked component search, and figma_get_variables paging that works with format: "full" (re-import the plugin for the component fixes). On top of v1.41.0's Cloud Mode sign-in hardening (per-session tokens on /sse, single-use authorization codes bound to client, redirect URI and PKCE, a consent page for unrecognized destinations), a script-execution fix in the accessibility scanner, figma_import_tokens refusing empty imports and scoping replace deletes to imported collections, figma_arrange_component_set no longer deleting other arranged sets, live variable reads for token export/import, Windows orphan-server exit (PR #140), and fileKey for the Slots tools (PR #112) (server-only, no plugin re-import). On top of v1.40.9's composed colors (a color variable set to another color at an opacity, "grey/900 at 50%") export and import with the link to the primitive intact — color-mix() in CSS/Tailwind v4, rgba() in SCSS, an alpha modifier in Tokens Studio, the resolved color plus the composition in DTCG — where the export previously failed or wrote [object Object] (server-only, no plugin re-import). On top of v1.40.8's min/max width and height survive every way of extracting a component as JSON — the design system kit, the reconstruction format and figma_get_file_data now carry them, design-code parity compares them, and the reconstruction format returns real geometry again instead of 50×50 placeholders when the plugin is connected (server-only, no plugin re-import). On top of v1.40.7's clearer Color Tokens table in generated docs — layers revealed by a boolean property are printed once under that property, and stroke/fill rows name the nested instance they belong to (server-only, no plugin re-import). On top of v1.40.6's overrides in extended variable collections are visible (previously reported as nonexistent), and a third round of generated-doc fidelity fixes — radius tokens read per corner, boolean props compared in Design-Code Parity, source links pinned to a commit, hidden layers linked to the property that shows them (server-only, no plugin re-import). On top of v1.40.5's clean dependency audit for the npm package — Worker-only dependencies (@cloudflare/puppeteer, which pulled in a high-severity extract-zip advisory with no upstream fix, and agents) no longer install for npm users, so npm install figma-console-mcp audits at 0 vulnerabilities and is 64 MB instead of 173 MB; the server also reports its real version to MCP clients instead of 0.1.0 (server-only, no plugin re-import). On top of v1.40.4's fixes found by live-testing v1.40.3 on hard production components — tools given a fileUrl now read variables, descriptions and annotations from THAT file rather than whichever file is active (previously every token name could vanish, or on an id collision come from the wrong file; figma_get_component could return a different component), a tool result over 16 MB no longer disconnects the server, anatomy labels sizing by the layout's real axes, and the icon/typography/anatomy output stays readable on large components (server-only, no plugin re-import). On top of v1.40.3's fidelity fixes for generated component docs on harder components — hidden layers are labeled instead of documented as rendered, one-sided borders report the weight that actually renders, typography and layer structure are compared across every variant instead of read from the first, gradients/shadows/opacity are no longer silently dropped, truncated trees say so, and SLOT properties are listed (server-only, no plugin re-import). On top of v1.40.2's data-loss fix for figma_export_tokens — with a different file active in Figma than intended, an export could replace a real token file with an empty one (or with another file's tokens) and report success; exports now refuse to write when a requested collection is missing, when the export is empty, when the target was generated from a different Figma file, or when overwriting would destroy tokens the export doesn't manage, and strategy: "merge" — documented as preserving code-only tokens but never implemented — is now a genuinely safe default (server-only, no plugin re-import). On top of v1.40.1's accuracy fixes for generated component docs across variants — a descendant's fill (typically an icon's) could be documented as a variant's Background, Color Token headings kept only a property literally named Variant, spacing was read from the first variant alone, and icons were only detected by layer name — plus figma_export_tokens accepting a file path as outputPath instead of failing with a raw EEXIST or silently creating a directory (server-only, no plugin re-import). On top of v1.40.0's design system extraction from production codebases — seven Local-Mode figma_ds_* tools that scan one or more apps (framework/styling/vendor detection, usage-ranked component inventory classified vendored/wrapped/pure-vendor/bespoke, variant inference from real call sites, duplicate detection, and an architecture pass separating UI-kit specializations from the missing generic primitives), mine the de-facto styling into DTCG tokens with per-token provenance (multi-mode CSS custom properties, SCSS, Tailwind config, shadcn HSL triples, utility-class frequency mining valued from the app's own theme), scaffold the design-system package with showcase docs pages, wire a fresh Storybook workshop to the app's real theme layers and fonts, deep-extract components for porting with CSF3 story scaffolds, verify with deterministic fidelity evals, and persist porting progress across sessions — the extracted tokens import straight into Figma variables via figma_import_tokens. On top of v1.39.1's fix for a plugin-update banner that could never be cleared — an older server instance nagging a newer plugin to re-import, which only ever installs the same or a newer plugin. On top of v1.39.0's multi-file execution — figma_execute_across_files runs one script against several Desktop Bridge-connected files concurrently (four files x 2s of work in ~3s, not ~8s), and figma_execute takes an optional fileKey to target a single file without moving the active file or releasing target lock; targeting must be explicit (fileKeys or allFiles: true), so nothing fans out to files you did not name. From community PR #107 by @Wolfr. Ships with a relay fix: handleResult() in the plugin's ui.html rebuilt each response field by field and silently dropped resultAnalysis and fileContext, so the resultAnalysis.warning check that figma_execute's own description tells callers to perform has never been possible (re-import manifest.json for those two fields; everything else works without it). On top of v1.38.2's connection-stability fix — the server's own orphan reaper was terminating healthy MCP servers because its liveness probe used an IPv4 literal while the server binds the IPv6 loopback, which turned every kill-safety gate into a rubber stamp; this was the cause of recurring "Server disconnected" errors across all MCP clients. Alongside v1.38.1's fix for the shared-library variable tools, which had silently reported zero collections since v1.29.0 and reported failed imports as successes. On top of v1.38.0's ongoing component changelogs in generated docs — figma_generate_component_doc takes an opt-in history parameter that pulls per-component design history from Figma version history (each version diffed and scoped to that component, so renames, added properties, and token bindings show up as rows) alongside code history from git log on the component's source files, rendered as a ## History section with design, code, and release-note tables. Prefers labeled versions, falls back to auto-saves when a file has none, and is off by default so existing calls are unchanged (server-only, no plugin re-import). On top of v1.37.x's design-system health audit for every client — figma_audit_design_system_report runs the dashboard's deterministic six-category scoring engine and returns the report as data with per-finding remediation, live-first fileKey-verified data (source disclosed), chunked per-category drill-down, and a 5-minute cache (server-only, no plugin re-import). On top of v1.36.0's target lock for multi-file parallel work — — figma_navigate takes a lock: true flag that pins the active file so an AI agent can work in one file while you work in another without commands routing to the wrong file. On top of v1.35.0's Figma Slots write support — create, inspect, populate, and reset Slots (GA at Config 2026) via 5 new tools (figma_create_slot, figma_get_slots, figma_append_to_slot, figma_reset_slot, figma_add_slot_property), live-validated against the GA Plugin API and based on community PR #77. On top of v1.34.0's Bidirectional Token Sync v2 + DTCG 2025.10 — figma_import_tokens applies the complete diff plan (creates missing collections/variables, applies renames, writes real VARIABLE_ALIAS references, and deletes only under explicit replace), figma_export_tokens speaks the DTCG 2025.10 dialect on request (legacy default byte-identical), variable scopes/codeSyntax round-trip via $extensions, figma_setup_design_tokens accepts alias values via DTCG brace references, and figma_create_component_set builds a full variant set from an axes matrix in one call. On top of the v1.33.x line: version-handshake fix (re-import banner only fires when plugin files actually changed), security dependency sweep, and the v1.33.0 connection UX overhaul (honest status pill derived from live connection state, /health auto-discovery with self-healing reconnect) + a 33-fix full-codebase audit (lossless DTCG multi-mode round-trips, cross-collection alias resolution, branch-URL correctness across REST tools, cache-poisoning and CSWSH fixes, bridge-first screenshots). Built on WCAG-accurate accessibility auditing (line height below 1.5× is no longer mis-flagged as a failure; readability hints decoupled from conformance checks and scoped to multi-line text; code-side WCAG 1.4.12 check), a self-healing Desktop Bridge connection (zombie-process reaper + auto-reconnect watchdog — fixes the recurring "not connected until restart" bug), native variable binding on fills/strokes + typography control in the write tools, shared-library inspection (key-based component resolution + library variable read/import without Enterprise plan), 10-format token export pipeline (DTCG, CSS, Tailwind v4, Tailwind v3, SCSS, TS module, JSON flat/nested, Style Dictionary v3, Tokens Studio), bidirectional Figma↔code token sync, version history & time-series awareness, FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 130 tools (Local) / 105 tools (Cloud) / read-only subset (Remote), Comments API, cross-MCP identity disambiguation, and MCP Apps.

Recent Releases:

Coming Next:

📖 Full Roadmap

💻 Development

git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install

# Local mode development
npm run dev:local

# Cloud mode development
npm run dev

# Build
npm run build

📖 Development Guide

📄 License

MIT - See LICENSE file for details.

figma-console-mcp (southleft/figma-console-mcp)

Searching Database…

3K ·GitHub
Figma-console-mcp
What is this?A Model Context Protocol server that connects AI assistants like Claude to Figma, so they can extract, create and debug design data. It is aimed at design systems.
Is it a plugin inside Figma or a separate program?Both. You run an MCP server next to your AI client, and you also import a Desktop Bridge plugin into Figma Desktop. The server and the plugin connect to each other.
How do I get it running?Create a Figma personal access token (starts with figd), add the npx config to your MCP client, restart the client, and run the Desktop Bridge plugin in your Figma file.
Do I need Node.js and Figma Desktop?Yes for the full NPX or Local Git setup: Node.js 18+ and Figma Desktop, not only the web app. Cloud Mode works without Node.js.
Which features need the full setup instead of Remote SSE?Remote SSE is read-only until you pair the plugin. Creating frames, editing variables and real-time console monitoring need the NPX or Local Git setup.
Does it work on both Windows and macOS?The README gives setup steps for both. Figma Desktop is required, and the only platform difference mentioned is that the plugin folder is hidden on macOS but visible on Windows.
What can it do with my design system?It pulls variables, components and styles, exports them to DTCG JSON, pushes code-side token edits back to Figma, runs WCAG accessibility checks and compares Figma components with their code.
Can it turn a production codebase into a design system?Yes. It scans the codebase, collects the styling it finds into DTCG tokens with provenance, and scaffolds a design-system package with a Storybook workshop.
Which AI clients does it support?The README has config instructions for Claude Code, OpenAI Codex, Gemini CLI, Cursor, Windsurf, Claude Desktop and Google Antigravity, plus Cloud Mode for web clients.
Does it only read designs?Not in the full setup. NPX and Local Git can create frames and components and manage variables. Remote SSE is the read-only option.
What are similar projects?design-extract, ux-ui-agent-skills, evenfire, bb-browser, cc-wf-studio, rea, epiq, jevmem
Which topics is it in?figma, design-systems, design-tools, accessibility, model-context-protocol, plugin, mcp-server, npm, mcp, claude-code, automation, nodejs
Creator
southleft
Size
5.2 MB
Stars
3K
Updated
CommitOct 29Releasev1.46.0Oct 29
Age
1y
Commits · 90 Days