Figma MCP Server Guide

The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.

[!NOTE] Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month. Users with a Dev or Full seat seat on the Professional, Organization, or Enterprise plans have per minute rate limits, which follow the same limits as the Tier 1 Figma REST API. As with Figma’s REST API, Figma reserves the right to change rate limits.

For the complete set of Figma MCP server docs, see our developer documentation.

Features

• Generate code from selected frames

  Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.

• Extract design context

  Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.

• Code smarter with Code Connect

  Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

  Learn more about Code Connect →

Installation & Setup

Step 1: Enabling the MCP server

Figma provides two ways to use the MCP server. Remotely using our hosted server, and locally using Figma's desktop app.

If you want to use our remote server, there's nothing to enable, it's already available! To get the local desktop server set up, you'll need to follow the steps below.

Enabling the desktop server

1. Open the Figma desktop app and make sure you've updated to the latest version.
2. Create or open a Figma Design file.
3. In the toolbar at the bottom, toggle to Dev Mode or use the keyboard shortcut ShiftD.
4. In the MCP server section of the inspect panel, click Enable desktop MCP server.

You should see a confirmation message at the bottom of the screen letting you know the server is enabled and running.

[!TIP] The server runs locally at this location:

http://127.0.0.1:3845/mcp

Keep this address handy for your configuration file in the next step.

Step 2: Set up your MCP client

Different MCP clients require slightly different setups to get connected to your MCP server. Follow the instructions below for your specific client to add the Figma MCP server.

VS Code

1. Use the shortcut ⌘ Shift P to search for MCP:Add Server.

2. Select HTTP.

3. Copy the correct server url from below, and paste the server url in the search bar. Then hit Enter.

   Remote server url - https://mcp.figma.com/mcp

   Local server url - http://127.0.0.1:3845/mcp

4. When you're prompted for a server ID, enter one of the following:

   • figma for the remote MCP server
   • figma-desktop for the desktop MCP server

5. Select whether you want to add this server globally or only for the current workspace. Once confirmed, you'll see a configuration like this in your mcp.json file:

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

{
  "servers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

6. Open the chat toolbar using ⌥⌘B or ⌃⌘I and switch to Agent mode.
7. With the chat open, type in #get_design_context to confirm that the Figma MCP server tools are available. If no tools are listed, restart the Figma desktop app and VS Code.

[!NOTE] You must have GitHub Copilot enabled on your account to use MCP in VS Code.

For more information, see VS Code's official documentation.

Cursor

1. Open Cursor → Settings → Cursor Settings.
2. Go to the MCP tab.
3. Click + Add new global MCP server.
4. Enter the following configuration and save:

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

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

For more information, see Cursor's official documentation.

Claude Code

1. Open your terminal and run:

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

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

2. Use the following commands to check MCP settings and manage servers:

• List all configured servers

  claude mcp list

• Get details for a specific server

  claude mcp get my-server

• Remove a server

  claude mcp remove my-server

For more information, see Anthropic's official documentation.

Claude Code (Plugin Installation)

You can also set up the Figma MCP server by installing the Figma Plugin for Claude Code, which includes both remote and desktop MCP server settings as well as Agent Skills for common workflows.

Run the following command to install the plugin from Anthropic's official plugin marketplace.

claude plugin install figma@claude-plugins-official

Learn more about Anthropic's Claude Code Plugins and Agent Skills.

Other editors

Other code editors and tools that support Streamable HTTP can also connect to the Figma MCP server.

If you're using a different editor or tool, check its documentation to confirm it supports Streamable HTTP based communication. If it does, you can manually add the Figma MCP server using this configuration:

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

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

Prompting your MCP client

The Figma MCP server introduces a set of tools that help LLMs translate designs in Figma. Once connected, you can prompt your MCP client to access a specific design node.

There are two ways to provide Figma design context to your AI client:

Link-based

1. Copy the link to a frame or layer in Figma.
2. Prompt your client to help you implement the design at the selected URL.

[!NOTE] Your client won't be able to navigate to the selected URL, but it will extract the node-id that is required for the MCP server to identify which object to return information about.

Selection-based (desktop only)

1. Select a frame or layer inside Figma using the desktop app.

2. Prompt your client to help you implement your current selection.

Tools and usage suggestions

get_design_context

Supported file types: Figma Design, Figma Make

Use this to get design context for your Figma selection using the MCP server. The default output is React + Tailwind, but you can customize this through your prompts:

• Change the framework

  • "Generate my Figma selection in Vue."
  • "Generate my Figma selection in plain HTML + CSS."
  • "Generate my Figma selection in iOS."

• Use your components

  • "Generate my Figma selection using components from src/components/ui"
  • "Generate my Figma selection using components from src/ui and style with Tailwind"

  You can paste links or select the frame or component in Figma before prompting.

[!NOTE] Selection-based prompting only works with the desktop MCP server. The remote server requires a link to a frame or layer to extract context.

Learn how to set up Code Connect for better component reuse →

get_variable_defs

Supported file types: Figma Design

Returns variables and styles used in your selection—like colors, spacing, and typography.

• List all tokens used
  • "Get the variables used in my Figma selection."
• Focus on a specific type
  • "What color and spacing variables are used in my Figma selection?"
• Get both names and values
  • "List the variable names and their values used in my Figma selection."

get_code_connect_map

Supported file types: Figma Design

Retrieves a mapping between Figma node IDs and their corresponding code components in your codebase. Specifi