Skip to main content

Set up the remote server (recommended)

note

Only clients listed in the Figma MCP catalog, such as VS Code, Cursor, and Claude Code, can connect to the Figma MCP server. If you're a developer who wants to connect a new MCP client, join the waitlist.

The remote server connects directly to Figma at https://mcp.figma.com/mcp. You don't need the Figma desktop app. You sign in with your Figma account the first time you connect.

tip

Where available, install the Figma plugin for your client instead of adding the server manually. The plugin includes the MCP server settings and Figma’s skills, which help your agent get more reliable results, especially when writing to the canvas.

Enable the remote MCP server​

Follow the steps for your client:

Claude Code​

Install Claude Code before you start.

The recommended way to set up the Figma MCP server in Claude Code is to install the Figma plugin. The plugin includes the MCP server settings and Figma’s skills for common workflows.

Scene_setup in claude code.gif

Install the Figma plugin​

  1. In your terminal, run:

    claude plugin install figma@claude-plugins-official

    Caution: If the command fails, your organization may have blocked plugin installation, either for all plugins or for the Figma plugin. Contact your Claude administrator for help, or add the server manually.

  2. If Claude Code is running, restart it.

  3. In Claude Code, type /plugin and press Enter to open the plugin manager.

  4. Press the right arrow key to go to the Installed tab.

  5. Use the arrow keys to select the figma server, then press Enter.

  6. Press Enter again to start signing in. A browser page opens.

  7. Click Allow access to let Claude Code access your Figma account.

  8. Go back to Claude Code and type /plugin again.

On the Installed tab, the figma server shows as connected. You’re ready to start prompting.

Add the server manually​

If you can’t install plugins, you can add the remote server yourself. This doesn’t install Figma’s skills. To add them separately, see Figma skills for MCP.

  1. In your terminal, run:

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

    Tip: By default, Claude Code adds the server to the current project only. To make it available in all your projects, add --scope user:

    claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

  2. Start a new Claude Code session.

  3. Type /mcp and select figma.

  4. Select Authenticate. A browser page opens.

  5. Click Allow access.

  6. Go back to Claude Code. You should see Authentication successful. Connected to figma.

  7. To confirm the connection, type /mcp again.

Codex​

The recommended way to set up the Figma MCP server is to install the Figma plugin in the Codex app.

codex-plugin.png

Install the Figma plugin in the Codex app​

  1. Install the Codex app if you haven't already.
  2. In the upper-left corner of the Codex app, click Plugins.
  3. Click + next to Figma.
  4. Click Install Figma.
  5. When prompted, click Allow access to let ChatGPT access your Figma account.

Go back to Codex. The Figma plugin shows as connected, and you’re ready to start prompting. To see what you can do, check out Tools and prompts.

Set up the Codex CLI​

If you use the Codex CLI instead of the app, add the remote server from your terminal. This doesn't install Figma’s skills. To add them separately, see Figma skills for MCP.

  1. Install the Codex CLI if you haven't already.

  2. In your terminal, run:

    codex mcp add figma --url https://mcp.figma.com/mcp

  3. When prompted, sign in to Figma and allow access.

You’re ready to start prompting Codex. To see what you can do, check out Tools and prompts.

Cursor​

The recommended way to set up the Figma MCP server in Cursor is to install the Figma plugin. The plugin includes:

  • The Figma MCP server settings
  • Skills for implementing designs, connecting components with Code Connect, and creating design system rules
  • Rules for handling assets from the Figma MCP server

HC_setup in cursor.gif

Install the Figma plugin​

  1. Open the command palette:

    • Mac: Cmd Shift P
    • Windows: Ctrl Shift P

  2. Search for Open chat.

  3. In the chat, enter this command and click Submit:

    /add-plugin figma

    You can also install the plugin from the Figma plugin page in the Cursor Marketplace.

  4. Click Add Plugin.

  5. When the installation finishes, open the command palette again and search for Cursor Settings.

  6. Select Tools & MCP.

  7. Under Installed MCP Servers, click Connect next to Figma.

  8. When prompted, click Allow access to let Cursor access your Figma account.

The Figma MCP server is now on in Cursor, and you're ready to start prompting. To see what you can do, check out Tools and prompts.

Add the server manually​

If you can't install plugins, you can add the remote server yourself. This doesn't install Figma's skills or rules. To add skills separately, see Figma skills for MCP.

  1. Click this link to open the Figma MCP server settings in Cursor: Add the Figma MCP server to Cursor
  2. Under Install MCP Server?, click Install.
  3. Click Connect next to Figma.
  4. Click Open.
  5. Click Allow access to let Cursor access your Figma account.

You're ready to start prompting.

tip

If the link doesn't open Cursor, add the server yourself. In Cursor Settings, go to Tools & MCP, click to add a custom MCP server, and add this configuration:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Save the file, then click Connect next to Figma to sign in.

