Figma MCP collection: How to set up the Figma remote MCP server (preferred)

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.

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!

Set up the Figma MCP server

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

We’ll walk through the configurations to set up different development tools including VS Code, Cursor, Claude code, and Codex in this lesson.

Feel free to jump ahead to whichever tool you plan to use. And remember to install VS Code, Cursor, or Codex 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.

VS Code

To set up the Figma MCP server in VS Code:

1. Open the command palette using the shortcut:
   • Mac: Cmd + Shift + P
   • Windows:  Ctrl + Shift + P
2. Search for MCP: Open User Configuration.

3. Inside the mcp.json file, paste the following code:

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

4. Save the file using the shortcut:
   1. Mac: Cmd + S
   2. Windows:  Ctrl + S

5. You’ll then see a Start button above the Figma MCP server name, select it to start the authentication process.

   

Go through the authentication process with your Figma account in an external window. Once you’re done, you should see that the Figma MCP server is now running in VS Code.

Cursor

The recommended way to set up the Figma MCP server in Cursor 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 Cursor:

1. Open the command palette using the shortcut:
   • Mac: Cmd + Shift + P
   • Windows:  Ctrl + Shift + P
2. Search for Open chat.
3. In the chat window, enter /add-plugin figma in the prompt box and hit Submit.
4. Click Add Plugin to begin the installation process.
5. After the installation process, open the command palette again and search for Cursor Settings.
6. Select Tools & MCP.
7. Under Installed MCP Servers, click Connect to go through the authentication process.

You should then see the Figma MCP server is enabled in Cursor and ready to use.

Claude Code

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:

1. Open your terminal, and run the following command into your terminal:

   claude plugin install figma@claude-plugins-official

2. Restart Claude code if it was running.
3. Type /plugin and press Enter to open the Plugin marketplace.
4. Use the right arrow key on your keyboard to navigate to the Installed tab.
5. Use the arrow key to navigate to the figma server and press Enter to start the authorization page.
6. Press Enter again to begin the authentication process. An external page will open
7. Then click Allow access to authenticate and allow Claude Code to access your Figma account.
8. 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.

Codex

To set up the Figma MCP server in Codex:

1. In the upper-left corner of the Codex app, click Skills.
2. In the list of skills, click + next to each of the Figma skills.
   • Figma
   • Figma Implement Design
   • Figma Use
   • Figma Code Connect Components
   • Figma Create Design System Rules
   • Figma Create New File
   • Figma Generate Library
   • Figma Generate Design
3. In the bottom left corner of the Codex app, click Settings, and then MCP servers.
4. In the list of recommended servers, click Install and authenticate for the Figma server. When you're prompted, authorize the server.

Using the Figma MCP server

To start using the Figma 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:

1. Right click on a layer.
2. 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.
3. 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!