Figma MCP collection: How to setup the Figma desktop MCP server

Figma's MCP server brings context from your Figma files and your design into your favorite agentic development tools—like VS Code, Claude Code, and Cursor—to keep your code aligned to your design specifications.

In this lesson, we’ll walk you through the steps to set up the Figma desktop MCP server.

In order to use the Figma desktop MCP server, you’ll need the Figma Desktop app. So go ahead and download the desktop app if you haven’t already. And if you already have it, make sure you’re on the latest version.

Figma also has a remote MCP server if you prefer to use Figma in the browser. Either way, you’ll have the tools you need to align your code with your designs.

Now let’s learn how to set up the MCP server!

Setup the desktop MCP server

To get started setting up the desktop MCP server, follow these steps in Figma:

1. Install and open the Figma desktop app.
2. Open a Figma Design file.
3. With nothing selected on canvas, click the toggle switch in the toolbar to switch to Dev Mode.
4. Then, click to enable the MCP server in the right sidebar.
5. 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.
6. Click copy URL, and keep it handy for your configuration in the next step.

Now, let's walk through how to add the Figma MCP server to a few development tools including Cursor, VS Code, and Claude Code. Be sure to install the tools on your computer before the setup. Feel free to jump ahead to whichever tool you plan to use.

Cursor

To set up Figma desktop MCP server with Cursor:

1. Open the command palette.
   • macOS: Shift Command P
   • Windows: Shift Ctrl P
2. Search for "Cursor settings".
3. Click on the MCP tab.
4. Click Add Custom MCP.
5. Copy the configuration below.
6. Then save the file and head back to settings.

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

You should see the Figma MCP tool enabled in Cursor. That means you’re all set up and ready to start using the MCP server.

Download Cursor →

VS code

To set up Figma desktop MCP server in VS Code:

1. Make sure you have GitHub co-pilot enabled. This is required to use the Figma MCP server.
2. Open the command palette and search for “Add server”.
   • macOS: Shift Command P
   • Windows: Shift Ctrl P
3. Select HTTP.
4. Paste the server URL `http://127.0.0.1:3845/mcp in the search bar, then hit Enter.
5. Type in “Figma MCP” when it asks for a server ID, then hit Enter.
6. If you have a workspace open, select whether you want to add the server globally or only for the workspace. 
7. Once confirmed, you'll see a configuration like this in your mcp.json file.

Download VS Code →

Claude Code

To set up Figma desktop MCP server in Claude Code:

1. 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.
2. Restart Claude Code to make sure the configuration changes are picked up.
3. You should then see newly available figma commands as well as the Figma MCP server when you run the /mcp command.

From here, you can start prompting or using tools right from Claude code.

Download Claude Code →

Using the desktop MCP server

Now that you’ve got the desktop MCP server set up, here are a few tips on how it works.

The MCP server is selection based. This means that it can understand which layers you have selected inside of a Figma file.

Try selecting a layer in your design file from the desktop app, and enter a prompt to ask the tool to generate a react component based on the selection. The agentic development tool will read your selection in the Figma file and generate code based on the design.

If you’re just getting started and don’t have design files to use with the available tools, you can find example files on the Figma Community, or grab a copy of Figma’s official Simple Design System to try out more of the tools.

Wrap up

With the Figma desktop MCP server set up, you’re ready to bring the context of all of your designs right into your development tools.

Trying to set up the Figma MCP server for code editors not covered in this video? Check out the full catalog of supported clients here.

And did you know that Figma’s MCP servers work best with Code Connect? Code Connect bridges your codebase and Dev Mode and enables the display of actual design system component code in Figma. You’ll find plenty about Code Connect in Figma’s developer documentation.