Figma Console MCP Server

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

What is this?

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

• 🎨 Design system extraction - Pull variables, components, and styles
• 🧬 Codebase → design system extraction - Scan a production codebase, mine its de-facto styling into DTCG tokens with per-token provenance, scaffold a design-system package with a wired Storybook workshop, and gate it with deterministic fidelity evals — then round-trip the tokens into Figma variables (Local Mode)
• 🔁 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, and fold per-component design + git history into generated component docs
• ⚡ 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
• 🔍 Design-code parity & component docs - Deterministic comparison of a Figma component with its code (visual, spacing, typography, tokens, component API, accessibility), and generated component documentation with per-variant tokens and an optional design + git changelog
• 📋 Design-system health audits - Lighthouse-style scored audit across naming, tokens, component metadata, accessibility, consistency, and coverage — available as a plain tool for any MCP client (with per-finding auto-fix guidance) and as a visual dashboard app
• 🛡 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

⚡ Quick Start

Choose Your Setup

First, decide what you want to do:

| I want to... | Setup Method | Time | |--------------|--------------|------| | Create and modify designs with AI | NPX Setup (Recommended) | ~10 min | | Design from the web (Claude.ai, v0, Replit, Lovable) | Cloud Mode | ~5 min | | Contribute to the project | Local Git Setup | ~15 min | | Just explore my design data (read-only) | Remote SSE | ~2 min |

⚠️ Important: Capability Differences

| Capability | NPX / Local Git | Cloud Mode | Remote SSE | |------------|-----------------|------------|------------| | Read design data | ✅ | ✅ | ✅ | | Create components & frames | ✅ | ✅ | ❌ | | Edit existing designs | ✅ | ✅ | ❌ | | Manage design tokens/variables | ✅ | ✅ | ❌ | | FigJam boards (stickies, flowcharts) | ✅ | ✅ | ❌ | | Real-time monitoring (console, selection) | ✅ | ❌ | ❌ | | Codebase → design system extraction (figma_ds_*) | ✅ | ❌ | ❌ | | Desktop Bridge plugin | ✅ | ✅ | ❌ | | Requires Node.js | Yes | No | No | | Total tools available | 130 | 105 after pairing | Read-only subset |

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

🚀 NPX Setup (Recommended)

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

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

Prerequisites

• [ ] Node.js 18+ — Check with node --version (Download)
• [ ] Figma Desktop installed (not just the web app)
• [ ] An MCP client (Claude Code, Cursor, Windsurf, Claude Desktop, etc.)

Step 1: Get Your Figma Token

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

Step 2: Configure Your MCP Client

Claude Code (CLI):

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

OpenAI Codex (CLI):

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

Gemini CLI:

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

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

Cursor / Windsurf / Claude Desktop:

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

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

📂 Where to Find Your Config File

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

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

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

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

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

Step 3: Connect to Figma Desktop

Desktop Bridge Plugin:

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

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

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

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

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

Step 4: Restart Your MCP Client

Restart your MCP client to load the new configuration.

Step 5: Test It!

Check Figma status

Create a simple frame with a blue background

📖 Complete Setup Guide

For Contributors: Local Git Mode

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

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

Quick Setup

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

Configure Your MCP Client

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

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

Then follow NPX Steps 3-5 above.

📖 Complete Setup Guide

📡 Remote SSE (Read-Only Exploration)

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

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

Claude Desktop (UI Method)

1. Open Claude Desktop → Settings → Connectors
2. Click "Add Custom Connector"
3. Enter:

1. Click "Add" — Done! ✅

Claude Code

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

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

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

Other Clients (Cursor, Windsurf, etc.)

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

Upgrading to Full Capabilities

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

📖 Complete Setup Guide

☁️ Cloud Mode (Web AI Clients)

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

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

Prerequisites

• [ ] Figma Personal Access Token — Create one here (starts with figd_)
• [ ] Figma Desktop with the Desktop Bridge plugin installed (see Desktop Bridge setup)
• [ ] A web AI client that supports MCP (Claude.ai, Lovable, v0, Replit, etc.)

Step 1: Add the MCP Connector

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

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

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

Step 2: Pair the Plugin

1. Open the Desktop Bridge plugin in Figma Desktop (Plugins → Development → Figma Desktop Bridge)
2. Tell your AI assistant:

Connect to my Figma plugin

1. The AI gives you a 6-character pairing code (expires in 5 minutes)
2. In the plugin: Toggle "Cloud Mode" → enter the code → click Connect
3. You're paired! Full write access is now available

What You Can Do

Once paired, use natural language to design:

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

How It Works

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

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

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

📖 Complete Setup Guide

📊 Installation Method Comparison

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

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

📖 Complete Feature Comparison

🎯 Test Your Connection

After setup, try these prompts:

Basic test (all modes):

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

Design system test (requires auth):

Get design variables from [your Figma file URL]

Cloud Mode test:

Connect to my Figma plugin

Plugin test (Local Mode only):

Show me the primary font for [your theme name]

🔐 Authentication

Remote Mode - OAuth (Automatic)

