Quick answer: To give Claude full control of your Figma files, install Figma Console MCP, an open source MCP server by Southleft. Add it to Claude Code with your Figma personal access token, import the Desktop Bridge plugin into Figma Desktop, and run it. Claude can then create frames, edit components, update variables and take screenshots directly in your file. Setup takes about 10 minutes.

What is Figma Console MCP?

Figma Console MCP is a free, MIT licensed Model Context Protocol (MCP) server that connects AI assistants like Claude Code to Figma. It talks to your open file through a small plugin called the Desktop Bridge, plus the Figma REST API.

It ships with 121 tools, most of them built for design system work: creating and editing nodes, reading and writing variables, auditing components, checking accessibility and exporting design tokens.

Figma Console MCP vs the official Figma MCP server

Figma's official MCP server is no longer read only. It can now write to the canvas, create files and generate FigJam diagrams, and it has around 40 tools. So which one should you use?

• Made by: the official server is built by Figma. Figma Console MCP is open source, built by Southleft.

• Number of tools: about 40 for the official server, 121 for Figma Console MCP.

• Writes to canvas: both can.

• Best for: the official server shines at design to code and Code Connect. Figma Console MCP shines at design systems, variables and audits.

• Variables: Figma Console MCP edits variables on any plan. The Variables REST API needs an Enterprise plan.

• Checks and tokens: only Figma Console MCP offers accessibility and design to code parity checks, plus token export in 10 formats and DTCG import.

• Hosting: the official server is hosted by Figma with OAuth. Figma Console MCP runs locally or in Cloud Mode.

Use the official server if you mostly turn designs into code and rely on Code Connect.

Use Figma Console MCP if you maintain a design system, work with variables heavily, or want Claude to audit and document your components. Many designers run both.

What you can ask Claude to do

Once it is connected, plain language prompts become real changes in your file:

• "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"

• "Check my components for accessibility issues"

• "Export my color variables as CSS custom properties"

• "Take a screenshot of the current canvas"

For design teams this means faster iteration. For developers it means prototyping UI without leaving the terminal.

Requirements

You need three things:

1. Node.js 18 or higher. Run node --version to check. Download it from nodejs.org if needed.

2. Figma Desktop. The Desktop Bridge plugin only runs in the desktop app, so the browser version will not give you write access.

3. Claude Code, Anthropic's AI coding tool for the terminal.

How to set up Figma Console MCP in Claude Code

Step 1: Create a Figma personal access token

In Figma, open Settings → Security → Personal access tokens and generate a new token. Name it something clear like Figma Console MCP. Recommended scopes:

• File content: read only

• Variables: read only (Enterprise plans only)

• Comments: read and write

Copy the token right away. It starts with figd_ and Figma will not show it again.

Treat it like a password. Keep it out of public repositories and chats, and store it in a password manager.

Step 2: Add the MCP server to Claude Code

Run this in your terminal, replacing the placeholder with your token:

This updates ~/.claude.json for you, so there is no manual JSON editing.

Step 3: Restart Claude Code

Close and reopen Claude Code so it loads the new server. Run claude mcp list to confirm figma-console appears.

Step 4: Import the Desktop Bridge plugin

You do not need to clone the repository. The server copies the plugin to your machine when it starts.

1. Open Figma Desktop.

2. Go to Plugins → Development → Import plugin from manifest.

3. Select ~/.figma-console-mcp/plugin/manifest.json.

Can't find that folder? Run npx figma-console-mcp@latest --print-path to see where it lives.

Step 5: Run the plugin

Open the file you want Claude to work in, then go to Plugins → Development → Figma Desktop Bridge. When the status shows Local · ready, the connection is live.

Step 6: Test the connection

Ask Claude Code:

1. "Check Figma status." It should report an active connection.

2. "Create a simple frame with a blue background."

If the frame appears in your file, Claude has full write access.

Troubleshooting

• Claude says Figma is not connected: make sure the Desktop Bridge plugin is running in the file you have open. It stops when you close the file.

• The manifest file is missing: start Claude Code once so the server can copy the plugin, or use the --print-path command above.

• Nothing happens in the browser: switch to Figma Desktop. The bridge does not run in the web app.

• Variable tools fail: reading variables through the REST API needs an Enterprise plan, but the Desktop Bridge can still edit them on any plan.

Frequently asked questions

Can Claude edit Figma files?

Yes. With Figma Console MCP or the official Figma MCP server, Claude can create and edit frames, components and variables directly in your Figma file.

Is Figma Console MCP free?

Yes. It is open source under the MIT license. You only need a Figma account and Claude Code.

Does Figma Console MCP work with the Figma browser app?

Write access needs Figma Desktop, because the Desktop Bridge plugin only runs there.

Is it safe to give Claude write access to Figma?

Your token stays on your machine, and you approve Claude's actions in Claude Code. Test on a duplicate file first, and use Figma's version history to roll back any change you don't like.

Can I use the official Figma MCP and Figma Console MCP together?

Yes. Many teams use the official server for design to code and Code Connect, and Console MCP for design system maintenance.

Final thoughts

Giving Claude write access turns it from an assistant that describes your designs into a collaborator that builds with you. Start with small, low risk tasks like creating frames or renaming layers, then move on to variables and component variants once you trust the workflow.

Need help setting up AI in your design workflow? Book a free 30 minute UX call.