Figma MCP collection: How to set up the Figma remote MCP server – Figma Learn - Help Center

This video covers how to set up the remote Figma MCP server. View instructions to set up the desktop Figma MCP server instead →

Figma’s remote MCP server allows you to connect directly to an MCP server hosted by Figma. Then, you can use the context of your Figma design files to improve you workflows in your favorite AI development tools and build faster.

Using the remote MCP server is a great option if you prefer to use Figma in the browser, or if you’re unable to use the Figma desktop app. If you prefer using the desktop app, check out our lesson about how to set up the desktop MCP server.

No matter which version of the MCP server you choose to use, you’ll have access to the tools you need to align your code with your design specifications.

In this lesson, we’ll walk you through how to set up the remote Figma MCP server in these development tools. Then, we’ll show you how to use the Figma MCP server to pass context from your Figma Design files. Let’s get started!

Setup

Setting up the remote Figma MCP server requires you to configure your preferred development tools.

No matter which tool you use, you’ll just need to configure the MCP server using this URL https://mcp.figma.com/mcp where Figma hosts the MCP server.

//The correct remote MCP server configuration
{
	"mcpServers": {
		"FigmaRemoteMcp": {
			"url": "<http://mcp.figma.com/mcp>"
		}
	}
}

To get started:

Create or open a Figma Design file from the browser.
With nothing selected on canvas, switch to Dev Mode.
In the right inspect panel, click “Set up an MCP client”.

Here, you’ll find the configurations to set up different development tools including VS Code, Claude Code, and Cursor. We’ll walk through each of them in this video.

Feel free to jump ahead to whichever tool you plan to use. And remember to install VS Code or Cursor on your computer if you choose to use them as your development tool. For Claude code, we’ll setup the Figma MCP server using the terminal, but be sure to run npm install to install Claude code on your computer beforehand.

Cursor

To set up the remote MCP server in Cursor:

In the Dev Mode MCP configuration menu, Select Cursor from the sidebar.
Click the Add button, which will bring you to Cursor MCP settings page.
Check to make sure the URL is correct https://mcp.figma.com/mcp, then click Install.
Click Connect to go through the authentication process.
Click Open if Cursor asks you to confirm.

You should then see the Figma MCP server is enabled on Cursor and ready to use!

Download Cursor →

VS Code

To set up the remote MCP server in VS Code:

In the Dev Mode MCP configuration menu, Select VS Code from the sidebar.
Click the Add button, which will take you to VS Code Figma MCP server installation page.
Check to make sure the URL is correct https://mcp.figma.com/mcp, then click Install.
Complete the authentication process with your Figma account to allow VS code to access it.
After the authentication, the Figma MCP server is installed in VS Code.
Open the command palette, and search for “MCP: Open User Configuration”.
Select it to open the mcp.json file, and you should see the server is now running.

{
  "inputs": [],
  "servers": {
    "figmaRemoteMcp": {
      "url": "<https://mcp.figma.com/mcp>",
      "type": "http"
    }
  }
}

Download VS Code →

Claude code

Last, we’ll set up the MCP server in Claude Code.

First, open your terminal and run this MCP add command into your terminal to add the Figma MCP to Claude Code.

claude mcp add --transport http figma-remote-mcp <https://mcp.figma.com/mcp>

Then, restart Claude code if it was running.
You can type /mcp in Claude to manage all of your MCP servers.
Hit Enter to log in to Figma if the figma-remote-mcp server will show that it is currently disconnected.
Hit Enter, and then click Allow access to authenticate and allow Claude Code to access your Figma account.
After you finish authentication, you should see a confirmation message in Claude Code.
To confirm that Figma’s remote MCP server is connected, use the /mcp command again.

The figma-remote-mcp server should now display as connected. Congrats! You’re ready to start prompting in Claude Code.

Download Claude Code →

Using the MCP server

To start using the MCP server, you need:

A full or dev seat (other seats may have usage limits with the MCP server)
A Figma Design, Figma Make, or FigJam file
Edit or view only permissions to that file. If someone else owns the file your team wants to use, just ask them to share it with you first.

The remote Figma MCP server is link-based. This means that you need to provide the context of the link or selection that you want the MCP server to use, by copying from a file, and pasting it into your tool of choice.

To get the link to an object, select a layer or frame in any of your Figma Design files:

Right click on a layer.
Choose copy link to selection. You can also copy the URL to that layer from your browser’s address bar. This will include the node ID for the object in your file.
Then, paste the URL into your development tool to scope your prompt to that node.

You can also use the entire file URL if you have nothing selected on the canvas, and copy the URL from the address bar. Doing this allows you to extract context from the entire Design file If you’re using the MCP server with Figma Make, you will likely want to pass the entire file URL using this method.

Wrap up

Now that you’ve got the remote Figma MCP set up in your code editor, you’re ready to start building and coding with extra context and information straight from your Figma Design files.

Trying to set up the Figma MCP server on other code editors? Check out our developer docs to learn more.

Figma’s MCP servers work best with Code Connect to keep your codebase consistent with your design system. Check out our Code Connect documentation to learn more.

Check your knowledge!