When you first use design system tools:

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

Local Mode - Personal Access Token (Manual)

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

🛠️ Available Tools

Status & Diagnostics

• 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_list_open_files - List files connected through the Desktop Bridge and which one is active (Local Mode)

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 - Export an image of a page or node (Desktop Bridge first, REST fallback)
• figma_capture_screenshot - Render a node from the plugin runtime, reflecting changes that haven't reached the REST API yet

👁️ Real-Time Awareness (Local Mode only)

• figma_get_selection - The nodes currently selected in Figma
• figma_get_design_changes - Buffered document-change events, for polling what changed

Design System Extraction

• 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_design_system_summary / figma_get_token_values - Compact design-system overview and variable values by mode (Local Mode only)
• figma_audit_design_system_report - Scored health audit for any MCP client — six-category report (naming, tokens, metadata, accessibility, consistency, coverage) with per-finding remediation ("can this MCP fix it?"), chunked per-category drill-down, live-first data with disclosed source, 5-minute cache

📚 Shared Library Inspection

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

☁️ Cloud Relay

• figma_pair_plugin - Generate a pairing code to connect a Desktop Bridge plugin via the cloud relay

✏️ Design Creation (Local Mode + Cloud Mode)

• figma_execute - Power tool: Run any Figma Plugin API code to create designs

• figma_execute_across_files - Local Mode only. Run the same script in several Desktop Bridge-connected files at once, concurrently, returning a per-file result map — for cross-file consistency checks and fixes across a multi-file design system, replacing "open file, run plugin, repeat per file"

• figma_create_component_set - Create a component set with variants in one declarative call

• figma_arrange_component_set - Organize variants into professional component sets

• figma_set_description - Document components with rich descriptions

🧩 Figma Slots (Local Mode + Cloud Mode)

• 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

🎬 Motion (Local Mode + Cloud Mode)

• figma_get_animations - Read a layer's animation styles, keyframe tracks and timeline, with CSS easings and token bindings
• figma_apply_animation - Animate a layer with a Figma preset (Opacity, Scale, Position, Rotation, Size, Path, TextStagger), a custom animation style, or manual keyframes for any animatable property, paint color or effect. Easing and duration can bind to EASING/TIMING variables
• figma_remove_animation - Remove one animation style, one keyframe track, or everything
• figma_manage_animation_styles - Build reusable motion styles: list Figma's presets and their options, and create, update or delete custom animation styles
• figma_export_animation - Export an animated frame as MP4, GIF or WebM

🧱 Code Layers (Local Mode + Cloud Mode)

• figma_get_code_layers - Find Figma code layers on a page or across the file, with position, size and linked dev resources. Figma's APIs don't expose code-layer source, so creating and editing them stays in Figma or Figma's own MCP (send_code_to_figma)

✨ Shaders (Local Mode + Cloud Mode)

• figma_list_shaders - List shaders applied in the file (with each property's name, type and default, and the layers using them) and shaders from your libraries
• figma_apply_shader - Apply a shader or change its properties by name ({turbulence: 40, cloudColor: '#E8F4FF'}) on fills, strokes or effects, including variable bindings. Shaders themselves are created in Figma or with Figma's own MCP

📐 Layout (Local Mode + Cloud Mode)

• figma_set_layout - Auto layout and grid layout in one call: direction, gaps, padding, alignment including SPACE_EVENLY/SPACE_AROUND, wrap, sizing, and grid tracks written CSS-style ('240px 1fr 1fr', repeat(3, 1fr)) with child placement and spans

🔍 Design-Code Parity (All Modes)

• 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; the optional history parameter adds a changelog from Figma version history and git log

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

• figma_search_components / figma_get_component_details - Find components (local + library) and get their variants, properties, and keys (Local Mode only)
• figma_instantiate_component / figma_set_instance_properties - Place instances and set their TEXT, BOOLEAN, INSTANCE_SWAP, and VARIANT properties
• figma_add_component_property / figma_edit_component_property / figma_delete_component_property - Manage component properties
• figma_create_child, figma_move_node, figma_resize_node, figma_clone_node, figma_rename_node, figma_delete_node, figma_set_text, figma_set_fills, figma_set_strokes, figma_set_image_fill - Structured node edits, including variable binding on fills and strokes, OKLCH/Display P3 and other CSS colors on fills and strokes, and text wrap style and variable-font axes on text
• figma_get_component_for_development_deep - Full component tree with resolved token names and instance references
• figma_analyze_component_set - A variant set as a state machine, with CSS pseudo-class mappings and per-variant diffs

♿ Accessibility (Local Mode + Cloud Mode)

• figma_lint_design - WCAG and design-system lint on the canvas, with AA and best-practice level tagging
• figma_audit_component_accessibility - Component scorecard: state coverage, focus indicators, color-blind simulation
• figma_scan_code_accessibility - axe-core scan of HTML

📝 Annotations & Comments

• figma_get_annotations / figma_set_annotations / figma_get_annotation_categories - Read and write designer annotations (Local Mode + Cloud Mode)
• figma_get_comments / figma_post_comment / figma_delete_comment - File comments, optionally pinned to a node

🕰 Version History

• figma_get_file_versions / figma_get_file_at_version - List versions and snapshot a file or node at a past version
• figma_diff_versions / figma_get_changes_since_version - Structured diffs, including component property and binding changes
• figma_generate_changelog - Markdown changelog for release notes
• figma_blame_node - Find when, and by whom, a property or variant was introduced

🔁 Token Sync (Local Mode + Cloud Mode)

• 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).

