Claude Code and Figma: Set up the MCP server – Figma Learn - Help Center

Before you start

Who can use this feature

Starter, Professional, Education, Organization, Government, and Enterprise plans

The Figma MCP server gives Claude Code structured access to your Figma files. Claude Code can read design context, such as components, variables, layout data, FigJam content, and Make resources. It can generate code from selected frames and use Code Connect to stay aligned with your real components. Claude Code can also write to the canvas to create or update Figma content, and send live web interfaces to Figma as editable layers.

Jump to the setup instructions →

This article describes how to set up the Figma MCP server in Claude Code. To learn more about the Figma MCP server and how to use it, see:

Figma offers two versions of the MCP server: remote and desktop. The remote server has the broadest set of features and is the best choice for most users. The desktop server is intended for specific organization and enterprise needs.

Note: Install Claude Code before you start. Install Claude Code →

Set up the remote Figma MCP server (recommended)

The recommended way to set up the Figma MCP server in Claude Code is to install the Figma plugin. The plugin includes the MCP server settings and Figma’s skills for common workflows.

Install the Figma plugin

In your terminal, run:
```
claude plugin install figma@claude-plugins-official
```
Caution: If the command fails, your organization may have blocked plugin installation, either for all plugins or for the Figma plugin. Contact your Claude administrator for help, or add the server manually.
If Claude Code is running, restart it.
In Claude Code, type /plugin and press Enter to open the plugin manager.
Press the right arrow key to go to the Installed tab.
Use the arrow keys to select the figma server, then press Enter.
Press Enter again to start signing in. A browser page opens.
Click Allow access to let Claude Code access your Figma account.
Go back to Claude Code and type /plugin again.

On the Installed tab, the figma server shows as connected. You’re ready to start prompting.

Add the server manually

If you can’t install plugins, you can add the remote server yourself. This doesn’t install Figma’s skills. To add them separately, see Figma skills for MCP.

In your terminal, run:
```
claude mcp add --transport http figma https://mcp.figma.com/mcp
```
Tip: By default, Claude Code adds the server to the current project only. To make it available in all your projects, add --scope user:
```
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
```
Start a new Claude Code session.
Type /mcp and select figma.
Select Authenticate. A browser page opens.
Click Allow access.
Go back to Claude Code. You should see Authentication successful. Connected to figma.
To confirm the connection, type /mcp again.

Set up the desktop Figma MCP server

Note: We strongly recommend the remote server. The desktop server requires the Figma desktop app and a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan.

Instructions for the desktop Figma MCP server

Step 1: Enable the desktop server in Figma

Open the Figma desktop app and make sure it’s up to date.
Create or open a Figma Design file.
With nothing selected, switch to Dev Mode using the toggle in the toolbar, or press Shift D.
In the MCP server section of the right sidebar, click Enable desktop MCP server.

A confirmation message appears at the bottom of the screen when the server is running. The desktop server runs at http://127.0.0.1:3845/mcp.

Step 2: Add the desktop server to Claude Code

In your terminal, run:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Restart Claude Code so it picks up the change.
Type /mcp to confirm the Figma MCP server is listed.

To manage the server from your terminal:

List all servers: claude mcp list
See details for the Figma server: claude mcp get figma-desktop
Remove the Figma server: claude mcp remove figma-desktop

For more about MCP servers in Claude Code, see Anthropic’s documentation.

What's next?

If you're coming from the Figma MCP collection, jump back into the previous article.

For more about using the Figma MCP server, see: