If you've tried connecting Claude to Figma through the official integration, you may have already noticed the frustrating limitation: Claude can look at your designs, but it can't touch them. It can describe your button component. It can tell you what's in a frame. But ask it to change something — add a dark mode, update a color token, create a new component — and it'll politely decline. Read-only.

That's where Figma Console MCP comes in.

Built by the team at Southleft, this open-source tool bridges Claude Code and Figma in a way the official integration never intended to. Instead of a passive observer, Claude becomes an active collaborator — one that can create frames, edit existing designs, manage your design variables, take screenshots, and debug your Figma plugins in real time. It ships with over 56 tools compared to the official integration's ~16, and every one of those extra tools is about doing rather than just reading.

This guide walks you through the full setup from scratch.

What You'll Actually Be Able to Do

Before diving into the steps, it helps to understand the difference in practice. With Figma Console MCP active, you can give Claude prompts like:

• "Create a login card with email and password fields"

• "Add a dark mode variant to my Button component"

• "Update the primary color variable to #3B82F6"

• "Take a screenshot of the current Figma canvas"

These aren't read operations. Claude is reaching into your file and making things happen. For design teams that want to move faster, or developers who want to prototype UI without leaving the terminal, this changes the workflow entirely.

What You Need Before You Start

Three things, all of which you likely already have:

Node.js 18 or higher. Run node --version in your terminal to confirm. If you don't have it yet, grab it from nodejs.org.

Figma Desktop — not the browser version. This is a hard requirement, not a nice-to-have. The Desktop Bridge plugin that enables write access can only run inside the desktop app. The browser version won't work.

Claude Code. This is Anthropic's terminal-based AI tool. If you haven't set it up yet, that's the starting point.

Part 1: The Six-Step Setup

Step 1 — Get Your Figma Personal Access Token

Head to figma.com/developers/api#access-tokens and click "Get personal access token." Give it a descriptive name (something like Figma Console MCP works fine), then copy the token the moment it appears on screen. It starts with figd_ and you will not be able to see it again after closing that dialog.

Treat this token like a password. Don't paste it into a public repository, don't share it in a chat. Store it somewhere secure — a password manager is ideal.

Step 2 — Add the MCP Server to Claude Code

Open your terminal and log into Claude first:

claude /login

claude /login

claude /login

A browser window will open to complete authentication. Once you're back in the terminal, run the following command — replacing figd_YOUR_TOKEN_HERE with the token you just copied:

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

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

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

This automatically updates your ~/.claude.json configuration. No manual JSON editing required.

Step 3 — Clone the Repository

git clone https://github.com/southleft/figma-console-mcp.git ~/figma-console-mcp

git clone https://github.com/southleft/figma-console-mcp.git ~/figma-console-mcp

git clone https://github.com/southleft/figma-console-mcp.git ~/figma-console-mcp

Step 4 — Import the Desktop Bridge Plugin into Figma

Open Figma Desktop and navigate to:
Menu → Plugins → Development → Import plugin from manifest…

Select: ~/figma-console-mcp/figma-desktop-bridge/manifest.json

Step 5 — Run the Plugin

Go to Plugins → Development → Figma Desktop Bridge and click Run. Wait for the green dot — that means the WebSocket connection is live.

Step 6 — Restart Claude Code and Verify

claude --dangerously-skip-permissions

claude --dangerously-skip-permissions

claude --dangerously-skip-permissions

Run claude mcp list to confirm figma-console is connected, then test with: "Create a simple rectangle in my Figma file." If a rectangle appears, you're all set.