← Back to directory

Figma Console MCP

Community

Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.

GitHub source repository ↗

★ 2.2k Stars Category · Collaboration Very popular Source revision e4d5605e6108

63FMRS · C

Reliability

8/20

Security and permissions

13/20

Maintenance

15/20

Documentation

14/20

Setup experience

13/20

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.

Read the FMRS scoring method →

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

Tools

figma_get_status

Check WebSocket bridge connection and file context.

figma_diagnose

Designer-readable health check and setup guidance.

figma_reconnect

Force reconnect to the Desktop Bridge plugin.

figma_navigate

Switch active file target among connected plugins (Local) or navigate cloud headless browser (Remote/Cloud).

figma_get_console_logs

Retrieve console logs.

figma_watch_console

Real-time log streaming.

figma_clear_console

Clear log buffer.

figma_reload_plugin

Reload current page.

figma_take_screenshot

Capture UI screenshots.

figma_get_design_system_kit

Full design system in one call — tokens, components, styles, visual specs.

figma_get_variables

Extract design tokens/variables.

figma_get_component

Get component data (metadata or reconstruction spec).

figma_get_component_for_development

Component plus 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_audit_design_system_report

Scored health audit of the design system across six categories with remediation.

figma_get_library_component_by_key

Resolve any component key to full properties + variants + visual specs.

figma_get_library_components

Discover all components in a library file.

figma_get_library_variables

List every variable from team libraries the current file has subscribed to (works on all Figma plans).

figma_import_library_variable

Import a library variable into the current file.

figma_pair_plugin

Generate a pairing code to connect a Desktop Bridge plugin via cloud relay.

figma_execute

Run any Figma Plugin API code to create designs.

figma_execute_across_files

Run one script against several Desktop Bridge-connected files concurrently.

figma_create_component_set

Create a component set with variants from an axes matrix in one call.

figma_arrange_component_set

Organize variants into professional component sets.

figma_set_description

Add rich markdown descriptions to components, component sets, and styles.

figma_create_slot

Add a slot to a component via the GA createSlot API.

figma_get_slots

List slots on a component, component set, or instance.

figma_append_to_slot

Populate an instance's slot by cloning existing node or creating new content.

figma_reset_slot

Clear a slot's content on an instance.

figma_add_slot_property

Retrofit an existing frame as a slot via manual SLOT property binding.

figma_check_design_parity

Compare Figma component specs against code implementation, producing a scored diff report.

figma_generate_component_doc

Generate platform-agnostic markdown documentation merging Figma design data with code-side info.

figma_export_tokens

Export Figma variables to design token files (DTCG JSON, CSS, Tailwind, SCSS, etc.).

figma_import_tokens

Push code-side token edits back to Figma with full apply — creates, renames, aliases, and deletes.

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.

figjam_create_sticky

Create a sticky note with color options.

figjam_create_stickies

Batch create up to 200 stickies.

figjam_create_connector

Connect nodes with labeled connector lines.

figjam_create_shape_with_text

Create flowchart shapes (diamond, ellipse, etc.).

figjam_create_table

Create tables with cell data.

figjam_create_code_block

Add code snippets with syntax highlighting.

figjam_auto_arrange

Arrange nodes in grid, horizontal, or vertical layouts.

figjam_get_board_contents

Read all content from a FigJam board.

figjam_get_connections

Read the connection graph (flowcharts, relationships).

figma_list_slides

List all slides with IDs, positions, and skip status.

figma_get_slide_content

Get the full content tree of a slide.

figma_get_slide_grid

Get the 2D grid layout of the presentation.

figma_get_slide_transition

Read transition settings for a slide.

figma_get_focused_slide

Get the currently focused slide.

figma_create_slide

Create a new blank slide.

figma_delete_slide

Delete a slide from the presentation.

figma_duplicate_slide

Clone an existing slide.

figma_reorder_slides

Reorder slides via new 2D grid layout.

figma_set_slide_transition

Set transition effects (22 styles, 8 curves).

figma_skip_slide

Toggle whether a slide is skipped in presentation mode.

figma_add_text_to_slide

Add text to a slide with custom fonts, colors, alignment, and wrapping.

figma_add_shape_to_slide

Add rectangle or ellipse shapes with color.

figma_set_slide_background

Set a slide's background color (creates or updates).

figma_get_text_styles

Get all local text styles with IDs, fonts, and sizes.

figma_set_slides_view_mode

Toggle grid vs. single-slide view.

figma_focus_slide

Navigate to a specific slide.

Setup

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_.
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.
Start Figma Desktop, go to Plugins → Development → Import plugin from manifest..., and select ~/.figma-console-mcp/plugin/manifest.json (auto-created by the server).
Run the plugin in your Figma file; it auto-connects to the MCP server (ports 9223-9232).
Restart your MCP client to load the new configuration.
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"
      }
    }
  }
}

Generate and validate client config

Fit and risk

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.

Troubleshooting

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.
'Server disconnected' message: ensure server and plugin versions are compatible, restart the MCP client (recent versions fixed orphan-process miskilling).
Cannot write: confirm using local mode (NPX or Local Git) or Cloud Mode with pairing; Remote SSE is read-only.
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.
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.
Performance issues: for many files, use figma_execute_across_files and explicitly specify fileKeys to avoid unintended execution.

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 DesktopFull support

Claude CodeFull support

CursorFull support

WindsurfFull support

Related MCP servers

Compare with other MCP servers