Set up Figma MCP

To get Figma MCP up and running, you have to follow a few simple steps to turn any design into code.

Enable Figma MCP

Figma MCP can be set up either locally or remotely depending on the AI tool you are using. Make sure you have “Enable desktop MCP server” turned on via the Figma logo > Preferences. This will only work for the local MCP server, which should work for Cursor, Claude Code, or other code editors or web AI tools with MCP support.

If you’re using Figma Dev Mode you will see your MCP settings in the right panel.

Image source settings

When there are images, icons, or illustrations in the design, you can use a few different options to handle image assets:

Download will download a copy of the asset to your code base.
Placeholder will use a remote placeholder image.
Local server will reference the image from the Figma desktop app.

In most cases, downloading might be the best option, unless you already have all assets in your code base. If so, you could add something like “use my existing SVG icons” in your prompt.

Cursor

You have a few different ways to setup Figma MCP in cursor.

1. Per project setup

If you work in multiple Figma environments, it might be helpful to setup Figma MCP specifically for that project. Create a mcp.json file in the .cursor folder with this content:

{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

2. Global Cursor setup

You can also go to your Cursor Settings > Tools & MCP, where you can paste the exact same code snippet as above. But this one will be saved globally, so not linked to a specific project. After saving, you will see Figma in the list of MCP servers.

You can also do it more easily with a single-click setup via Cursor’s docs.

Claude

For Claude, you can use Figma MCP in your terminal, so it's available for any code editor or directly in the web or desktop/mobile apps.

Claude Code

To setup Figma MCP in Claude Code run this command in your terminal window:
claude mcp add --transport http figma https://mcp.figma.com/mcp

After that type /mcp, you will see Figma in the list with a status: disconnected. Select Figma and choose Authenticate. A browser window will open, login with your account, give access and Figma MCP should now be authenticated. So you can prompt away.

Web

On the web, you can enable remote access to Figma by going to Connectors > Web > Figma. You will be asked to authenticate with Figma to link your account to your Claude account.

Desktop

On the desktop app, you can go to Connectors > Desktop extensions > Figma Dev Mode. You will also need the Figma Desktop app with local MCP enabled, as the desktop app will not use the remote MCP server.

Rules

Figma has some rules to get started to get the best output. Make sure to check them out and try to add them to your project to get better results.

Next Up

Tools