Figma Console MCP

Name: Figma Console MCP
Author: Southleft, LLC

Read and edit Figma designs, variables and components, and sync design tokens with code

By Southleft, LLC TypeScript Remote (hosted) · Streamable HTTP Local · stdio Design Developer tools

GitHub npm Website

85 popularity score ★ 3.2k ↓ 14k/wk

Connect your client

Remote (hosted)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server.

Or add it by command or config

Claude (desktop and web)Settings > Connectors > Add Custom Connector, paste the URL

https://figma-console-mcp.southleft.com/mcp

Local (npm)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.

Or add it by command or config

It needs FIGMA_ACCESS_TOKEN. Replace each <NAME> with your value.

Claude CodeTerminal

claude mcp add figma-console -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y figma-console-mcp@latest

Claude Desktopclaude_desktop_config.json

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

Cursor~/.cursor/mcp.json

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

VS Code.vscode/mcp.json

{
  "servers": {
    "figma-console": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-console-mcp@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
      }
    }
  }
}

Codex~/.codex/config.toml

[mcp_servers.figma-console]
command = "npx"
args = ["-y", "figma-console-mcp@latest"]

[mcp_servers.figma-console.env]
FIGMA_ACCESS_TOKEN = "<FIGMA_ACCESS_TOKEN>"

Gemini CLITerminal

gemini mcp add --scope user -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> figma-console npx -- -y figma-console-mcp@latest

Local (from source)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio

Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.

Or add it by command or config

It needs FIGMA_ACCESS_TOKEN. Replace each <NAME> with your value.

FirstTerminal

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

Claude CodeTerminal

claude mcp add figma-console -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- node '<ABSOLUTE_PATH_TO_CLONE>/dist/local.js'

Claude Desktopclaude_desktop_config.json

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/dist/local.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
      }
    }
  }
}

Cursor~/.cursor/mcp.json

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/dist/local.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
      }
    }
  }
}

VS Code.vscode/mcp.json

{
  "servers": {
    "figma-console": {
      "type": "stdio",
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/dist/local.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
      }
    }
  }
}

Codex~/.codex/config.toml

[mcp_servers.figma-console]
command = "node"
args = ["<ABSOLUTE_PATH_TO_CLONE>/dist/local.js"]

[mcp_servers.figma-console.env]
FIGMA_ACCESS_TOKEN = "<FIGMA_ACCESS_TOKEN>"

Gemini CLITerminal

gemini mcp add --scope user -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> figma-console node -- '<ABSOLUTE_PATH_TO_CLONE>/dist/local.js'

Settings 6

Set together: http
`FIGMA_ACCESS_TOKEN` secret	Required: Figma personal access token (figd_...). REST tools fail without it. See requirements for the scopes the README asks for.
`ENABLE_MCP_APPS`	Optional: Set to true to turn on the experimental MCP Apps token browser, as the docs' example config does.
`FIGMA_WS_PORT`	Optional: Preferred port for the plugin's WebSocket link. The server tries the next ports up to 9232 if it is taken. Default `9223`.
`FIGMA_WS_HOST`	Optional: Address the WebSocket bridge binds to. Default `localhost`.
`FIGMA_MCP_HTTP_PORT`	Optional: Also serve MCP over Streamable HTTP at http://127.0.0.1:<port>/mcp. Off when unset.
`FIGMA_MCP_HTTP_TOKEN` secret	Optional: With FIGMA_MCP_HTTP_PORT, require this bearer token on every HTTP request.

What it does

Figma Console MCP is aimed at design-system work in Figma. It reads variables, components and styles as structured data, and it can build and edit frames, components, slots and variables. It also handles comments, annotations and version diffs, and checks accessibility and how closely code matches the design. Newer tools set auto layout or a CSS-style grid on a frame in one call (figma_set_layout) and apply shaders with their properties set by name. A token sync tool writes Figma variables out as DTCG and other token files and can push edits from those files back into Figma. In local mode a group of figma_ds tools scans an app's codebase, pulls tokens out of its styling and scaffolds a design-system package.

There are four ways to run it. The npm package (npx) and a built clone are the local mode with all 130 tools. They need Node.js 18 or later, Figma Desktop, a personal access token and the Desktop Bridge plugin, which you import from a manifest the server writes under ~/.figma-console-mcp/plugin/. Cloud Mode is a hosted endpoint for web clients such as Claude.ai, v0, Replit or Lovable. You pair it with the same plugin using a six-character code and get 105 tools, writing included. A hosted SSE endpoint gives read-only access after Figma sign-in.

Some details only show up in the source. A figma_execute script stops after 5 seconds unless you pass a longer timeout, and the server caps that at 300000 ms. figma_list_shaders allows 30 seconds for a page and two minutes when it scans the whole file. Since 1.44 a local server can also answer over Streamable HTTP on 127.0.0.1 when FIGMA_MCP_HTTP_PORT is set, so several local clients can share one Figma connection.

