Figma Console MCP Server

Model Context Protocol server that provides AI assistants with real-time console access, visual debugging, design system extraction, and design creation for Figma.

What is this?

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
🔄 Three ways to install - Remote SSE (OAuth, zero-setup), NPX (npm package), or Local Git (source code)

⚡ Quick Start

Choose Your Installation Method

This MCP server offers three installation methods with different tradeoffs:

Method	Setup	Auth	Best For
Remote SSE	⭐ Paste URL (2 min)	OAuth (automatic)	Most users - design system extraction
NPX	npm package (10 min)	PAT (manual)	Local execution without source code
Local Git	git clone (15 min)	PAT (manual)	Developers - modify source code

Key Insight: Only Remote SSE offers true zero-setup via OAuth. Both NPX and Local Git require manual FIGMA_ACCESS_TOKEN setup.

Choose the setup that fits your needs:

For Most Users: Remote Mode (Zero Setup)

Perfect for design system extraction and basic debugging. No installation required!

Claude Desktop (Recommended)

Latest Method - No Config Files!

Open Claude Desktop → Settings → Connectors
Click "Add Custom Connector"
Enter:
- Name: Figma Console
- URL: https://figma-console-mcp.southleft.com/sse
Click "Add"
Done! ✅

What you get:

✅ All 14 Figma tools available immediately
✅ OAuth authentication (automatic when you first use API tools)
✅ Design system extraction (variables*, components, styles)
✅ Console debugging and screenshots
❌ Desktop Bridge plugin NOT available (use Local Mode for that)

*Variables API requires Figma Enterprise plan OR use Local Mode + Desktop Bridge plugin

Claude Code

One-line install:

claude mcp add --transport sse figma-console https://figma-console-mcp.southleft.com/sse

Verify: /mcp should show "figma-console: connected"

Cursor

Add to .cursor/mcp.json:

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

Restart Cursor after saving.

Other MCP Clients (Windsurf, Zed, etc.)

Consult your client's MCP documentation for the config file location, then add:

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

NPX: Alternative Package Distribution

Use NPX if you:

✅ Want local execution without cloning source code
✅ Need Desktop Bridge plugin features
✅ Prefer npm package distribution over git
⚠️ Are comfortable with manual FIGMA_ACCESS_TOKEN setup

Setup time: 10 minutes

Note: NPX has identical authentication requirements to Local Git mode. For true zero-setup, use Remote Mode instead.

Configuration

Add to your MCP config (e.g., .claude.json or claude_desktop_config.json):

{
  "mcpServers": {
    "figma-console": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_access_token_here"
      }
    }
  }
}

Prerequisites

Get Figma Personal Access Token: https://www.figma.com/developers/api#access-tokens
Restart Figma Desktop with --remote-debugging-port=9222
- macOS: open -a "Figma" --args --remote-debugging-port=9222
- Windows: cmd /c "%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222

📖 Complete NPX Setup Guide

For Plugin Developers: Local Mode

Use Local Mode if you:

✅ Are developing Figma plugins (need zero-latency console debugging)
✅ Need variables WITHOUT Enterprise plan (via Desktop Bridge plugin)
✅ Need reliable component descriptions (Figma API has bugs, plugin bypasses them)
✅ Want direct access to Figma Desktop state

⚠️ Important: The Desktop Bridge plugin ONLY works in Local Mode. Remote mode cannot access it because the plugin requires direct connection to Figma Desktop via localhost:9222.

Setup time: 10-15 minutes

Prerequisites

Node.js 18+ installed
Figma Desktop installed
Git installed
Terminal/command line access

Step 1: Install the MCP Server

# Clone the repository
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp

# Install dependencies
npm install

# Build for local mode
npm run build:local

Step 2: Get Figma Personal Access Token

