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

The Figma MCP server gives Claude Code structured access to Figma files and tools. It can read design context such as components, variables, layout data, FigJam content, and Make resources, generate code from selected frames, use Code Connect to stay aligned with real components. When moving from Claude Code to Figma, you can also write directly to the canvas to create or update native 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 features of the Figma MCP server and how to use it, see:

Figma provides two versions of the Figma MCP server: remote and desktop. The remote Figma MCP server is the version most users need and has the broadest set of features. The desktop version is for specific organization and enterprise use cases. Generally, you should use the remote Figma MCP server.

Note: Make sure to install Claude code in your terminal before the setup. Install Claude Code →

Set up the remote Figma MCP server (preferred)

The recommended way to set up the Figma MCP server in Claude Code is by installing the Figma plugin, which includes MCP server settings as well as Agent Skills for common workflows.

To set up the Figma MCP server in Claude Code:

Open your terminal, and run the following command into your terminal:
```
claude plugin install figma@claude-plugins-official
```
Press Enter to start the installation process.
Restart Claude code if it was running.
Type /plugin and press Enter to open the Plugin marketplace.
Use the right arrow key on your keyboard to navigate to the Installed tab.
Use the arrow key to navigate to the figma server and press Enter to start the authorization page.
Press Enter again to begin the authentication process. An external page will open.
Then click Allow access to authenticate and allow Claude Code to access your Figma account.
After you finished the authentication, head back to the terminal and enter the /plugin command again.

Under the Installed tab, the figma server should now display as connected, and you’re ready to start prompting in Claude Code.

Set up the desktop Figma MCP server

Figma provides the local desktop version of the Figma MCP server for some specific organization and enterprise use cases, but we strongly recommend using the remote version of the Figma MCP server. The remote version of the server provides the broadest set of features.

Instructions for the desktop Figma MCP server

First, enable the desktop MCP server in Figma:

Install and open the Figma desktop app.
Open a Figma Design file.
With nothing selected on canvas, click the toggle switch in the toolbar to switch to Dev Mode.
Then, click to enable the MCP server in the right sidebar.
Figma will display a confirmation message at the bottom of the screen letting you know the server is enabled and running, and you’ll see a button to copy the address for the server.
Click copy URL, and keep it handy for your configuration in the next step.

Then, configure the desktop MCP server in Claude Code:

Open your terminal and run the MCP add command for the Claude CLI claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.
Restart Claude Code to make sure the configuration changes are picked up.
You should then see newly available figma commands as well as the Figma MCP server when you run the /mcp command.

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: