M
MCP Directory CURATED DIRECTORY
911 MCP servers indexed
中文
← Back to directory
F

Figma Console MCP

Community
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
How to install ↓ Compare GitHub source repository ↗
Category
Collaboration #5 of 55
Stars
★ 2.5k Very popular
Transport
SSE · Streamable HTTP · stdio (local process)
Runtime
Node.js 18+
Credentials
API key / credential required
License
MIT
Last commit
Tools
74
63FMRS · C

Figma Console MCP is a feature-rich community server that turns Figma design systems into an API for AI. It offers 114 tools (local mode) covering design extraction, creation, debugging, token sync, FigJam, Slides, and health audits. Multiple connection modes accommodate different needs: Remote SSE for read-only, Cloud Mode for web clients without Node.js, and NPX for full capabilities. The project is actively maintained, with recent versions fixing stability issues. Main risks include careful handling of write operations, token security, and trusting third-party hosted endpoints. Suitable for teams exploring AI-driven design automation, but it's important to understand permissions and limitations.

Strongest · Maintenance 15/20 Weakest · Reliability 8/20

Reliability
8/20
Security and permissions
13/20
Maintenance
15/20
Documentation
14/20
Setup experience
13/20
Why each score
Reliability 8/20
Static review of README only; no server manifest, source, CI, or tests supplied. Claimed 1452 tests and release-note fixes are unverifiable and README is untrusted. Internal contradiction between capability tables (Remote SSE console logs ✅ vs real-time monitoring ❌). Score 8: happy path plausible, but reproducibility and error-path evidence are missing.
Security and permissions 13/20
No red-line issues (no malware, no real secrets in examples, no covert exfiltration). Least-privilege token scope guidance, OAuth for remote mode, data-flow disclosure for the cloud relay, explicit targeting for multi-file execution, and replace-gated deletes are positives. Deductions: no confirmation flow documented for destructive tools/arbitrary code execution, PAT is sent to a third-party cloud endpoint with only README-level disclosure, and auth implementation is unverifiable without source. Score 13.
Maintenance 15/20
MIT license present; README documents an active release line (v1.33.x–v1.39.1), security dependency sweeps, full-codebase audits, and community PRs; 51 open issues indicate a live tracker. Deductions: no verifiable CI configuration, no explicit security-response policy or governance docs in supplied material, and release/test claims rest on untrusted README text. Score 15.
Documentation 14/20
Layered documentation: quick-start for four modes, client config examples, auth, tool lists, example prompts, limitations, troubleshooting and architecture links; read-only vs write capability differences and plugin re-import requirements are disclosed. Deductions: internal contradiction in capability tables, unreviewable docs/ links, no cost/rate-limit information, and parameter details deferred to external docs. Score 14.
Setup experience 13/20
Setup is well documented with per-mode steps, prerequisites, JSON config examples for Claude Desktop/Code, Cursor, Windsurf, and time estimates. Deductions: manual Desktop Bridge plugin import and pairing add fragility, multiple modes can confuse, no verifiable CI/test evidence in supplied files (static cap 15), and the server manifest is absent. Score 13.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessReads local filesWrites / deletes local filesRuns commands or codeUses the network

Best for

  • Designers and design system teams looking to integrate AI into their workflow.
  • Developers needing quick prototyping or visual spec generation.
  • Product managers who need to communicate visual requirements during discussions.
  • Teams managing multi-file design systems (via figma_execute_across_files).
  • Developers who need to export tokens from Figma to their codebase (token sync).

Not for

  • Users who need read-only access and want to avoid installing Node.js — consider Remote SSE mode (9 read-only tools).
  • Users who strictly need code generation (e.g., React/HTML) — the official Figma Dev Mode MCP is more suitable.
  • Users who want quick evaluation without write capabilities — Remote SSE is sufficient.
  • Users who want to design in the cloud but avoid installing the Desktop Bridge plugin (Cloud Mode still requires the plugin).

Required permissions

  • Figma personal access token (PAT): file content read, file versions read, variables read, comments read/write (local mode).
  • Desktop Bridge plugin permissions: access current file via plugin API, read selection, console logs, document changes, and execute write operations (create frames, variables, etc.).
  • Local filesystem: the server writes/reads plugin files in ~/.figma-console-mcp/ (auto-created).
  • WebSocket ports 9223-9232: the server listens on these ports locally for plugin connections.
  • For Cloud Mode, OAuth is required (remote endpoint) or PAT (Cloud Mode bypasses Enterprise restrictions).

Risks and side effects

  • Write operation risk: tools like figma_execute can run arbitrary plugin code, potentially modifying or deleting designs unintentionally — test on a copy file first.
  • Token leakage: FIGMA_ACCESS_TOKEN is stored in plaintext in client configs; if the config file leaks, the token could be abused.
  • Remote server trust: the remote SSE endpoint is hosted by a third party (southleft); data (design info) passes through their infrastructure; self-hosting options exist.
  • Multi-instance issues: port conflicts may cause connection issues, but multi-instance support is implemented (automatic port fallback).
  • Update banner issue: plugin-server version mismatch may cause persistent re-import prompts — fixed in recent releases, but restart clients after upgrading.

