Figma Console MCP Server
by
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 Overview
What is Figma Console MCP Server about?
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.
How to use Figma Console MCP Server?
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)
- Quit Figma Desktop completely.
- Relaunch with remote‑debugging enabled:
- macOS:
open -a "Figma" --args --remote-debugging-port=9222 - Windows:
start figma://--remote-debugging-port=9222
- macOS:
- Install the local MCP server (
npm install && npm run dev:local). - Run the Figma Variables Bridge plugin (located in
figma-variables-bridge/) to expose variables. - Use the same
npxcommand as cloud mode; the server will connect to the local Chrome DevTools endpoint.
Key Features
- Real‑time console log capture and streaming.
- Screenshot capture of the current canvas or UI.
- Extraction of variables, color/text/effect styles, components, and full file JSON.
- AI‑powered design‑system auditing (token coverage, naming consistency, compliance).
- Dual deployment: cloud (via Browser Rendering API) or local (via Chrome DevTools Protocol).
- 14 ready‑to‑use tool commands covering navigation, console, debugging, and design‑system data.
- Works with major AI clients (Claude, Cursor, Windsurf, Zed, Claude Desktop, etc.).
Use Cases
- Plugin debugging – capture errors, stack traces, and live console output while developing Figma plugins.
- Design‑system auditing – generate compliance reports, detect hard‑coded colors, unused variables, and naming issues.
- Data extraction – pull design tokens, component specifications, and full file structures for hand‑off to developers.
- Visual debugging – take screenshots to document UI states or troubleshoot visual issues.
- Remote collaboration – share live debugging sessions with teammates without installing Figma locally.
FAQ
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.
Figma Console MCP Server's README
Figma Console MCP Server
Model Context Protocol server that provides AI assistants with real-time console access, visual debugging, and design system extraction 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
- ⚡ 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
- Name:
- 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.
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_TOKENsetup
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:
start figma://--remote-debugging-port=9222
- macOS:
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-mcpwith the actual absolute path where you cloned the repo - Replace
figd_YOUR_TOKEN_HEREwith 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:
start figma://--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 | ❌ | ✅ | ✅ |
| Variables (no Enterprise) | ❌ | ✅ (via plugin) | ✅ (via plugin) |
| Reliable descriptions | ⚠️ (API bugs) | ✅ (via plugin) | ✅ (via plugin) |
| Source code access | ❌ | ❌ | ✅ |
| Distribution | URL | npm package | git clone |
🎯 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_TOKENenvironment variable
🛠️ Available Tools
All 14 tools work in both Remote and Local modes:
Navigation & Status
figma_navigate- Open Figma URLsfigma_get_status- Check connection status
Console Debugging
figma_get_console_logs- Retrieve console logsfigma_watch_console- Real-time log streamingfigma_clear_console- Clear log bufferfigma_reload_plugin- Reload current page
Visual Debugging
figma_take_screenshot- Capture UI screenshots
Design System Extraction
figma_get_variables- Extract design tokens/variablesfigma_get_component- Get component data (metadata or reconstruction spec)- Metadata format (default): Comprehensive documentation with properties, variants, and design tokens
- Reconstruction format: Node tree specification for programmatic component creation (compatible with Figma Component Reconstructor plugin)
figma_get_component_for_development- Component + imagefigma_get_component_image- Just the imagefigma_get_styles- Color, text, effect stylesfigma_get_file_data- Full file structurefigma_get_file_for_plugin- Optimized file data
📖 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
Visual Debugging
Take a screenshot of the current Figma canvas
Navigate to this file and capture what's on screen
🎨 Desktop Bridge Plugin (Local Mode Only)
The Figma Desktop Bridge plugin enables:
- ✅ Variables without Enterprise API
- ✅ Reliable component descriptions (bypasses API bugs)
- ✅ Multi-mode support (Light/Dark/Brand variants)
⚠️ 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: "Show me the primary font for [your theme]"
📖 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
💻 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
📄 License
MIT - See LICENSE file for details.
🔗 Links
Figma Console MCP Server Reviews
Login Required
Please log in to share your review and rating for this MCP.
Similar MCP Servers like Figma Console MCP Server
Explore related MCPs that share similar capabilities and solve comparable challenges
Git
Officialby modelcontextprotocol
A Model Context Protocol server for Git repository interaction and automation.
Zed
OfficialClientby zed-industries
A high‑performance, multiplayer code editor designed for speed and collaboration.
Everything
Officialby modelcontextprotocol
Model Context Protocol Servers
Time
Officialby modelcontextprotocol
A Model Context Protocol server that provides time and timezone conversion capabilities.
Cline
OfficialClientby 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.
Context7 MCP
Officialby upstash
Provides up-to-date, version‑specific library documentation and code examples directly inside LLM prompts, eliminating outdated information and hallucinated APIs.
Daytona
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.
Continue
OfficialClientby 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.
GitHub MCP Server
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.