VS Code​

HC_setup in VS code.gif

The quickest way is to install the Figma MCP server in VS Code with one click, then follow the prompts to sign in. To set it up yourself instead:

  1. Open the command palette:

    • Mac: Cmd Shift P
    • Windows: Ctrl Shift P

  2. Search for and select one of these:

    • MCP: Open User Configuration to use the Figma MCP server in all your projects
    • MCP: Open Workspace Folder Configuration to use it only in your current workspace

    If you don't have an mcp.json file yet, VS Code asks you to create one.

  3. In the mcp.json file, paste this code:

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

  4. Save the file:

    • Mac: Cmd S
    • Windows: Ctrl S

  5. Above the Figma server name in the file, click Start.

  6. When prompted, click Allow access to let VS Code access your Figma account.

The Figma MCP server is now running in VS Code, and you're ready to start prompting. To see what you can do, check out Tools and prompts.

tip

For more reliable results, also install the Figma plugin for GitHub Copilot, which includes Figma's skills. Learn more about Figma skills for MCP.

Xcode​

note

Requires Xcode 27 beta. Xcode supports the remote Figma MCP server only. Figma also offers a SwiftUI skill to use with the Figma MCP server in Xcode. Learn more about Figma skills for MCP.

The recommended way to set up the Figma MCP server in Xcode is to install the Figma plugin. The plugin includes the MCP server settings and Figma's skills for common workflows.

  1. Make sure Xcode 27 beta is installed and open.
  2. Click One-click setup to add the Figma plugin to Xcode.
  3. Next to the Figma plugin, click Sign in… and allow access to your Figma account.

To check that the plugin is installed, go to Settings in Xcode and click Intelligence. The Figma plugin is listed in the Plug-ins section.

You're ready to start prompting. To see what you can do, check out Tools and prompts.

Manually set up the remote Figma MCP server​

You can also add the plugin yourself. It works the same way as the one-click setup.

  1. In Xcode, go to Settings and click Intelligence.
  2. If you haven't already, install an agent, such as Claude Agent, Codex, or Gemini.
  3. Click Plug-ins.
  4. Click Add plug-in, then choose Add from URL.
  5. In the URL field, enter https://github.com/figma/mcp-server-guide.
  6. Choose the Figma Plug-in.
  7. Next to the Figma plugin, click Sign in… and allow access to your Figma account.

Other clients​

For other clients, add a new MCP server in your client using the HTTP transport and the URL https://mcp.figma.com/mcp, then sign in to Figma when prompted. If you're not sure how, ask your client or check its documentation. See the list of supported clients.

Use the MCP server​

Here are some example prompts to get you started:

  • "/figma-use can you help me create a new Figma design using my design system components? Place it in a new Figma file."
  • "Capture the UI of my app homepage as frames in <Figma file URL>."
  • "Create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool."

To point your agent at a specific design, include a link in your prompt. In Figma, right-click a frame or layer and select Copy link to selection, then paste the link into your prompt. Your client won’t open the link, but it extracts the node ID the MCP server needs to find the right object.

With the desktop server, you can also select a frame or layer in the Figma desktop app and prompt your client to work with your current selection.

Two concepts are important to understand when working with the Figma MCP server:

  • Tools let your MCP client take actions with Figma files. See Tools and prompts for the available tools and example prompts.
  • Skills tell your MCP client how to use tools effectively. Skills get you higher quality, more reliable results from the Figma MCP server.

Once your server is set up, skills are the best way to start prompting. See Use skills with the Figma MCP server and Figma skills for MCP.

Example: Get design context​

Getting design context and code from files is link-based. To get design context:

  1. In Figma Design, right-click the frame or layer you want design context for and select Copy link to selection.

  2. In your MCP client, paste the link and prompt your client to help you implement the design.

    MCP client with link-based prompt

Your client won't open the link directly. Instead, it extracts the node ID the MCP server needs to identify which object to return information about.

Example: Send UI to Figma​

note

Requires the remote Figma MCP server and a supported client. See Connect the MCP server to your editor.

You send the live UI of your web app or site to Figma through a conversation with your MCP client:

  1. Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."
  2. Follow the steps your client provides. Your client will open a browser window or give you a link to follow.
  3. Use the capture toolbar to capture pages, elements, and states of your web app or site.
  4. Tell your client when you're finished. Your client will give you a link to the new Figma file.

Improve the MCP server output​

For the best output, set up rules to guide your agent. To get started, see these example rules.

Check out the Figma Community​

The Figma Community has a growing library of skills for the Figma MCP server. Browse skills in the Figma Community to find ones that fit your use cases.

Create your own skills​

You can create your own skills to teach your agent how your team works in Figma. Custom skills package repeatable workflows so you get more consistent results. See Create skills for the Figma MCP server.