Setup

Before you start

Runtime：Node.js 18+

FIGMA_ACCESS_TOKEN requiredsecret Figma personal access token (starts with figd_), created via Figma Help's Manage personal access tokens page with File content (Read), File versions (Read), Variables (Read), and Comments (Read and write) scopes.
Other optional settings (3)
ENABLE_MCP_APPS optional Set to "true" to enable experimental MCP Apps such as the token browser and design system dashboard; requires a client supporting the ext-apps protocol.
FIGMA_WS_PORT optional Optional; overrides the preferred WebSocket port (default 9223), with automatic fallback across a 10-port range when occupied.
FIGMA_WS_HOST optional Optional; overrides the WebSocket server bind address (default localhost); set to 0.0.0.0 when running inside Docker.
  1. Get a Figma personal access token (PAT) from your Figma account settings, with scopes: File content (Read), File versions (Read), Variables (Read), Comments (Read and write). The token starts with figd_.
  2. Configure your MCP client (e.g., Claude Desktop or Cursor) by adding the mcpServers entry (see install_config) with environment variables FIGMA_ACCESS_TOKEN and ENABLE_MCP_APPS=true.
  3. Start Figma Desktop, go to Plugins → Development → Import plugin from manifest..., and select ~/.figma-console-mcp/plugin/manifest.json (auto-created by the server).
  4. Run the plugin in your Figma file; it auto-connects to the MCP server (ports 9223-9232).
  5. Restart your MCP client to load the new configuration.
  6. Test: Ask AI "Check Figma status" to confirm connection, then create a simple blue rectangle to verify write access.