Southleft makes it, not Figma, under the MIT licence.

What it needs

To run it yourself	Node.js 18+
Runs on	macOS, Windows, Linux
Figma	FreePersonal access token for local mode. Variable editing goes through the plugin, so it works without an Enterprise plan
Also	Figma Desktop app running with a file open Desktop Bridge plugin imported and running in Figma

Create a Figma personal access token (it starts with figd_). The README asks for read on File content, File versions, Library content, Library assets and Current user, read and write on Comments, and Variables read only on Enterprise plans, where it is optional. Set it as FIGMA_ACCESS_TOKEN. Start the server once, then in Figma Desktop use Plugins > Development > Import plugin from manifest and pick ~/.figma-console-mcp/plugin/manifest.json (`npx figma-console-mcp --print-path` prints the path). Run the plugin in your file and it finds the server on ports 9223 to 9232. Re-import if your plugin predates 1.41.5. Cloud Mode needs no Node.js but still needs Figma Desktop with the plugin.

Limits

Platform Writing needs Figma Desktop with the Desktop Bridge plugin running. The browser version of Figma is not enough
Read only The hosted /sse endpoint is read-only and cannot create or change designs
Not covered Cloud Mode has 105 of the 130 tools: no console logs, selection or change tracking, and no figma_ds codebase tools
Not covered fileKey on figma_execute, figma_set_layout and the Slots tools works in local mode only. Cloud Mode pairs with one plugin and rejects it
Limit Figma caches the plugin, so a release that changes plugin files needs a manual re-import of the manifest
Limit figma_execute stops a script after 5000 ms by default, and a longer timeout is capped at 300000 ms
Not covered Shaders can be applied and tuned but not created. That happens in Figma itself
Early release The MCP Apps token browser behind ENABLE_MCP_APPS is marked experimental

Who it suits

Suits design-system teams who work in Figma Desktop and want an assistant to inspect and change variables, components and slots, or to keep token files in a repo in step with Figma. The local npx setup gives the full tool set and touches files in your codebase. Pick Cloud Mode when you only use a web client such as Claude.ai and do not want Node.js, accepting fewer tools and a relay through Southleft's server. If you only need to read design data, the hosted SSE endpoint is the lighter option. It is a community project from Southleft rather than Figma's own server, and anyone working in Figma in the browser only cannot use the write tools.

Tools 60 of 130

26 only read, 27 change things, 7 can delete or overwrite. A ? marks an optional parameter.

figma_get_status: Report whether the Desktop Bridge is connected and which file it targets
figma_reconnect: Force a fresh connection to Figma Desktop
figma_navigate: Switch the active file among files that have the plugin open
figma_list_open_files: List files connected through the plugin and show the active one
figma_get_console_logs: Fetch console output captured by the plugin
figma_watch_console: Stream plugin console output for up to five minutes
figma_clear_console changes: Empty the captured log buffer
figma_reload_plugin changes: Reload the current page or plugin
figma_take_screenshot: Export an image of the page or a node
figma_capture_screenshot: Render a node from inside the plugin, showing edits not yet in the REST API
figma_get_selection: Return the nodes selected in Figma right now (local mode)
figma_get_design_changes: Return buffered document change events (local mode)
figma_get_design_system_summary: Short overview of components and token collections
figma_get_token_values: Variable values by type, 50 by defaulttype?: enumfilter?: stringlimit?: number
figma_search_components: Search local and library components by name or category
figma_get_component_details: Variants, properties and keys of one component
figma_get_library_components: List published components in a team library file (needs the token)
figma_get_file_data: File structure from the REST API
figma_get_variables: Read variables and token collections
figma_get_component: Component metadata or a spec to rebuild it
figma_get_styles: Color, text and effect styles
figma_get_component_image: Rendered image of a component
figma_get_component_for_development: Component data together with its image
figma_set_instance_properties changes: Set text, boolean, swap or variant properties on an instance
figma_execute deletes: Run any Figma Plugin API script in the open filecode: stringtimeout?: numberfileKey?: string
figma_create_component_set changes: Build a component set with every variant from an axes matrix
figma_arrange_component_set changes: Lay out variants as a labeled component set grid
figma_set_description changes: Write a description on a component or style
figma_instantiate_component changes: Place an instance of a component
figma_add_component_property changes: Add a property to a component
figma_edit_component_property changes: Change a component property
figma_delete_component_property deletes: Remove a component property
figma_create_child changes: Create a node inside a parent
figma_move_node changes: Move a node
figma_resize_node changes: Resize a node
figma_delete_node deletes: Delete a node
figma_set_text changes: Replace a text node's content, wrap style or variable-font axes
figma_set_fills changes: Set fills, optionally bound to a variable
figma_set_strokes changes: Set strokes, optionally bound to a variable
figma_set_image_fill changes: Fill a node with an image
figma_set_layout changes: Set auto layout or a CSS-style grid on a frame and place its childrennodeId: stringmode?: enumgap?: numberpadding?: anyprimaryAlign?: enumcounterAlign?: enumwrap?: booleangrid?: objectchildren?: arrayfileKey?: string
figma_list_shaders: List shaders used in the file or page with their properties, plus library shadersscope?: enumnodeId?: stringfileKey?: string
figma_apply_shader changes: Add a shader to fills, strokes or effects, or set an applied one's properties by namenodeId: stringshaderId?: stringtarget?: enumindex?: integerreplace?: booleanproperties?: objectopacity?: numberblendMode?: enumvisible?: booleanfileKey?: string
figma_create_slot changes: Add a slot to a componentnodeId: stringname?: stringwidth?: numberheight?: numberlayoutMode?: enumfileKey?: string
figma_get_slots: List slots on a component, set or instance
figma_append_to_slot changes: Fill an instance's slot with cloned or new content
figma_reset_slot deletes: Clear what an instance's slot holds
figma_add_slot_property changes: Turn an existing frame into a slot by binding a SLOT property
figma_create_variable changes: Create a color, number, string or boolean variable
figma_update_variable changes: Change a variable's value in one mode
figma_batch_create_variables changes: Create up to 100 variables at once
figma_setup_design_tokens changes: Create a collection, its modes and variables in one step
figma_delete_variable deletes: Delete a variable
figma_delete_variable_collection deletes: Delete a collection with all its variables
figma_lint_design: Check the canvas for WCAG and design-system issues
figma_get_comments: Read file comments
figma_post_comment changes: Post a comment, optionally pinned to a node
figma_export_tokens changes: Write Figma variables to token files in a codebase (DTCG, CSS, Tailwind and others)
figma_import_tokens deletes: Apply token file edits to Figma variables, deleting only under strategy replace
figma_ds_analyze: Scan app codebases for components, styling and structure (local mode)

