by southleft
Provides real-time console access, visual debugging, design system extraction, and auditing for Figma files and plugins, supporting both cloud and local deployment.
Figma Console MCP Server connects AI assistants to Figma, enabling real‑time console monitoring, screenshot capture, component metadata retrieval, design‑token extraction, and design‑system auditing.
Cloud mode (no setup)
npx -y mcp-remote https://figma-console-mcp.southleft.com/sse
Add a Figma access token to the MCP configuration if you need design‑system data.
Local mode (for plugin development)
open -a "Figma" --args --remote-debugging-port=9222start figma://--remote-debugging-port=9222npm install && npm run dev:local).figma-variables-bridge/) to expose variables.npx command as cloud mode; the server will connect to the local Chrome DevTools endpoint.Q: Do I need a Figma access token? A: Only for design‑system extraction (variables, styles, components). Console and screenshot tools work without a token.
Q: Can I run the server locally? A: Yes. Enable remote debugging on Figma Desktop and start the local MCP server. This gives zero‑latency console logs.
Q: How can I access variables without an Enterprise plan?
A: Install the figma-variables-bridge plugin. It reads local variables via the plugin API and exposes them to the MCP server, bypassing the Enterprise restriction.
Q: What if the MCP server cannot connect to the browser?
A: Ensure Figma was launched with the --remote-debugging-port=9222 flag and that http://localhost:9222 shows inspectable pages.
Q: How do I clear the console buffer?
A: Use the figma_clear_console tool.
Model Context Protocol server that provides AI assistants with real-time console access, visual debugging, design system auditing, and data extraction for Figma files and plugins.
Figma Console MCP is a Model Context Protocol server that connects AI assistants (like Claude) to Figma for:
Once connected, try these prompts with your AI assistant:
Cloud Mode (Default - No Setup Required):
Local Mode (For Plugin Development - Requires One-Time Setup):
🚨 REQUIRED FIRST-TIME SETUP:
Step 1: Quit Figma Desktop completely (Cmd+Q / Alt+F4)
Step 2: Relaunch Figma with remote debugging enabled:
- macOS: Open Terminal and run:
open -a "Figma" --args --remote-debugging-port=9222- Windows: Open Command Prompt and run:
start figma://--remote-debugging-port=9222Step 3: Open your design file, run your plugin, then ask:
- "Check the last 20 console logs"
- "Show me recent error logs from my plugin"
- "Watch for new console output"
✅ You only need to do this setup once per Figma session. Your logs will appear instantly!
See LOCAL_MODE_SETUP.md for detailed local mode installation.
Both MCPs connect AI assistants to Figma, but serve different purposes:
Figma Console MCP (This Project) - Debugging, auditing & data extraction
Figma Official Dev Mode MCP - Code generation from designs
Both MCPs can help with component development. Console MCP provides design specs as structured data, while Dev Mode MCP generates starter code.
Use Figma Console MCP when:
Use Figma Official MCP when:
Use both together for the complete workflow: generate code with Official MCP, then audit, debug and refine with Console MCP.
Choose Cloud Mode or Local Mode (for plugin development):
Zero-setup remote access. Works with all AI clients.
One-line install:
claude mcp add --transport sse figma-console https://figma-console-mcp.southleft.com/sse
To add Figma token (required for design system tools):
claude config edit
Add the environment variable:
{
"mcpServers": {
"figma-console": {
"transport": "sse",
"url": "https://figma-console-mcp.southleft.com/sse",
"env": {
"FIGMA_ACCESS_TOKEN": "figd_your_actual_token_here"
}
}
}
}
Get your Figma token: https://www.figma.com/developers/api#access-tokens
Verify:
/mcp command in Claude CodeSee CLAUDE_CODE_SETUP.md for troubleshooting.
Location: .cursor/mcp.json in your project or ~/.cursor/mcp.json globally
Without Figma token (console/screenshots only):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
}
}
With Figma token (full design system access):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_your_actual_token_here"
}
}
}
}
Get your Figma token: https://www.figma.com/developers/api#access-tokens
After editing:
Location: Follow Windsurf's MCP configuration documentation
Without Figma token (console/screenshots only):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
}
}
With Figma token (full design system access):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_your_actual_token_here"
}
}
}
}
Get your Figma token: https://www.figma.com/developers/api#access-tokens
Location: ~/.config/zed/settings.json (Linux/macOS) or %APPDATA%\Zed\settings.json (Windows)
Without Figma token (console/screenshots only):
{
"context_servers": {
"figma-console": {
"command": {
"path": "npx",
"args": ["mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
}
}
}
With Figma token (full design system access):
{
"context_servers": {
"figma-console": {
"command": {
"path": "npx",
"args": ["mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
},
"env": {
"FIGMA_ACCESS_TOKEN": "figd_your_actual_token_here"
}
}
}
}
Get your Figma token: https://www.figma.com/developers/api#access-tokens
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Without Figma token (console/screenshots only):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
}
}
With Figma token (full design system access):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["mcp-remote", "https://figma-console-mcp.southleft.com/sse"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_your_actual_token_here"
}
}
}
}
Get your Figma token: https://www.figma.com/developers/api#access-tokens
After editing:
Without Figma token (console/screenshots only):
{
"command": "npx",
"args": ["mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
With Figma token (full design system access):
{
"command": "npx",
"args": ["mcp-remote", "https://figma-console-mcp.southleft.com/sse"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_your_actual_token_here"
}
}
Get your Figma token: https://www.figma.com/developers/api#access-tokens
Consult your MCP client's documentation for the specific configuration file location.
Direct connection to Figma Desktop for zero-latency console logs.
⚠️ Requires: One-time Figma restart with
--remote-debugging-port=9222flag
See full guide: LOCAL_MODE_SETUP.md
Quick setup:
open -a "Figma" --args --remote-debugging-port=9222start figma://--remote-debugging-port=9222In your AI assistant, try:
Navigate to [your Figma file URL] and check the status
Example:
Navigate to https://figma.com/design/abc123/My-Design and check the status
You should see:
If you added your Figma token, also try:
Get design variables from https://figma.com/design/abc123
Don't have a Figma file? Try the basic test:
Navigate to https://www.figma.com and check the status
All 14 tools work identically in both cloud and local modes.
| Category | Tool | Purpose |
|---|---|---|
| 🧭 Navigation | figma_navigate |
Open a Figma URL and start monitoring |
figma_get_status |
Check browser and monitoring status | |
| 📋 Console | figma_get_console_logs |
Retrieve console logs with filters |
figma_watch_console |
Stream logs in real-time | |
figma_clear_console |
Clear log buffer | |
| 🔍 Debugging | figma_take_screenshot |
Capture UI screenshots |
figma_reload_plugin |
Reload current page | |
| 🎨 Design System | figma_get_variables |
Extract design tokens/variables |
figma_get_styles |
Get color, text, effect styles | |
figma_get_component |
Get component data | |
figma_get_component_for_development |
Component + visual reference | |
figma_get_component_image |
Just the component image | |
figma_get_file_data |
File structure with verbosity control | |
figma_get_file_for_plugin |
File data optimized for plugins |
📖 For detailed API documentation, parameters, and examples: See docs/TOOLS.md
Common scenarios:
📖 For detailed scenarios, workflows, and prompt examples: See docs/USE_CASES.md
Figma's Variables API requires an Enterprise plan. We've built a workaround that lets you access all your local variables through a simple plugin bridge - no Enterprise plan needed.
The Figma Variables Bridge plugin runs in Figma Desktop and exposes your variables data through a plugin UI iframe. The MCP server accesses this data via Puppeteer, bypassing Figma's Enterprise API requirement.
Figma Plugin Worker → postMessage → Plugin UI Iframe → window object → Puppeteer → MCP Server
Key Features:
⏱️ One-time setup (~5 minutes) - After this, variables are instantly available in every session
Quit Figma Desktop completely, then relaunch with remote debugging enabled:
macOS:
open -a "Figma" --args --remote-debugging-port=9222
Windows:
start figma://--remote-debugging-port=9222
Verify it worked: Visit http://localhost:9222 in Chrome - you should see inspectable Figma pages.
Follow the complete guide in LOCAL_MODE_SETUP.md to:
Quick verification:
Ask Claude: "Check figma status"
You should see "✓ Figma Desktop connected" with port 9222.
/path/to/figma-console-mcp/figma-variables-bridge/manifest.jsonThe plugin appears in your Development plugins list as "Figma Variables Bridge".
📁 Plugin location: The
figma-variables-bridge/directory is in yourfigma-console-mcprepository root
What you'll see:
✓ Variables ready
404 variables in 2 collections
Data available via MCP
window.__figmaVariablesData
The plugin window can stay open or be minimized - it stays running until you close it.
Now you can ask Claude about your variables using natural language!
Example prompts:
Summary overview (recommended first call):
Get me a summary of the Figma variables from https://figma.com/design/YOUR_FILE_KEY
Returns ~4K tokens with:
Specific questions:
What is the primary font for the Stratton variable mode?
What is the primary brand color for Winter Park?
Show me all breakpoint variables
Filtered queries:
Get all color variables from the Brand collection
Show me font variables that contain "heading"
The figma_get_variables tool supports these parameters:
{
fileUrl: string, // Required: Your Figma file URL
format?: "summary" | "filtered" | "full", // Default: "full"
collection?: string, // Filter by collection name/ID
namePattern?: string, // Filter by name (regex or substring)
mode?: string, // Filter by mode name/ID
refreshCache?: boolean // Force refresh (default: false)
}
Format options:
"summary" - ~2-5K tokens with overview and names only"filtered" - Apply collection/name/mode filters"full" - Complete dataset (auto-summarized if >25K tokens)Examples:
// Get summary first (recommended)
figma_get_variables({
fileUrl: "https://figma.com/design/abc123",
format: "summary"
})
// Filter by collection
figma_get_variables({
fileUrl: "https://figma.com/design/abc123",
format: "filtered",
collection: "Brand"
})
// Search by name pattern
figma_get_variables({
fileUrl: "https://figma.com/design/abc123",
format: "filtered",
namePattern: "font/family"
})
// Get specific mode
figma_get_variables({
fileUrl: "https://figma.com/design/abc123",
format: "filtered",
collection: "Brand",
mode: "Stratton"
})
// Force refresh cache
figma_get_variables({
fileUrl: "https://figma.com/design/abc123",
refreshCache: true
})
The MCP caches variables data with intelligent management:
Cache is automatically used when:
refreshCache: true parameterForce cache refresh:
figma_get_variables({
fileUrl: "https://figma.com/design/abc123",
refreshCache: true // Fetches fresh data from plugin
})
refreshCache: true parameterrefreshCache: true for immediate updates--remote-debugging-port=9222Plugin Architecture:
figma.variables.getLocalVariablesAsync()window.__figmaVariablesData (accessible to Puppeteer)Data Format:
{
success: true,
timestamp: number,
fileKey: string,
variables: Array<{
id: string,
name: string,
resolvedType: "COLOR" | "FLOAT" | "STRING" | "BOOLEAN",
valuesByMode: Record<string, any>,
variableCollectionId: string,
scopes: string[],
description?: string
}>,
variableCollections: Array<{
id: string,
name: string,
modes: Array<{ modeId: string, name: string }>,
defaultModeId: string,
variableIds: string[]
}>
}
Why This Works:
allowedDomains: ["none"])📖 For complete plugin documentation: See figma-variables-bridge/README.md
If you're developing Figma plugins and need zero-latency console log capture directly from Figma Desktop:
Before using local mode, you MUST restart Figma with the debug flag:
open -a "Figma" --args --remote-debugging-port=9222start figma://--remote-debugging-port=9222Then proceed to: LOCAL_MODE_SETUP.md for full local mode installation.
Cloud mode (what you just installed) works great for most use cases:
Local mode is only recommended for:
AI Assistant → mcp-remote → MCP Server (Cloudflare Workers) →
Browser Rendering API → Figma Web → Design Data
AI Assistant → MCP Server (local.js) →
Chrome DevTools Protocol (port 9222) →
Figma Desktop → Your Plugin
See LOCAL_MODE_SETUP.md for installation.
Want to deploy your own instance on Cloudflare Workers?
Or via CLI:
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install && npm run deploy
📖 For complete deployment guide, custom domains, monitoring, and costs: See docs/SELF_HOSTING.md
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install
# For cloud mode development
npm run dev
# For local mode development
npm run dev:local
# Build both modes
npm run build
# Build local mode only
npm run build:local
# Build cloud mode only
npm run build:cloudflare
# Run tests
npm test
# Run tests with coverage
npm test:coverage
# Run tests in watch mode
npm test:watch
How It Works:
Symptom: You see logs in Figma's console but not in the MCP
Cause: Your plugin ran BEFORE the MCP started monitoring (e.g., before restarting your AI client)
Solution:
figma_get_status to confirm monitoring is activefigma_get_console_logs to retrieve themBest Practice Workflow:
| Problem | Solution |
|---|---|
| "FIGMA_ACCESS_TOKEN not configured" | Add token to MCP config (Step 2) |
| "Failed to connect to browser" | Wait 10-30s (cloud mode cold start) or check LOCAL_MODE_SETUP.md |
| Console tools work, design tools don't | You need to add FIGMA_ACCESS_TOKEN |
| Variables API 403 error | Enterprise plan required - MCP auto-falls back to Styles |
| Tools are slow | Normal for cloud mode first request (10-30s), then faster |
📖 For complete troubleshooting guide with detailed solutions: See docs/TROUBLESHOOTING.md
See docs/ROADMAP.md for full roadmap.
Contributions welcome! Please see CONTRIBUTING.md for guidelines.
MIT - See LICENSE file for details.
Please log in to share your review and rating for this MCP.
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://figma-console-mcp.southleft.com/sse"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<YOUR_FIGMA_ACCESS_TOKEN>"
}
}
}
}claude mcp add figma-console npx -y mcp-remote https://figma-console-mcp.southleft.com/sseExplore related MCPs that share similar capabilities and solve comparable challenges
by zed-industries
A high‑performance, multiplayer code editor designed for speed and collaboration.
by modelcontextprotocol
Model Context Protocol Servers
by modelcontextprotocol
A Model Context Protocol server for Git repository interaction and automation.
by modelcontextprotocol
A Model Context Protocol server that provides time and timezone conversion capabilities.
by cline
An autonomous coding assistant that can create and edit files, execute terminal commands, and interact with a browser directly from your IDE, operating step‑by‑step with explicit user permission.
by continuedev
Enables faster shipping of code by integrating continuous AI agents across IDEs, terminals, and CI pipelines, offering chat, edit, autocomplete, and customizable agent workflows.
by upstash
Provides up-to-date, version‑specific library documentation and code examples directly inside LLM prompts, eliminating outdated information and hallucinated APIs.
by github
Connects AI tools directly to GitHub, enabling natural‑language interactions for repository browsing, issue and pull‑request management, CI/CD monitoring, code‑security analysis, and team collaboration.
by daytonaio
Provides a secure, elastic infrastructure that creates isolated sandboxes for running AI‑generated code with sub‑90 ms startup, unlimited persistence, and OCI/Docker compatibility.