Figma Console MCP Figma Console MCP v1.36.0 introduces a target lock feature for parallel work, allowing AI agents to pin an active Figma file so commands do not route to the wrong file. The Model Context Protocol server gives AI assistants full access to Figma for design extraction, creation, debugging, and bidirectional token sync, with 112 tools available via NPX or Local Git, 101 via Cloud Mode, and 9 via Remote SSE. Your design system as an API.Model Context Protocol server that bridges design and developmentβ€”giving AI assistants complete access to Figma forextraction,creation,debugging, andbidirectional token sync. πŸ†• Target Lock for Parallel Work v1.36.0 : figma navigate now takes a lock: true flag that pins the active file β€” so an AI agent can keep working in one Figma file while you work in another, without commands silently routing to the wrong file. New connections, reconnects, and your own selection/page changes in other files no longer move the target; the pin auto-releases if that file disconnects. figma list open files reports a targetLocked flag for a pre-write guard. Server-only release β€”no plugin re-import needed. See what's new β†’ Figma Console MCP connects AI assistants like Claude to Figma, enabling: 🎨 Design system extraction - Pull variables, components, and styles πŸ” Bidirectional token sync - Export Figma variables to DTCG JSON legacy or 2025.10 dialect + 9 more formats; push code-side edits back to Figma with full apply β€” creates, renames, alias re-targeting, and replace-gated deletes. Replaces Style Dictionary and Tokens Studio's export pipeline. πŸ“Έ Visual debugging - Take screenshots for context ✏️ Design creation - Create UI components, frames, and layouts directly in Figma β€” including one-call component-set creation from a variant axes matrix πŸ”§ Variable management - Create, update, rename, and delete design tokens πŸ•° Version history & time-series awareness - List versions, diff snapshots, generate markdown changelogs, trace property/variant introduction via binary-search blame ⚑ Real-time monitoring - Watch console logs from the Desktop Bridge plugin πŸ“Œ FigJam boards - Create stickies, flowcharts, tables, and code blocks on collaborative boards 🎞️ Slides presentations - Build and manage Figma Slides decks programmatically β™Ώ Accessibility scanning - 14 WCAG design checks with conformance level tagging, component scorecards, axe-core code scanning, design-to-code parity πŸ›‘ Cross-MCP identity - Every tool response carries mcp: "figma-console-mcp" and errors are prefixed figma-console-mcp so attribution stays unambiguous in agents running multiple Figma MCPs ☁️ Cloud Write Relay - Web AI clients Claude.ai, v0, Replit can design in Figma via cloud pairing πŸ”„ Four ways to connect - Remote SSE, Cloud Mode, NPX, or Local Git First, decide what you want to do: | I want to... | Setup Method | Time | |---|---|---| Create and modify designs with AI | | Design from the web Claude.ai, v0, Replit, Lovable Cloud Mode -cloud-mode-web-ai-clients Contribute to the project Local Git Setup for-contributors-local-git-mode Just explore my design data read-only Remote SSE -remote-sse-read-only-exploration | 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 | βœ… | ❌ | ❌ | | Desktop Bridge plugin | βœ… | βœ… | ❌ | | Requires Node.js | Yes | No | No | Total tools available | 112 | 101 | 9 | Bottom line:Remote SSE isread-onlywith 9 tools.Cloud Modeunlocks write access 101 tools from web AI clients without Node.js. NPX/Local Git gives the full 112 tools with real-time monitoring. Best for: Designers who want full AI-assisted design capabilities. What you get: All 112 tools including design creation, variable management, and component instantiation. - Node.js 18+ β€” Check with node --version Download https://nodejs.org - Figma Desktop installed not just the web app - An MCP client Claude Code, Cursor, Windsurf, Claude Desktop, etc. - Go to Manage personal access tokens https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens in Figma Help - Follow the steps to create a new personal access token - Enter description: Figma Console MCP - Set scopes: File content Read , File versions Read , Variables Read , Comments Read and write Copy the token β€” you won't see it again starts with figd 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 Cursor / Windsurf / Claude Desktop: Add to your MCP config file see Where to find your config file -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" } } } } 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 | Tip for designers:The ~ symbol means yourhome 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. Desktop Bridge Plugin: - Open Figma Desktop normally no special flags needed and open a file - Go to Plugins β†’ Development β†’ Import plugin from manifest... - Select ~/.figma-console-mcp/plugin/manifest.json stable path, auto-created by the MCP server - Run the plugin in your Figma file β€” it scans ports 9223–9232 and connects automatically to your running MCP server 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β€” typically when the plugin adds a new method the server needs e.g. v1.22.4, v1.10.0 . For most upgrades the new server stays wire-compatible with the previous plugin, and re-importing isrequiredonly when a release notes entry says sooptional: 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. Restart your MCP client to load the new configuration. 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 Best for: Developers who want to modify source code or contribute to the project. What you get: Same 112 tools as NPX, plus full source code access. Clone and build git clone https://github.com/southleft/figma-console-mcp.git cd figma-console-mcp npm install npm run build:local Add to your config file see Where to find your config file -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 step-3-connect-to-figma-desktop above. Best for: Quickly evaluating the tool or read-only design data extraction. What you get: 9 read-only tools β€” view data, take screenshots, read logs, design-code parity. Cannot create or modify designs. - Open Claude Desktop β†’ Settings β†’ Connectors - Click "Add Custom Connector" - Enter: Name: Figma Console Read-Only URL: https://figma-console-mcp.southleft.com/sse - Click "Add" β€” Done βœ… OAuth authentication happens automatically when you first use design system tools. Claude Code's native⚠️ Known Issue: --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 -npx-setup-recommended instead of Remote SSE. { "mcpServers": { "figma-console": { "command": "npx", "args": "-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse" } } } Ready for design creation? Follow the NPX Setup -npx-setup-recommended guide above, or try Cloud Mode -cloud-mode-web-ai-clients if you don't want to install Node.js. Best for: Using Claude.ai, v0, Replit, or Lovable to create and modify Figma designs β€” no Node.js required. What you get: 101 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. - Figma Personal Access Token β€” Create one here https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens starts with figd - Figma Desktop with the Desktop Bridge plugin installed see Desktop Bridge setup step-3-connect-to-figma-desktop - A web AI client that supports MCP Claude.ai, Lovable, v0, Replit, etc. 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. Open the Desktop Bridge plugin in Figma Desktop Plugins β†’ Development β†’ Figma Desktop Bridge Tell your AI assistant: Connect to my Figma plugin The AI gives you a 6-character pairing code expires in 5 minutes In the plugin: Toggle "Cloud Mode" β†’ enter the code β†’ click Connect You're paired Full write access is now available 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 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. | Feature | NPX Recommended | Cloud Mode | Local Git | Remote SSE | |---|---|---|---|---| Setup time | ~10 minutes | ~5 minutes | ~15 minutes | ~2 minutes | Total tools | 112 | 101 | 112 | 9 read-only | 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 112 tools. 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 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 - Visit https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens - Generate token with scopes: File content Read , File versions Read , Variables Read , Comments Read and write - Add to MCP config as FIGMA ACCESS TOKEN environment variable figma get status - Check WebSocket bridge connection and file context figma diagnose - Designer-readable health check + setup guidance figma reconnect - Force reconnect to the Desktop Bridge plugin figma navigate - Switch the active file target among connected plugins Local , or navigate the cloud headless browser Remote/Cloud 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 figma take screenshot - Capture UI screenshots figma get design system kit - Full design system in one call β€” tokens, components, styles, visual specs 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 figma get library component by key - Resolve any component key to full properties + variants + visual specs β€” without needing the source library file's URL. Works for both COMPONENT SET and standalone COMPONENT keys. Adaptive compression at 500KB. figma get library components - Discover all components in a library file requires library file URL/key figma get library variables - List every variable from team libraries the current file has subscribed. Works on every Figma plan β€” uses the Plugin API path, not the Enterprise-only REST endpoint. Filter by libraryName , collectionName , or resolvedType . figma import library variable - Import a library variable into the current file. Returns a local id ready to pass to figma set fills / figma update variable / any variable-binding tool. figma pair plugin - Generate a pairing code to connect a Desktop Bridge plugin via the cloud relay 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 figma create component set - Create a component set with variants in one declarative call - Generate every variant combination from an axes matrix e.g. { State: "default", "hover", "disabled" , Size: "sm", "lg" } β†’ 6 variants off a base component, or combine existing components Prop=Value variant naming, combineAsVariants under the hood, optional auto-arranged labeled grid- Returns each variant's key, ready for figma instantiate component - Generate every variant combination from an axes matrix e.g. figma arrange component set - Organize variants into professional component sets - Convert multiple component variants into a proper Figma component set - Applies native purple dashed border visualization automatically - Creates white container frame with title, row labels, and column headers - Row labels vertically centered with each grid row - Column headers horizontally centered with each column - Use natural language like "arrange these variants" or "organize as component set" figma set description - Document components with rich descriptions - Add descriptions to components, component sets, and styles - Supports markdown formatting for rich documentation - Descriptions appear in Dev Mode for developers figma create slot - Add a slot to a component via the GA createSlot API β€” the linked SLOT property is created automatically; works on standalone components and variants inside a component set figma get slots - List slots on a component, component set aggregated across variants , or instance β€” ids, names, property keys, dimensions, and current children figma append to slot - Populate an instance's slot by cloning an existing node or creating new content setProperties rejects slot values by design β€” this is the population path figma reset slot - Clear a slot's content on an instance figma add slot property - Retrofit an existing frame as a slot via a manual SLOT property binding, with description and preferredValues figma check design parity - Compare Figma component specs against code implementation, producing a scored diff report with actionable fix items figma generate component doc - Generate platform-agnostic markdown documentation by merging Figma design data with code-side info figma export tokens - Export Figma variables to design token files in your codebase. Canonical DTCG JSON legacy hex dialect by default, or DTCG 2025.10 object colors/dimensions via dtcgDialect: "2025" plus CSS, Tailwind v4/v3, SCSS, TS, JSON, Style Dictionary, and Tokens Studio formats. Diff-aware merge against existing source files only writes what changed . tokens.config.json autodiscovery means zero-arg calls after first setup. Scopes and codeSyntax metadata round-trip via $extensions . Replaces Style Dictionary and Tokens Studio's export pipeline for popular styling methods. figma import tokens - Push code-side token edits back to Figma with a full apply phase. Diffs against current Figma state, then applies value updates, creates missing collections/variables, applies renames , writes real alias VARIABLE ALIAS references, and β€” only under strategy: "replace" β€” deletes Figma-only variables. Round-trip safe β€” Figma variable IDs preserved in DTCG $extensions "figma-console-mcp" so renames on either side don't create duplicates. Accepts both DTCG dialects. Dry-run strategy for safe previews. In Cloud Mode, pass tokens inline via payload or files no local filesystem access . 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 figma batch create variables - Create up to 100 variables in one call 10-50x faster figma batch update variables - Update up to 100 variable values in one call figma setup design tokens - Create complete token system collection + modes + variables atomically β€” values accept DTCG brace references "{color.blue.600}" that resolve to real variable aliases figjam create sticky - Create a sticky note with color options figjam create stickies - Batch create up to 200 stickies figjam create connector - Connect nodes with labeled connector lines figjam create shape with text - Create flowchart shapes diamond, ellipse, etc. figjam create table - Create tables with cell data figjam create code block - Add code snippets with syntax highlighting figjam auto arrange - Arrange nodes in grid, horizontal, or vertical layouts figjam get board contents - Read all content from a FigJam board figjam get connections - Read the connection graph flowcharts, relationships figma list slides - List all slides with IDs, positions, and skip status figma get slide content - Get the full content tree of a slide figma get slide grid - Get the 2D grid layout of the presentation figma get slide transition - Read transition settings for a slide figma get focused slide - Get the currently focused slide figma create slide - Create a new blank slide figma delete slide - Delete a slide from the presentation figma duplicate slide - Clone an existing slide figma reorder slides - Reorder slides via new 2D grid layout figma set slide transition - Set transition effects 22 styles, 8 curves figma skip slide - Toggle whether a slide is skipped in presentation mode figma add text to slide - Add text to a slide with custom fonts, colors, alignment, and wrapping figma add shape to slide - Add rectangle or ellipse shapes with color figma set slide background - Set a slide's background color creates or updates figma get text styles - Get all local text styles with IDs, fonts, and sizes figma set slides view mode - Toggle grid vs. single-slide view figma focus slide - Navigate to a specific slide 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 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 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 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 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 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 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 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 Take a screenshot of the current Figma canvas Navigate to this file and capture what's on screen 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. 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. 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 | 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. | 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. 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. 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. - Open Figma Desktop normal launch β€” no debug flags needed - Go to Plugins β†’ Development β†’ Import plugin from manifest... - Select figma-desktop-bridge/manifest.json from the figma-console-mcp directory - Run the plugin in your Figma file β€” it auto-connects via WebSocket scans ports 9223–9232 - 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 Read Operations: - Variables without Enterprise API - Reliable component descriptions bypasses API bugs - Multi-mode support Light/Dark/Brand variants - Real-time selection tracking and document change monitoring 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 - The MCP server communicates via WebSocket through the Desktop Bridge plugin - The server tries port 9223 first, then automatically falls back through ports 9224–9232 if needed - The plugin scans all ports in the range and connects to every active server it finds - All 112 tools work through the WebSocket transport 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: FIGMA WS PORT β€” Override the preferred WebSocket port default: 9223 . The server will fall back through a 10-port range starting from this value if the preferred port is occupied. FIGMA WS HOST β€” Override the WebSocket server bind address default: localhost . Set to 0.0.0.0 when running inside Docker so the host machine can reach the MCP server. 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 -cloud-mode-web-ai-clients 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. 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. 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. - The server tries port 9223 first the default - If that port is already taken, it automatically tries 9224 , then 9225 , and so on up to 9232 - The Desktop Bridge plugin in Figma connects to all active servers simultaneously - Every server instance receives real-time events selection changes, document changes, console logs figma get status shows which port you're on and lists other active instances | 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 | Nothing. Multi-instance support is fully automatic: - Each MCP server claims the next available port in the range - The Desktop Bridge plugin scans all ports and connects to every active server - Orphaned processes from closed tabs are automatically cleaned up on startup - No manual port management β€” the plugin already scans the whole range 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. 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 https://github.com/anthropics/anthropic-cookbook/tree/main/misc/model context protocol/ext-apps . Built with the official @modelcontextprotocol/ext-apps https://www.npmjs.com/package/@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. 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: - Browse all tokens organized by collection with expandable sections - Filter by type Colors, Numbers, Strings and search by name/description - Per-collection mode columns Light, Dark, Custom matching Figma's Variables panel - Color swatches, alias resolution, and click-to-copy on any value - Works without Enterprise plan via Desktop Bridge local mode 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: - Overall weighted score 0–100 with six category gauges: Naming, Tokens, Components, Accessibility, Consistency, Coverage - Expandable category sections with individual findings, severity indicators, and actionable details - Diagnostic locations linking findings to specific variables, components, or collections - Tooltips explaining each check's purpose and scoring criteria - Refresh button to re-run the audit without consuming AI context - Pure scoring engine with no external dependencies β€” all analysis runs locally 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. Planned MCP Apps: Component Gallery β€” Visual browser for searching and previewing components with variant exploration Style Inspector β€” Interactive panel for exploring color, text, and effect styles with live previews Variable Diff Viewer β€” Side-by-side comparison of token values across modes and branches 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. - Complete setup guide for all MCP clients Setup Guide /southleft/figma-console-mcp/blob/main/docs/SETUP.md - Deploy your own instance on Cloudflare Self-Hosting /southleft/figma-console-mcp/blob/main/docs/SELF HOSTING.md - How it works under the hood Architecture /southleft/figma-console-mcp/blob/main/docs/ARCHITECTURE.md - Configure OAuth for self-hosted deployments OAuth Setup /southleft/figma-console-mcp/blob/main/docs/OAUTH SETUP.md - Common issues and solutions Troubleshooting /southleft/figma-console-mcp/blob/main/docs/TROUBLESHOOTING.md Figma Console MCP This Project - Debugging, data extraction, and design creation - βœ… Real-time console logs from Figma plugins - βœ… Screenshot capture and visual debugging - βœ… Error stack traces and runtime monitoring - βœ… Raw design data extraction JSON - βœ… FigJam board creation and reading stickies, flowcharts, tables - βœ… 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. Current Status: v1.36.0 Stable - Production-ready. Latest: 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 server-only, no plugin re-import . 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, 112 tools Local / 101 tools Cloud / 9 tools Remote read-only , Comments API, cross-MCP identity disambiguation, and MCP Apps. Recent Releases: - v1.36.0 - Target lock for multi-file parallel work. figma navigate gains a lock: true flag that pins the active file β€” new connections, reconnects, and the user's own selection/page changes in other files no longer move the command target, so an agent can safely write to one file while the user works in another. Auto-releases when the pinned file disconnects or navigates away; figma list open files reports a targetLocked flag for pre-write guards. Server-only β€” no plugin re-import needed. - v1.35.0 - Figma Slots write support, closing 29 https://github.com/southleft/figma-console-mcp/issues/29 the tracker's most-requested feature via community PR 77 https://github.com/southleft/figma-console-mcp/pull/77 by @simonesalvucci, updated to the GA API. Five new tools: figma create slot slot + auto-linked SLOT property; variants inside component sets supported β€” the beta restriction was lifted at GA , figma get slots , figma append to slot clone or create content into instance slots; snaps clones to the slot origin , figma reset slot , and figma add slot property retrofit an existing frame as a slot . Hardened by live validation: VARIANT defaultValue passthrough restored Figma requires non-empty , destructive-path reorder in the append handler content validated before clearExisting empties anything , relay whitelist fix for slot payloads. Plugin re-import required code.js + ui.html changed . - v1.34.0 - Bidirectional Token Sync v2 + DTCG 2025.10. figma import tokens now applies the complete diff plan: missing collections and variables are created with modes, inferred/recorded types, and values set in dependency order β€” aliases in a second pass , token-path renames route to the update phase by round-trip variable ID no more create+delete pairs that would permanently destroy the original under replace , reference values write real { type: "VARIABLE ALIAS", id } payloads via a four-tier resolver, and deletes are strictly gated behind strategy: "replace" . figma export tokens gains dtcgDialect: "2025" object-form colors from full-precision floats, object dimensions while the legacy default stays byte-identical; import accepts both dialects unconditionally with dialect-insensitive diff normalization. Variable scopes + codeSyntax round-trip through $extensions "figma-console-mcp" . figma setup design tokens accepts DTCG brace references "{color.blue.600}" that resolve to real aliases, including forward references. New tool figma create component set builds a variant set from an axes matrix or combines existing components with Prop=Value naming, optional auto-arranged grid, and variant keys in the response β€” with count-scaled timeouts and rollback on failure. Plugin re-import required code.js + ui.html changed β€” the component-set handler and relay . 183 tests across the token/write-tools suites. - v1.33.2 - Version-handshake false-positive fix. The v1.33.0 handshake compared the plugin's reported version against the server's package version, so server-only releases like the v1.33.1 dependency sweep flagged every up-to-date plugin as stale and pushed the re-import banner for files that hadn't changed. The server now compares against the PLUGIN VERSION embedded in the figma-desktop-bridge/code.js it ships β€” exactly what a re-import would install β€” and PLUGIN VERSION itself now means "last release in which plugin files changed" release tooling bumps it only when figma-desktop-bridge/ actually changed since the last tag . figma get status gains transport.websocket.bundledPluginVersion ; figma diagnose blames the right version. No new tools, no plugin re-import required one-time exception: if you re-imported at v1.33.1, the banner appears once more β€” clear it with one final re-import . 1245 tests passing 9 new . - v1.33.1 - Security dependency sweep. All runtime and critical npm audit alerts resolved via in-range bumps ws 8.21.0, hono 4.12.27, undici 7.28.0, handlebars 4.7.9 β€” the lone critical, dev-only β€” plus lodash , path-to-regexp , basic-ftp , fast-uri , vite . wrangler deliberately held at 4.72.0 because newer versions require Node β‰₯22; the only residual audit findings are inside wrangler/miniflare's dev-time toolchain, which never ships in the npm package or Worker bundle. Supersedes dependabot PRs 81/ 82/ 84. No code changes, no API changes, no plugin re-import. 1236 tests passing unchanged. - v1.33.0 - Connection UX overhaul + full-codebase audit. The plugin's status pill now derives from live connection state instead of Figma's variables loading it used to glow green with zero MCP servers connected ; HTTP /health auto-discovery reconnects restarted servers automatically including one-dead-among-live, previously a permanent dead end ; a version handshake banners the plugin UI when a re-import is needed and surfaces the mismatch in figma get status / figma diagnose ; cloud pairing config survives plugin reopen and its status line is derived + labeled no more orphaned "Disconnected" under a green pill ; all plugin copy is designer-language. The audit fixed 33 verified issues: lossless DTCG multi-mode round-trips, set-qualified cross-collection aliases, TIMING/EASING mapped to DTCG duration / cubicBezier , two cache-poisoning bugs the "search returns 0 components" reports , a CSWSH origin bypass startsWith β†’ exact match , post-sleep reaper kill-safety plus a shell-free /health probe with os.devNull so Windows curl can't false-negative a healthy sibling , branch-URL correctness across REST tools, and bridge-first figma take screenshot . figma arrange component set now rearranges variants in place so placed instances survive. No new tools; plugin re-import required code.js + ui.html changed β€” and the new handshake makes this the last one you have to discover on your own . 1236 tests passing 33 new . - v1.32.1 - Documentation-generator fix reported by Robin Di Capua: figma generate component doc documented colors as raw hex with β€” in the Figma Variable column even when fills/strokes were bound to variables, while spacing tokens documented correctly. Two root causes β€” an idβ†’name lookup that read the wrong keys .id / .name instead of variableId / variableName , and variable names only ever being sourced from the Enterprise-only REST /variables/local endpoint 403 elsewhere . The generator now resolves names via the Desktop Bridge Plugin API works on every plan and threads them through the States, Color Tokens, and Spacing tables, so real token names like color/content/default and spacing/1 appear. No new tools, no arg-shape changes, no plugin re-import required. 1203 tests passing. - v1.32.0 - Accessibility-audit correctness fix reported by Isabella a11y collaborator : figma lint design was flagging line height below 1.5Γ— as an accessibility failure on hundreds of components. That misreads WCAG 1.4.12 Text Spacing , which requires content to support user spacing overrides without loss β€” not that designs ship at 1.5Γ— β€” so a sub-1.5 line height is not a conformance failure. Line/paragraph-spacing checks are now scoped to multi-line text single-line labels and buttons exempt ; readability hints text-size , line-height , letter-spacing , paragraph-spacing are decoupled from the wcag group into an opt-in best-practice group, so the default audit 'wcag','design-system','layout' and rules: 'wcag' return genuine conformance only; and a new code-side text-spacing-support advisory in figma scan code accessibility flags fixed-px typography β€” where 1.4.12/1.4.4 are actually verifiable. No new tools, no arg-shape changes; plugin re-import required to pick up the new audit behavior bridge protocol unchanged, so an un-updated plugin stays compatible . 1196 tests passing. - v1.31.0 - Fixes the most-reported reliability bug: the Desktop Bridge connection dropping and staying down until you closed the plugin, restarted your MCP client, or killed ports by hand. Root cause was zombie MCP server processes squatting the WebSocket port range 9223–9232 after a bad shutdown. The reaper now escalates SIGTERM β†’ SIGKILL a hung server that ignores graceful shutdown can no longer survive , sweeps the range every 5 minutes via an unref 'd periodic reaper, and a shutdown backstop prevents a server from zombifying in the first place. The redesigned Desktop Bridge plugin adds an auto-reconnect watchdog re-probes every ~12s while disconnected , a context-aware Pause / Resume / Reconnect button, and a live server-count badge. No new tools; plugin re-import required bridge ui.html + code.js changed . 1190 tests passing, including an integration test that spawns a real SIGTERM -ignoring process and asserts the reaper kills it. - v1.30.0 - Native variable binding + typography in the structured write tools, closing the Plugin API gaps that used to force raw figma execute . figma set fills / figma set strokes accept a variableId to bind a fill/stroke to a color variable via setBoundVariableForPaint any plan, via the bridge . figma set text gains fontFamily / fontStyle with space-insensitive normalization SemiBold β†’ Semi Bold and graceful Regular fallback. figma instantiate component pre-loads instance text fonts before applying overrides fixes silently-skipped text overrides on non-Regular weights and returns a warnings array for failed overrides. Also fixes a mixed-font crash in figma set text and a ui.html relay that was dropping new message fields. No new tools; plugin re-import required bridge ui.html + code.js changed . Validated live; 1185 tests passing. - v1.29.2 - Bug fix: figma generate component doc now renders Figma component descriptions faithfully and reliably tags atomic-design level. Single- headings in descriptions render as real sections Usage Guidelines, Implementation Considerations, Accessibility Requirements, Content Configuration instead of leaking as - Heading list items; frontmatter description takes the first sentence instead of truncating on the word "Accessibility"; the generated Figma URL no longer doubles ?node-id= ; and the component's atomic level atom/molecule/organism/template is auto-detected via a single ids=