🧬 Design System Extraction (Local Mode only)

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

• figma_ds_analyze - Scan one or more production app codebases — framework/styling/vendor-layer detection; a usage-ranked component inventory classified vendored / wrapped / pure-vendor / bespoke, with prop contracts, variant inference from real call sites, and duplicate detection; iconography + typography capture; and architecture classification (atomic levels, specializations like FollowButton → Button, missing generic primitives — the "UI kit vs design system" analysis)
• figma_ds_extract_tokens - Mine the app's styling into DTCG tokens. Declared intent first — multi-mode CSS custom properties (.dark / [data-theme] and other conventions), SCSS variables, Tailwind config values, shadcn HSL triples — plus Tailwind utility-class frequency mining valued from the app's own theme, and frequency-promoted recurring raw values. Every token carries provenance (source file:line, confidence, frequency) in $extensions; the output imports straight into Figma variables via figma_import_tokens
• figma_ds_scaffold - Generate the design-system package — package skeleton, token files via the shared formatter engine, token/typography/iconography showcase docs pages, framework peer deps, and a workflow README
• figma_ds_setup_storybook - Wire a freshly-initialized Storybook workshop to the extraction — a preview stylesheet carrying the source app's @theme mapping, custom @utility definitions, @layer base, and @font-face rules; self-hosted font copying; config patches (Tailwind vite plugin, automatic JSX runtime); and a theme toolbar built from the extracted modes
• figma_ds_extract_component - Deep-extract one component for porting — source, prop contract, observed call-site variants, style touchpoints, and a ready-to-adapt CSF3 story scaffold
• figma_ds_verify - Deterministic fidelity evals — DTCG parse + alias integrity, quoted-CSS-expression scan, workshop var() resolution, structure + porting coverage, and Figma round-trip readiness
• figma_ds_status - Read or record porting progress, persisted across sessions

🔧 Variable Management (Local Mode + Cloud Mode)

• 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 Board Tools (Local Mode + Cloud Mode)

• 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_create_section - Group board content in a section
• 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)

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

• 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

📖 Example Prompts

Cloud Mode (Web AI Clients)

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

Plugin Debugging

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

Design System Extraction

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

Design Creation (Local Mode + Cloud Mode)

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

Variable Management (Local Mode + Cloud Mode)

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

Design-Code Parity

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

FigJam Boards

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

Slides Presentations

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

Visual Debugging

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

📖 More Use Cases & Examples

🎨 AI-Assisted Design Creation

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

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

What's Possible

Create original designs from scratch:

Design a login card with email and password fields, a "Forgot password?" link,
and a primary Sign In button. Use 32px padding, 16px border radius, and subtle shadow.

Leverage existing component libraries:

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

Generate complete page layouts:

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

How It Works

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

Who Benefits

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

Example Workflows

Brand New Design:

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

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

Component Composition:

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

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

Design Iteration:

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

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

Visual Validation

The AI automatically follows a validation workflow after creating designs:

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

🎨 Desktop Bridge Plugin (Recommended Connection)

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

Setup

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

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

📖 Desktop Bridge Documentation

Capabilities

Read Operations:

• 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

• 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

How the Transport Works

• 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 130 tools work through the WebSocket transport

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.
• FIGMA_MCP_HTTP_PORT — Also serve MCP over Streamable HTTP at http://127.0.0.1:/mcp, so other local clients can share this server's Figma connection. Off by default. See Sharing one server over HTTP.
• FIGMA_MCP_HTTP_TOKEN — With FIGMA_MCP_HTTP_PORT, require Authorization: Bearer on every HTTP request.

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

🔀 Multi-Instance Support (v1.10.0)

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

The Problem (Before v1.10.0)

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

How It Works Now

• 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

What This Means for You

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

Do I Need to Do Anything?

Nothing. Multi-instance support is fully automatic:

• 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

Sharing one server over HTTP (optional)

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

# Start a shared server in a terminal (keep it open)
FIGMA_ACCESS_TOKEN=figd_... FIGMA_MCP_HTTP_PORT=9300 npx -y figma-console-mcp@latest
Point clients at it, e.g. Claude Code:
claude mcp add --transport http figma-console-shared http://127.0.0.1:9300/mcp

• Loopback only. It binds 127.0.0.1 and refuses requests whose Host isn't localhost (DNS rebinding) or that come from a non-localhost browser page. Set FIGMA_MCP_HTTP_TOKEN to also require a bearer token.
• Each client gets its own session, as with stdio, and all of them share the plugin connection. Idle sessions close after 30 minutes and clients reconnect automatically.
• The endpoint lives as long as the server process. When an MCP