Visit https://www.figma.com/developers/api#access-tokens
Click "Get personal access token"
Enter description: "Figma Console MCP Local"
Click "Generate token"
Copy the token (you won't see it again!)

Step 3: Configure Claude Desktop

macOS: Edit ~/Library/Application Support/Claude/claude_desktop_config.json Windows: Edit %APPDATA%\Claude\claude_desktop_config.json

Add this configuration:

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

Important:

Replace /absolute/path/to/figma-console-mcp with the actual absolute path where you cloned the repo
Replace figd_YOUR_TOKEN_HERE with your actual Figma token from Step 2
Use forward slashes / even on Windows

Step 4: Launch Figma Desktop with Remote Debugging

⚠️ CRITICAL: Quit Figma completely first, then restart it with the debug flag:

macOS:

open -a "Figma" --args --remote-debugging-port=9222

Windows (CMD or PowerShell):

cmd /c "%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222

Step 5: Restart Claude Desktop

Quit Claude Desktop completely and relaunch it. The MCP server will connect automatically.

Step 6: Verify Setup

Check debug port is working:
- Open Chrome browser
- Visit: http://localhost:9222
- You should see inspectable Figma pages
Test in Claude Desktop:
- Look for 🔌 icon showing "figma-console-local: connected"
- Ask Claude: "Check Figma status"
- Should show: "✅ Figma Desktop connected"

📖 For more details: See Complete Setup Guide

📊 Installation Method Comparison

Feature	Remote SSE	NPX	Local Git
Setup	2 minutes	10 minutes	15 minutes
Prerequisites	None	PAT + Figma restart	PAT + Figma restart + git
Authentication	OAuth (automatic)	PAT (manual)	PAT (manual)
Console logs	✅	✅ (zero latency)	✅ (zero latency)
API access	✅	✅	✅
Desktop Bridge plugin	❌	✅	✅
AI-Assisted Design Creation	❌	✅ (via plugin)	✅ (via plugin)
Variables (no Enterprise)	❌	✅ (via plugin)	✅ (via plugin)
Reliable descriptions	⚠️ (API bugs)	✅ (via plugin)	✅ (via plugin)
Source code access	❌	❌	✅
Distribution	URL	npm package	git clone

📖 Complete Feature Comparison

🎯 Test Your Connection

After setup, try these prompts:

Basic test (both modes):

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

Design system test (requires auth):

Get design variables from [your Figma file URL]

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:

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

Local Mode - Personal Access Token (Manual)

Visit https://www.figma.com/developers/api#access-tokens
Generate token
Add to MCP config as FIGMA_ACCESS_TOKEN environment variable

🛠️ Available Tools

Navigation & Status

figma_navigate - Open Figma URLs
figma_get_status - Check connection status

Console Debugging

figma_get_console_logs - Retrieve console logs
figma_watch_console - Real-time log streaming
figma_clear_console - Clear log buffer
figma_reload_plugin - Reload current page

Visual Debugging

figma_take_screenshot - Capture UI screenshots

Design System Extraction

figma_get_variables - Extract design tokens/variables
figma_get_component - Get component data (metadata or reconstruction spec)
figma_get_component_for_development - Component + image
figma_get_component_image - Just the image
figma_get_styles - Color, text, effect styles
figma_get_file_data - Full file structure
figma_get_file_for_plugin - Optimized file data

✏️ Design Creation (Local Mode + Desktop Bridge)

figma_execute - Power tool: Run any Figma Plugin API code to create designs
- Create frames, shapes, text, components
- Apply auto-layout, styles, effects
- Build complete UI mockups programmatically

🔧 Variable Management (Local Mode + Desktop Bridge)

figma_create_variable_collection - Create new variable collections with modes
figma_create_variable - Create COLOR, FLOAT, STRING, or BOOLEAN variables
figma_update_variable - Update variable values in specific modes
figma_rename_variable - Rename variables while preserving values
figma_delete_variable - Delete variables
figma_delete_variable_collection - Delete collections and all their variables
figma_add_mode - Add modes to collections (e.g., "Dark", "Mobile")
figma_rename_mode - Rename existing modes

📖 Detailed Tool Documentation

📖 Example Prompts

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)

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