Popularity

85 popularity score, on our list (the bar is 36)

★ 3.2k ↓ 14k/wk

GitHub stars	3,193	42.1 points
Stars in 30 days	+744	10 points
npm downloads, last week	14,295	33.2 points

Measured 2026-11-07. How the score works.

Where it is published

Code	southleft/figma-console-mcp ★ 3.2k
npm	figma-console-mcp 1.46.0, 2026-10-29
Hosted	`https://figma-console-mcp.southleft.com/mcp` Streamable HTTP · OAuth sign-in

What it can reach

Runs	On your machine, or on the maker's servers
Reaches	Your account at a service, The internet, Files on your machine, Your code
Changes things	Yes: it can write, send, create or delete
Sign-in	OAuth sign-in for the hosted endpoint; an API key or token to run it yourself
Licence	MIT (npm)
Last code change	2026-10-29

Uses your Figma account: local mode reads a personal access token from FIGMA_ACCESS_TOKEN, and the hosted endpoints sign in with Figma (OAuth) or take the token as a Bearer header. Tools create, edit and delete nodes, variables and comments, and figma_execute runs any Plugin API script in the open file. figma_import_tokens deletes variables only under strategy replace. figma_export_tokens overwrites its target files, but under the default merge strategy refuses when that would drop tokens it does not manage. Local mode writes plugin files to ~/.figma-console-mcp/ and opens a WebSocket on localhost ports 9223 to 9232. FIGMA_MCP_HTTP_PORT adds an MCP endpoint on 127.0.0.1 only. The figma_ds tools read and write your codebase. Cloud Mode relays commands through Southleft's server.

Over time

GitHub stars 3.2k +744 (+30 %)

3.2k2.4k

7 Oct 20267 Nov 2026

npm downloads a week 14k +14k (+178588 %)

80k2

17 Nov 20257 Nov 2026

Before the site measured it, read from npm's daily download counts.

Popularity score 85 +7 (+10 %)

9070

7 Oct 20267 Nov 2026

What is rising across the directory

Sources

Page checked 2026-11-03.

Badge for your README

Shows this server's rank in its category, and stars for a server that runs on your machine. It updates every hour.

MarkdownREADME.md

[![Figma Console MCP on EveryMCPServer](https://everymcpserver.com/badge/figma-console-mcp.svg)](https://everymcpserver.com/servers/figma-console-mcp)

Connect your client

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Settings 6

What it does

What it needs

Limits

Who it suits

Tools 60 of 130

Similar servers

Figma MCP Bridge

Figwright

Claude Talk to Figma MCP

figma-ui-mcp

Framelink MCP for Figma

Canvas Kit MCP