claude_desktop_config.json 
{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": [
        "-y",
        "figma-console-mcp@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json
{
  "servers": {
    "figma-console": {
      "command": "npx",
      "args": [
        "-y",
        "figma-console-mcp@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

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

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

After configuring and restarting the MCP client, ask the AI to "Check Figma status" (figma_get_status); an active WebSocket transport with file context confirms the connection, then ask it to create a simple frame with a blue background to confirm write access.

Troubleshooting

  1. Connection failure: confirm Figma Desktop is installed and the plugin is running (Plugins → Development → Figma Desktop Bridge), check ports 9223-9232 are not occupied, try restarting the MCP client and Figma.
  2. 'Server disconnected' message: ensure server and plugin versions are compatible, restart the MCP client (recent versions fixed orphan-process miskilling).
  3. Cannot write: confirm using local mode (NPX or Local Git) or Cloud Mode with pairing; Remote SSE is read-only.
  4. Variable export empty: ensure the file contains variables and the PAT has 'Variables (Read)' scope; for shared library variables, confirm the current file has subscribed to the library.
  5. Re-import manifest banner not clearing: if it persists, the server version may be older than the plugin; upgrade the server or close old instances.
  6. Performance issues: for many files, use figma_execute_across_files and explicitly specify fileKeys to avoid unintended execution.

Things to try

Once connected, you can ask your AI assistant things like:

  • Check Figma status and show the active connection
  • Get all design variables from https://figma.com/design/abc123 and export them as CSS
  • Create a card component with a header image, title, description, and action button
  • Create a new variable collection called Brand Colors with Light and Dark modes

Tools 74

figma_get_status read-only
Check WebSocket bridge connection and file context.
figma_diagnose read-only
Designer-readable health check and setup guidance.
figma_reconnect read-only
Force reconnect to the Desktop Bridge plugin.
figma_navigate read-only
Switch active file target among connected plugins (Local) or navigate cloud headless browser (Remote/Cloud).
figma_get_console_logs read-only
Retrieve console logs.
figma_watch_console read-only
Real-time log streaming.
figma_clear_console writes
Clear log buffer.
figma_reload_plugin writes
Reload current page.
Show 66 more tools
figma_take_screenshot read-only
Capture UI screenshots.
figma_get_design_system_kit read-only
Full design system in one call — tokens, components, styles, visual specs.
figma_get_variables read-only
Extract design tokens/variables.
figma_get_component read-only
Get component data (metadata or reconstruction spec).
figma_get_component_for_development read-only
Component plus image.
figma_get_component_image read-only
Just the image.
figma_get_styles read-only
Color, text, effect styles.
figma_get_file_data read-only
Full file structure.
figma_get_file_for_plugin read-only
Optimized file data.
figma_audit_design_system_report read-only
Scored health audit of the design system across six categories with remediation.
figma_get_library_component_by_key read-only
Resolve any component key to full properties + variants + visual specs.
figma_get_library_components read-only
Discover all components in a library file.
figma_get_library_variables read-only
List every variable from team libraries the current file has subscribed to (works on all Figma plans).
figma_import_library_variable writes
Import a library variable into the current file.
figma_pair_plugin writes
Generate a pairing code to connect a Desktop Bridge plugin via cloud relay.
figma_execute writes
Run any Figma Plugin API code to create designs.
figma_execute_across_files writes
Run one script against several Desktop Bridge-connected files concurrently.
figma_create_component_set writes
Create a component set with variants from an axes matrix in one call.
figma_arrange_component_set writes
Organize variants into professional component sets.
figma_set_description writes
Add rich markdown descriptions to components, component sets, and styles.
figma_create_slot writes
Add a slot to a component via the GA createSlot API.
figma_get_slots read-only
List slots on a component, component set, or instance.
figma_append_to_slot writes
Populate an instance's slot by cloning existing node or creating new content.
figma_reset_slot destructive
Clear a slot's content on an instance.
figma_add_slot_property writes
Retrofit an existing frame as a slot via manual SLOT property binding.
figma_check_design_parity read-only
Compare Figma component specs against code implementation, producing a scored diff report.
figma_generate_component_doc read-only
Generate platform-agnostic markdown documentation merging Figma design data with code-side info.
figma_export_tokens writes
Export Figma variables to design token files (DTCG JSON, CSS, Tailwind, SCSS, etc.).
figma_import_tokens writes
Push code-side token edits back to Figma with full apply — creates, renames, aliases, and deletes.
figma_create_variable_collection writes
Create new variable collections with modes.
figma_create_variable writes
Create COLOR, FLOAT, STRING, or BOOLEAN variables.
figma_update_variable writes
Update variable values in specific modes.
figma_rename_variable writes
Rename variables while preserving values.
figma_delete_variable destructive
Delete variables.
figma_delete_variable_collection destructive
Delete collections and all their variables.
figma_add_mode writes
Add modes to collections (e.g., Dark, Mobile).
figma_rename_mode writes
Rename existing modes.
figma_batch_create_variables writes
Create up to 100 variables in one call (10-50x faster).
figma_batch_update_variables writes
Update up to 100 variable values in one call.
figma_setup_design_tokens writes
Create complete token system (collection + modes + variables) atomically.
figjam_create_sticky writes
Create a sticky note with color options.
figjam_create_stickies writes
Batch create up to 200 stickies.
figjam_create_connector writes
Connect nodes with labeled connector lines.
figjam_create_shape_with_text writes
Create flowchart shapes (diamond, ellipse, etc.).
figjam_create_table writes
Create tables with cell data.
figjam_create_code_block writes
Add code snippets with syntax highlighting.
figjam_auto_arrange writes
Arrange nodes in grid, horizontal, or vertical layouts.
figjam_get_board_contents read-only
Read all content from a FigJam board.
figjam_get_connections read-only
Read the connection graph (flowcharts, relationships).
figma_list_slides read-only
List all slides with IDs, positions, and skip status.
figma_get_slide_content read-only
Get the full content tree of a slide.
figma_get_slide_grid read-only
Get the 2D grid layout of the presentation.
figma_get_slide_transition read-only
Read transition settings for a slide.
figma_get_focused_slide read-only
Get the currently focused slide.
figma_create_slide writes
Create a new blank slide.
figma_delete_slide destructive
Delete a slide from the presentation.
figma_duplicate_slide writes
Clone an existing slide.
figma_reorder_slides writes
Reorder slides via new 2D grid layout.
figma_set_slide_transition writes
Set transition effects (22 styles, 8 curves).
figma_skip_slide writes
Toggle whether a slide is skipped in presentation mode.
figma_add_text_to_slide writes
Add text to a slide with custom fonts, colors, alignment, and wrapping.
figma_add_shape_to_slide writes
Add rectangle or ellipse shapes with color.
figma_set_slide_background writes
Set a slide's background color (creates or updates).
figma_get_text_styles read-only
Get all local text styles with IDs, fonts, and sizes.
figma_set_slides_view_mode writes
Toggle grid vs. single-slide view.
figma_focus_slide writes
Navigate to a specific slide.

Use cases

Design system extraction: pull all design variables, components, and styles.
AI-assisted design creation: use natural language to directly create UI components, frames, and layouts.
Bidirectional token sync: export Figma variables to DTCG/CSS/Tailwind formats and push code-side edits back to Figma.
Visual debugging: capture screenshots and monitor console logs.
FigJam collaboration: create stickies, flowcharts, tables.
Slides presentations: programmatically create and manage slide decks.
Accessibility scanning: 14 WCAG design checks.
Design-system health audits: scored report across six categories.
Multi-file execution: run scripts across multiple Figma files concurrently.

Supported clients

Claude Desktop
Claude Code
Cursor
Windsurf

Listed from the project's documentation, not tested by this site.

Overview

Figma Console MCP is a Model Context Protocol server that gives AI assistants (like Claude, Cursor, etc.) the ability to interact with Figma through natural language. It provides 114 tools (local/NPX mode) for design system extraction, bidirectional token sync, visual debugging, design creation, variable management, FigJam boards, Slides presentations, accessibility scanning, design-system health audits, multi-file execution, shared-library inspection, cloud write relay, and more. Supports multiple connection methods: Remote SSE (read-only), Cloud Mode (web AI clients, no Node.js required), NPX (full capabilities, recommended), and Local Git (for contributors).

Similar servers

Compare with other MCP servers

Source revision 7f0d8bfe633b Data synced 2026-10-12 Read the FMRS scoring method