Variable Management (Local 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

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

⚠️ Local Mode Only: This feature requires the Desktop Bridge plugin and only works with Local Mode installation. Remote Mode 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

You describe what you want in plain English
The AI searches your component library using figma_search_components to find relevant building blocks
Components are instantiated with proper variants and properties via figma_instantiate_component
Custom elements are created using the full Figma Plugin API via figma_execute
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:

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

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

🎨 Desktop Bridge Plugin (Local Mode Only)

The Figma Desktop Bridge plugin enables powerful capabilities:

Read Operations

✅ Variables without Enterprise API
✅ Reliable component descriptions (bypasses API bugs)
✅ Multi-mode support (Light/Dark/Brand variants)

Write Operations

✅ Design Creation - Create frames, shapes, text, components via figma_execute
✅ Variable Management - Full CRUD operations on variables and collections
✅ Mode Management - Add and rename modes for multi-theme support

⚠️ Plugin Limitation: Only works in Local Mode. Remote mode cannot access it.

Setup:

Install Local Mode MCP
Download plugin from Releases
Import plugin: Figma Desktop → Plugins → Development → Import plugin from manifest
Run plugin in your Figma file
Ask Claude: "Create a button component" or "Show me the design variables"

📖 Desktop Bridge Documentation

🚀 Advanced Topics

Setup Guide - Complete setup guide for all MCP clients
Self-Hosting - Deploy your own instance on Cloudflare
Architecture - How it works under the hood
OAuth Setup - Configure OAuth for self-hosted deployments
Troubleshooting - Common issues and solutions

🤝 vs. Figma Official MCP

Figma Console MCP (This Project) - Debugging & data extraction

✅ Real-time console logs from Figma plugins
✅ Screenshot capture and visual debugging
✅ Error stack traces and runtime monitoring
✅ Raw design data extraction (JSON)
✅ Works remotely or locally

Figma Official Dev Mode MCP - Code generation

✅ Generates React/HTML code from designs
✅ Tailwind/CSS class generation
✅ Component boilerplate scaffolding

Use both together for the complete workflow: generate code with Official MCP, then debug and extract data with Console MCP.

🛤️ Roadmap

Real-time collaboration - Multi-user debugging sessions
Component screenshot diffs - Visual regression testing
Batch operations - Process multiple files at once
Design linting - Automated compliance checks
Plugin template generation - Generate plugin boilerplate

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

Name		Name	Last commit message	Last commit date
Latest commit History 106 Commits
.claude		.claude
docs		docs
figma-desktop-bridge		figma-desktop-bridge
scripts		scripts
src		src
tests		tests
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
biome.json		biome.json
jest.config.cjs		jest.config.cjs
package-lock.json		package-lock.json
package.json		package.json
tsconfig.cloudflare.json		tsconfig.cloudflare.json
tsconfig.json		tsconfig.json
tsconfig.local.json		tsconfig.local.json
worker-configuration.d.ts		worker-configuration.d.ts
wrangler.jsonc		wrangler.jsonc

Folders and files

Latest commit

History

Repository files navigation

Figma Console MCP Server

What is this?

⚡ Quick Start

Choose Your Installation Method

For Most Users: Remote Mode (Zero Setup)

Claude Desktop (Recommended)

Claude Code

Cursor

NPX: Alternative Package Distribution

Configuration

Prerequisites

For Plugin Developers: Local Mode

Prerequisites

Step 1: Install the MCP Server

Step 2: Get Figma Personal Access Token

Step 3: Configure Claude Desktop

Step 4: Launch Figma Desktop with Remote Debugging

Step 5: Restart Claude Desktop

Step 6: Verify Setup

📊 Installation Method Comparison

🎯 Test Your Connection

🔐 Authentication

Remote Mode - OAuth (Automatic)

Local Mode - Personal Access Token (Manual)

🛠️ Available Tools

Navigation & Status

Console Debugging

Visual Debugging

Design System Extraction

✏️ Design Creation (Local Mode + Desktop Bridge)

🔧 Variable Management (Local Mode + Desktop Bridge)

📖 Example Prompts

Plugin Debugging

Design System Extraction

Design Creation (Local Mode)

Variable Management (Local Mode)

Visual Debugging

🎨 AI-Assisted Design Creation

What's Possible

How It Works

Who Benefits

Example Workflows

Visual Validation

🎨 Desktop Bridge Plugin (Local Mode Only)

Read Operations

Write Operations

🚀 Advanced Topics

🤝 vs. Figma Official MCP

🛤️ Roadmap

💻 Development

📄 License

🔗 Links

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages