Power your agent
Perintah milik penerbit sendiri. Bukan endpoint PlugMCP.
Host a copy with our keys and logs.
npx -y [email protected]Claude Code tidak punya tautan instal untuk perintah lokal. Salin perintah di bawah dan jalankan di terminal.
claude mcp add figma-console-mcp -- npx -y figma-console-mcp@1.46.0Jalankan di terminal.
{ "mcpServers": { "figma-console-mcp": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}claude_desktop_config.json
URL remote atau perintah di mesin Anda? Perbedaan kedua cara instal
Jalankan di PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
BukaDari penerbit
Your design system as an API. A design-system-focused Model Context Protocol server for Figma. It works in both directions (Figma ⇄ code), writes to Figma, and runs deterministic checks for design-code parity, accessibility, and design-system health. It hands the AI exact tokens, variants, bindings, and states as structured data rather than prescribing a framework or house style, so generated code follows your team's own stack and conventions.
🆕 Security & data-safety fixes (latest v1.41.5): Cloud Mode sign-in is hardened: each session uses only its own Figma token, authorization codes are single-use and bound to the client that asked for them, and the accessibility scanner no longer runs scripts from the HTML it checks. Two data-loss fixes:
figma_import_tokensrefuses an import that read no token files (it used to plan deleting every variable) andreplaceonly deletes inside the collections you import; arranging a component set no longer deletes the other arranged sets on the page. Token export and import read variables live, so renames show up immediately. Abandoned servers exit on Windows, batch-created variables accept aliases, and the Slots tools takefileKey. v1.41.1–v1.41.5 make component-set analysis report real variant differences, including changes inside nested layers (an icon swap, a token on a nested vector), the variant's own background and opacity, auto-layout, gradients, corner radius, typography and swapped tokens, stop component loading from timing out on large files, and fix variable paging. Re-import the plugin for the component fixes. See what's new →
Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
_mcp: "figma-console-mcp" and errors are prefixed [figma-console-mcp] so attribution stays unambiguous in agents running multiple Figma MCPsFirst, decide what you want to do:
Bottom line: Remote SSE is read-only until you pair the plugin. Cloud Mode unlocks write access (96 tools) from web AI clients without Node.js. NPX/Local Git gives the full 121 tools with real-time monitoring.
Best for: Designers who want full AI-assisted design capabilities.
What you get: All 121 tools including design creation, variable management, and component instantiation.
node --version (Download)Figma Console MCPfigd_)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 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:
Tip for designers: The
~symbol means your home folder. On macOS, that's/Users/YourName/. On Windows, it'sC:\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 addcommand above and it handles everything for you.
Desktop Bridge Plugin:
~/.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.Can't see the folder in the import dialog?
.figma-console-mcpstarts 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.jsandui.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,
pluginVersionreporting).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 121 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):
{
"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.
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.
Figma Console (Read-Only)https://figma-console-mcp.southleft.com/sseOAuth authentication happens automatically when you first use design system tools.
⚠️ Known Issue: Claude Code's native
--transport ssehas a bug. Usemcp-remoteinstead:
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.
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
}
}
Ready for design creation? Follow the NPX Setup guide above, or try Cloud Mode 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: 96 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.
figd_)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.
Connect to my Figma plugin
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.
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 121 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:
FIGMA_ACCESS_TOKEN environment variablefigma_get_status - Check WebSocket bridge connection and file contextfigma_diagnose - Designer-readable health check + setup guidancefigma_reconnect - Force reconnect to the Desktop Bridge pluginfigma_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)figma_get_console_logs - Retrieve console logsfigma_watch_console - Real-time log streamingfigma_clear_console - Clear log bufferfigma_reload_plugin - Reload current pagefigma_take_screenshot - Capture UI screenshotsfigma_capture_screenshot - Render a node from the plugin runtime, reflecting changes that haven't reached the REST API yetfigma_get_selection - The nodes currently selected in Figmafigma_get_design_changes - Buffered document-change events, for polling what changedfigma_get_design_system_kit - Full design system in one call — tokens, components, styles, visual specsfigma_get_variables - Extract design tokens/variablesfigma_get_component - Get component data (metadata or reconstruction spec)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 datafigma_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 cachefigma_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 relayfigma_execute - Power tool: Run any Figma Plugin API code to create designs
fileKey targets one specific connected file directly (Local Mode only), without touching the active file or target lockfigma_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"
fileKeys (from figma_list_open_files), or pass allFiles: true to hit every connected file — one of the two is required, so a script never fans out to files you didn't mean to touchfigma_create_component_set - Create a component set with variants in one declarative call
{ State: ["default", "hover", "disabled"], Size: ["sm", "lg"] } → 6 variants) off a base component, or combine existing componentsProp=Value variant naming, combineAsVariants under the hood, optional auto-arranged labeled gridfigma_instantiate_componentfigma_arrange_component_set - Organize variants into professional component sets
figma_set_description - Document components with rich descriptions
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 setfigma_get_slots - List slots on a component, component set (aggregated across variants), or instance — ids, names, property keys, dimensions, and current childrenfigma_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 instancefigma_add_slot_property - Retrofit an existing frame as a slot via a manual SLOT property binding, with description and preferredValuesfigma_check_design_parity - Compare Figma component specs against code implementation, producing a scored diff report with actionable fix itemsfigma_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 logfigma_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 propertiesfigma_add_component_property / figma_edit_component_property / figma_delete_component_property - Manage component propertiesfigma_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 strokesfigma_get_component_for_development_deep - Full component tree with resolved token names and instance referencesfigma_analyze_component_set - A variant set as a state machine, with CSS pseudo-class mappings and per-variant diffsfigma_lint_design - WCAG and design-system lint on the canvas, with AA and best-practice level taggingfigma_audit_component_accessibility - Component scorecard: state coverage, focus indicators, color-blind simulationfigma_scan_code_accessibility - axe-core scan of HTMLfigma_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 nodefigma_get_file_versions / figma_get_file_at_version - List versions and snapshot a file or node at a past versionfigma_diff_versions / figma_get_changes_since_version - Structured diffs, including component property and binding changesfigma_generate_changelog - Markdown changelog for release notesfigma_blame_node - Find when, and by whom, a property or variant was introducedfigma_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).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_tokensfigma_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 READMEfigma_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 modesfigma_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 scaffoldfigma_ds_verify - Deterministic fidelity evals — DTCG parse + alias integrity, quoted-CSS-expression scan, workshop var() resolution, structure + porting coverage, and Figma round-trip readinessfigma_ds_status - Read or record porting progress, persisted across sessionsfigma_create_variable_collection - Create new variable collections with modesfigma_create_variable - Create COLOR, FLOAT, STRING, or BOOLEAN variablesfigma_update_variable - Update variable values in specific modesfigma_rename_variable - Rename variables while preserving valuesfigma_delete_variable - Delete variablesfigma_delete_variable_collection - Delete collections and all their variablesfigma_add_mode - Add modes to collections (e.g., "Dark", "Mobile")figma_rename_mode - Rename existing modesfigma_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 callfigma_setup_design_tokens - Create complete token system (collection + modes + variables) atomically — values accept DTCG brace references ("{color.blue.600}") that resolve to real variable aliasesfigjam_create_sticky - Create a sticky note with color optionsfigjam_create_stickies - Batch create up to 200 stickiesfigjam_create_connector - Connect nodes with labeled connector linesfigjam_create_shape_with_text - Create flowchart shapes (diamond, ellipse, etc.)figjam_create_table - Create tables with cell datafigjam_create_code_block - Add code snippets with syntax highlightingfigjam_create_section - Group board content in a sectionfigjam_auto_arrange - Arrange nodes in grid, horizontal, or vertical layoutsfigjam_get_board_contents - Read all content from a FigJam boardfigjam_get_connections - Read the connection graph (flowcharts, relationships)figma_list_slides - List all slides with IDs, positions, and skip statusfigma_get_slide_content - Get the full content tree of a slidefigma_get_slide_grid - Get the 2D grid layout of the presentationfigma_get_slide_transition - Read transition settings for a slidefigma_get_focused_slide - Get the currently focused slidefigma_create_slide - Create a new blank slidefigma_delete_slide - Delete a slide from the presentationfigma_duplicate_slide - Clone an existing slidefigma_reorder_slides - Reorder slides via new 2D grid layoutfigma_set_slide_transition - Set transition effects (22 styles, 8 curves)figma_skip_slide - Toggle whether a slide is skipped in presentation modefigma_add_text_to_slide - Add text to a slide with custom fonts, colors, alignment, and wrappingfigma_add_shape_to_slide - Add rectangle or ellipse shapes with colorfigma_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 sizesfigma_set_slides_view_mode - Toggle grid vs. single-slide viewfigma_focus_slide - Navigate to a specific slideConnect 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.
figma_search_components to find relevant building blocksfigma_instantiate_componentfigma_executeBrand 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:
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.
~/.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.One-time import. Once imported, the plugin stays in your Development plugins list. Just run it whenever you want to use the MCP.
Read Operations:
Write Operations:
figma_executeMultiple 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 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.
figma_get_status shows which port you're on and lists other active instancesNothing. Multi-instance support is fully automatic:
(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. Built with the official @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:
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:
No MCP Apps support? Same audit, plain tool: figma_audit_design_system_report runs the identical scoring engine and returns the report as data — summary by default, per-category drill-down via category, full JSON via format: "full" — with a remediation section stating which findings this MCP can fix (design), which need a design decision first (design-assisted), and which need human design work (manual). Works in every MCP client with no ENABLE_MCP_APPS flag; results cache for 5 minutes (forceRefresh to re-crawl).
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:
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.
The two servers are complementary, and both can run in the same MCP client.
Figma's official MCP server is hosted by Figma. It focuses on design-to-code context (get_design_context), Code Connect, library search, and creating content in Figma: it writes through use_figma, creates files, generates FigJam diagrams, and works with motion and shaders.
Figma Console MCP focuses on design-system operations:
Current Status: v1.41.5 (Stable) - Production-ready. Latest: component-set analysis reports gradient/image/paint-opacity, corner radius, typography and label text, swapped spacing tokens, nested layer geometry and vector shape changes (re-import the plugin). On top of v1.41.4's variant background/stroke and auto-layout changes. On top of v1.41.3's component-set analysis reporting changes inside nested layers (instance swaps, nested token changes, opacity on the variant itself) and no longer reports a layer hidden in every variant as a change (re-import the plugin). On top of v1.41.2's design-system summary and figma_get_token_values report the file's tokens (they always reported 0) (server-only). On top of v1.41.1's component-set analysis reports real variant differences (Figma's default variant, size and layer changes), component loading no longer times out on large files (throttled plugin timers), relevance-ranked component search, and figma_get_variables paging that works with format: "full" (re-import the plugin for the component fixes). On top of v1.41.0's Cloud Mode sign-in hardening (per-session tokens on /sse, single-use authorization codes bound to client, redirect URI and PKCE, a consent page for unrecognized destinations), a script-execution fix in the accessibility scanner, figma_import_tokens refusing empty imports and scoping replace deletes to imported collections, figma_arrange_component_set no longer deleting other arranged sets, live variable reads for token export/import, Windows orphan-server exit (PR #140), and fileKey for the Slots tools (PR #112) (server-only, no plugin re-import). On top of v1.40.9's composed colors (a color variable set to another color at an opacity, "grey/900 at 50%") export and import with the link to the primitive intact — color-mix() in CSS/Tailwind v4, rgba() in SCSS, an alpha modifier in Tokens Studio, the resolved color plus the composition in DTCG — where the export previously failed or wrote [object Object] (server-only, no plugin re-import). On top of v1.40.8's min/max width and height survive every way of extracting a component as JSON — the design system kit, the reconstruction format and figma_get_file_data now carry them, design-code parity compares them, and the reconstruction format returns real geometry again instead of 50×50 placeholders when the plugin is connected (server-only, no plugin re-import). On top of v1.40.7's clearer Color Tokens table in generated docs — layers revealed by a boolean property are printed once under that property, and stroke/fill rows name the nested instance they belong to (server-only, no plugin re-import). On top of v1.40.6's overrides in extended variable collections are visible (previously reported as nonexistent), and a third round of generated-doc fidelity fixes — radius tokens read per corner, boolean props compared in Design-Code Parity, source links pinned to a commit, hidden layers linked to the property that shows them (server-only, no plugin re-import). On top of v1.40.5's clean dependency audit for the npm package — Worker-only dependencies (@cloudflare/puppeteer, which pulled in a high-severity extract-zip advisory with no upstream fix, and agents) no longer install for npm users, so npm install figma-console-mcp audits at 0 vulnerabilities and is 64 MB instead of 173 MB; the server also reports its real version to MCP clients instead of 0.1.0 (server-only, no plugin re-import). On top of v1.40.4's fixes found by live-testing v1.40.3 on hard production components — tools given a fileUrl now read variables, descriptions and annotations from THAT file rather than whichever file is active (previously every token name could vanish, or on an id collision come from the wrong file; figma_get_component could return a different component), a tool result over 16 MB no longer disconnects the server, anatomy labels sizing by the layout's real axes, and the icon/typography/anatomy output stays readable on large components (server-only, no plugin re-import). On top of v1.40.3's fidelity fixes for generated component docs on harder components — hidden layers are labeled instead of documented as rendered, one-sided borders report the weight that actually renders, typography and layer structure are compared across every variant instead of read from the first, gradients/shadows/opacity are no longer silently dropped, truncated trees say so, and SLOT properties are listed (server-only, no plugin re-import). On top of v1.40.2's data-loss fix for figma_export_tokens — with a different file active in Figma than intended, an export could replace a real token file with an empty one (or with another file's tokens) and report success; exports now refuse to write when a requested collection is missing, when the export is empty, when the target was generated from a different Figma file, or when overwriting would destroy tokens the export doesn't manage, and strategy: "merge" — documented as preserving code-only tokens but never implemented — is now a genuinely safe default (server-only, no plugin re-import). On top of v1.40.1's accuracy fixes for generated component docs across variants — a descendant's fill (typically an icon's) could be documented as a variant's Background, Color Token headings kept only a property literally named Variant, spacing was read from the first variant alone, and icons were only detected by layer name — plus figma_export_tokens accepting a file path as outputPath instead of failing with a raw EEXIST or silently creating a directory (server-only, no plugin re-import). On top of v1.40.0's design system extraction from production codebases — seven Local-Mode figma_ds_* tools that scan one or more apps (framework/styling/vendor detection, usage-ranked component inventory classified vendored/wrapped/pure-vendor/bespoke, variant inference from real call sites, duplicate detection, and an architecture pass separating UI-kit specializations from the missing generic primitives), mine the de-facto styling into DTCG tokens with per-token provenance (multi-mode CSS custom properties, SCSS, Tailwind config, shadcn HSL triples, utility-class frequency mining valued from the app's own theme), scaffold the design-system package with showcase docs pages, wire a fresh Storybook workshop to the app's real theme layers and fonts, deep-extract components for porting with CSF3 story scaffolds, verify with deterministic fidelity evals, and persist porting progress across sessions — the extracted tokens import straight into Figma variables via figma_import_tokens. On top of v1.39.1's fix for a plugin-update banner that could never be cleared — an older server instance nagging a newer plugin to re-import, which only ever installs the same or a newer plugin. On top of v1.39.0's multi-file execution — figma_execute_across_files runs one script against several Desktop Bridge-connected files concurrently (four files x 2s of work in ~3s, not ~8s), and figma_execute takes an optional fileKey to target a single file without moving the active file or releasing target lock; targeting must be explicit (fileKeys or allFiles: true), so nothing fans out to files you did not name. From community PR #107 by @Wolfr. Ships with a relay fix: handleResult() in the plugin's ui.html rebuilt each response field by field and silently dropped resultAnalysis and fileContext, so the resultAnalysis.warning check that figma_execute's own description tells callers to perform has never been possible (re-import manifest.json for those two fields; everything else works without it). On top of v1.38.2's connection-stability fix — the server's own orphan reaper was terminating healthy MCP servers because its liveness probe used an IPv4 literal while the server binds the IPv6 loopback, which turned every kill-safety gate into a rubber stamp; this was the cause of recurring "Server disconnected" errors across all MCP clients. Alongside v1.38.1's fix for the shared-library variable tools, which had silently reported zero collections since v1.29.0 and reported failed imports as successes. On top of v1.38.0's ongoing component changelogs in generated docs — figma_generate_component_doc takes an opt-in history parameter that pulls per-component design history from Figma version history (each version diffed and scoped to that component, so renames, added properties, and token bindings show up as rows) alongside code history from git log on the component's source files, rendered as a ## History section with design, code, and release-note tables. Prefers labeled versions, falls back to auto-saves when a file has none, and is off by default so existing calls are unchanged (server-only, no plugin re-import). On top of v1.37.x's design-system health audit for every client — figma_audit_design_system_report runs the dashboard's deterministic six-category scoring engine and returns the report as data with per-finding remediation, live-first fileKey-verified data (source disclosed), chunked per-category drill-down, and a 5-minute cache (server-only, no plugin re-import). On top of v1.36.0's 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. 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, 121 tools (Local) / 96 tools (Cloud) / read-only subset (Remote), Comments API, cross-MCP identity disambiguation, and MCP Apps.
Recent Releases:
tokens), nested size/position/rotation and vector shapes. Plugin re-import.layout). Plugin re-import.figma_get_variables full-format paging and one pagination shape (#98, #99); deep extraction mixed-text fix and unlimited depth (PRs #85, #86 by @DarWiM). Plugin re-import for component fixes./sse sessions use their own token (a shared slot let REST calls run with another user's token), authorization codes are random/single-use/10-minute and bound to client_id + redirect_uri + PKCE S256, unregistered redirects refused, consent page for other registered destinations, callback error page escaped. Local: accessibility scan no longer executes scanned scripts; figma_import_tokens refuses 0-token imports and scopes replace deletes to imported collections; figma_arrange_component_set replaces only its own set's arrangement; token export/import read variables live; stdin-EOF exit (PR #140 by @RomanOdokienko); Slots fileKey (PR #112 by @Wolfr); batch-create aliases. Server-only. Reported in #104, #122, #53, #91, #116.figma_get_file_data, component docs) and in design-code parity; reconstruction reads the full REST tree with real geometry, alignment, hidden layers and absolute positioning; nodeIds honored by the file-data tools; Cloud Mode figma_diagnose on /mcp. Server-only. Reported by Brett Cooper.figma_get_variables reads extended variable collections (overrides live on the collection; they were invisible and reported as nonexistent) — summary, per-collection resolved values marked overridden/inherited, per-variable overrides; the mode filter no longer drops 0/false values; figma_export_tokens explains instead of emitting empty sets. figma_generate_component_doc: radius and per-side stroke bindings read per corner/side, Design-Code Parity compares booleans and never prints an empty section, source links pinned to a commit (no raw relative paths, no local paths, credentials stripped), hidden layers linked to the boolean that shows them, same-named layers qualified by instance. Server-only. Reported by Brett Cooper and Robin Di Capua.@cloudflare/puppeteer (→ @puppeteer/browsers → extract-zip, high, no upstream fix) and agents were regular dependencies but are only used by the Cloudflare Worker; they are now devDependencies and the Worker build is excluded from the npm package, so a fresh install audits at 0 vulnerabilities (was 4 high) and drops from 173 MB to 64 MB. The local server now reports its real version to MCP clients instead of 0.1.0. A new test guards both directions of the dependency split. Server-only. Reported by Daniel Westerlund.fileUrl (figma_generate_component_doc, figma_get_component, figma_get_component_for_development) read bridge data from the ACTIVE file instead of the named one — token names vanished, and on an id collision another file's names, description, annotations or even component were returned; they now target the named file and fall back to REST. A tool result over 16 MB disconnected the server for the session (the client closes the transport); results are now size-capped centrally with an actionable error. Anatomy sizing labels follow the real layout axes (vertical layouts were mislabeled); icons are grouped, counted and named by the glyph in the slot; typography rows are identified by (element, style); identical sibling layers collapse to ×N. Found by testing on hard production components. Server-only.figma_generate_component_doc: hidden layers labeled rather than documented as rendered; border width honors individualStrokeWeights (a tab underline is 4px bottom, not the vestigial scalar) and is reported only where a stroke is painted; typography and anatomy compared across every variant (an Applies to column; one tree per distinct layer structure) instead of read from the first; gradients, images, shadows, blurs and opacity reported instead of dropped; fetch depth raised from 4 to 8 with an explicit note when a tree may be cut off; boolean-valued variant properties keep their name; Configurable Properties renders for variant-only sets and lists SLOT properties; every icon shown, not just the first; Design-Code Parity compares property values (it could report a property name as a missing variant); placeholder status/version/description no longer asserted. Server-only. Reported by Robin Di Capua.figma_export_tokens reads from whichever file is active in Figma Desktop; with the wrong one focused it could overwrite a real token file with an empty document — or, for CSS/SCSS/Tailwind/TS outputs, with another file's tokens — and report success: true. Exports now refuse (writing nothing) when a requested collection isn't in the file that was read, when the export is empty, when the target was generated from a different Figma file (generated files now record their source), when a DTCG target can't be parsed or would be replaced by a different kind of output, or when overwriting would destroy hand-added tokens or another collection's tokens. strategy: "merge" had been documented as preserving code-only tokens but was never implemented; it is now the safe default and replace is the explicit override. Every response reports the source Figma file. Server-only. Reported by Isabella Minzly; two further loss paths found in code review.figma_generate_component_doc: Background now comes only from the variant's own fills (a transparent outline/ghost variant no longer borrows its icon's color), Color Token headings name every variant property under any property names, Spacing Tokens are compared across all variants (varies by **Size**: …, with a Spacing Inconsistencies list for properties tokenized on some variants and hardcoded on others), and icons resolve from the main component and INSTANCE_SWAP slots rather than a layer name containing "icon". figma_export_tokens: an outputPath that is an existing file or ends in a token-file extension is written as that exact file; multi-file exports into a file path are rejected before anything is written. figma_search_components no longer reports a failed component load as a successful empty search. Server-only. Reported by Robin Di Capua and Isabella Minzly.figma_ds_analyze scans one or more app codebases: framework/styling/vendor-layer detection (React/Next/Angular/Web Components; Tailwind v3/v4, CSS Modules, SCSS, Emotion, styled-components; shadcn/ui, Radix, MUI, Chakra…), a usage-ranked component inventory classified vendored/wrapped/pure-vendor/bespoke with prop contracts, variant inference from real call sites, duplicate detection, iconography + typography capture, and an architecture classification separating a UI kit from a design system (atomic levels, specializations like FollowButton → Button, missing generic primitives). figma_ds_extract_tokens mines de-facto styling into DTCG tokens — multi-mode CSS custom properties across .dark/[data-theme] conventions, SCSS variables, Tailwind config values, shadcn HSL triples, Tailwind utility-class frequency mining valued from the app's own theme, frequency-promoted raw values — with per-token provenance in $extensions, importable straight into Figma variables via figma_import_tokens. figma_ds_scaffold generates the package (token files via the shared formatters, token/typography/iconography showcase pages); figma_ds_setup_storybook wires a fresh Storybook workshop to the app's real theme layers and fonts; figma_ds_extract_component produces per-component porting manifests with CSF3 story scaffolds; figma_ds_verify gates the result with deterministic fidelity evals plus Figma round-trip readiness; figma_ds_status persists porting progress across sessions. Also fixes the CSS/SCSS/Tailwind v4 formatters quoting CSS functional expressions (a quoted cubic-bezier(...) silently kills transitions — affects figma_export_tokens too). Server-only, no plugin re-import.computePluginUpdateAvailable() was a bare inequality with no direction check, so a server whose bundled plugin copy was OLDER than the connected plugin still told the user to re-import — which only ever installs the same or a newer plugin. Not an edge case: the 9223–9232 port range keeps several server instances alive, BUNDLED_PLUGIN_VERSION is parsed once at module load, and every server left running from before an upgrade nags a correctly-updated plugin. Reproduced live with four leftover v1.38.2 servers against a freshly re-imported 1.39.0 plugin. Now flags only when the bundled copy is genuinely newer. Server-only, no plugin re-import. 1452 tests.figma_execute_across_files runs one script against several Desktop Bridge-connected files concurrently, with per-file error isolation and independent timeouts (verified live: four files × 2s of work in ~3.0s, all dispatches within 5ms — versus ~8s serialized). figma_execute gained an optional fileKey to target a single non-active file without moving the active file or releasing target lock. Targeting is deliberately explicit — fileKeys or allFiles: true, no fan-out-to-everything default — because this runs arbitrary code in files you may be actively editing, including one pinned by target lock. The transport was already concurrent (sendCommand has always taken a target file key, and every hop is request-id keyed); only the tool layer was missing. Community PR #107 by @Wolfr. Also fixes a Desktop Bridge relay bug that silently dropped resultAnalysis and fileContext from every figma_execute response since they were introduced — making the resultAnalysis.warning check the tool's own description tells callers to perform impossible — guarded now by a test that reads the real plugin files. Re-import manifest.json for those two fields; the rest works without it, and mixed plugin versions degrade cleanly. 52 suites / 1443 tests./health before deciding it is dead, but requested 127.0.0.1 while the WebSocket server binds localhost — resolved to the IPv6 loopback on dual-stack macOS, with nothing on IPv4 — so the probe reported "nothing responding" for healthy servers and every kill-safety gate built on it became a rubber stamp, including the one written to spare siblings after the machine sleeps. Three supporting defects: port files written non-atomically (a reader landing mid-rewrite got a parse error that both cleanup paths treated as "corrupt, delete it", stranding a healthy server), an orphan path that terminated fileless port-holders without probing at all, and a heartbeat that gave up permanently once its own file went missing. Fixes: probe localhost, atomic temp+rename writes, never delete on a parse failure, health-probe before the orphan kill in both paths, and self-healing re-advertisement guarded by in-process port ownership. Fully restart MCP clients after upgrading — older running builds keep the broken probe and still terminate healthy siblings. Server-only, no plugin re-import. 1422 tests (7 new regressions, each verified to fail pre-fix).figma_get_library_variables returned totalCollections: 0 for every file, on every plan, since it shipped in v1.29.0, and figma_import_library_variable reported failed imports as successes with id: undefined. Both read the Desktop Bridge's { success, result } envelope as if it were the injected script's bare return value, so Array.isArray() was always false, the __error guard was dead code, and .id was always undefined. The failure presented as a success with a plausible hint attached ("subscribe a library via the Assets panel"), which is why it survived two months unreported. Both tools now unwrap through a shared helper that also maps a bridge-level success: false onto the error path, so a plugin timeout surfaces as a real error instead of being swallowed as "0 collections"; an import yielding no id is now an explicit error. All 26 executeCodeViaUI call sites audited — only these two were affected. Test mocks had encoded a wire contract that does not exist, which is why CI stayed green; they now reproduce the real envelope, plus six regression tests verified to fail against the pre-fix source. Reported by Isabella Minzly. Server-only — no plugin re-import needed.figma_generate_component_doc gained an opt-in history parameter that produces a real changelog instead of only echoing hand-written codeInfo.changelog rows: history.figma walks Figma version history and diffs each consecutive pair scoped to the component (reusing the same engine as figma_diff_versions, so a rename, a newly added component property, or a token binding each become a row), while history.git runs git log over the component's source files auto-derived from codeInfo.filePath / sourceFiles[]. Labeled versions are preferred but auto-saves are used automatically when a file has none — verified against a mature system with 72 auto-saves and 0 labeled versions, where a labeled-only walk yields nothing. Detailed-mode bindings group by property (binding one token across a 24-variant set otherwise produced 44 near-identical bullets in a single table cell). Both sources default off, so existing callers get byte-identical output. No new tools; server-only, no plugin re-import.figma_audit_design_system_report runs the Design System Dashboard's deterministic scoring engine (naming, token architecture, component metadata, accessibility, consistency, coverage) and returns the scored report as data — no MCP Apps support or ENABLE_MCP_APPS needed (the previous registration gated everything, making the audit unreachable outside Claude Desktop). Component data is now live-first: a fileKey-verified per-page bridge crawl (30s/page, failures isolated per page) with REST published-library fallback, and the chosen source is disclosed in the report (bridge-live / rest-published / none) so stale-publish scores can't masquerade as live ones. Output is token-safe by design: bounded summary, per-category chunked drill-down, clamped full JSON, 5-minute raw-data cache. Every finding carries a remediation verdict — auto-fixable by this MCP's write tools, fixable after a design decision, or manual — with the exact tools named. Scoring accuracy pass: variant components no longer poison PascalCase/casing checks, Title Case accepted, component-set names count toward core-component coverage, color/content/* recognized in contrast pairing, state synonyms (active≈pressed etc.), and ./_-prefixed internals excluded. Server-only — no plugin re-import needed.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.The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge p
{ "mcpServers": { "figma-console-mcp": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}Ringkasan umum
The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.
Tool
Belum ada daftar tool. Server remote mendapatkannya setelah pemeriksaan kesehatan pertama.
FAQ
Salin konfigurasi stdio untuk Cursor, Claude Desktop, Claude Code, atau VS Code di halaman ini. Konfigurasi ini memakai instalasi dari penerbit, bukan proxy PlugMCP.
Tidak ada variabel lingkungan wajib yang tercantum di catatan ini.
Figma Console berjalan secara lokal melalui stdio.
Terakhir diperiksa 2026-11-15. The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.
