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] Rate limits apply to Figma MCP server tools that read data from Figma. Some tools, such as those that write to Figma files, are exempt from the rate limits. <br><br> 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. <br><br> Users with a Dev or Full 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 →

• Generate Figma designs from web pages (rolling out)

  Capture, import, or convert a web page into a Figma design directly from your AI coding agent.

Installation & Setup

Connect to the Figma MCP server

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

VS Code

1. Use the shortcut ⌘ Shift P to search for MCP:Add Server.
2. Select HTTP.
3. Paste the server url https://mcp.figma.com/mcp in the search bar. Then hit Enter.
4. When you're prompted for a server ID, enter figma.
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"
    }
  }
}

1. Open the chat toolbar using ⌥⌘B or ⌃⌘I and switch to Agent mode.
2. 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 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

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.

Install the plugin by typing the following command in Cursor's agent chat:

/plugin-add figma

The plugin includes:

• MCP server configuration for the Figma MCP server
• Skills for implementing designs, connecting components via Code Connect, and creating design system rules
• Rules for proper asset handling from the Figma MCP server

<details> <summary>Manual setup</summary>

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"
    }
  }
}

For more information, see Cursor's official documentation.

</details>

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.

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.

<details> <summary>Manual setup</summary>

1. Open your terminal and run:

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

1. 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.

</details>

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"
    }
  }
}

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.

To provide Figma design context to your AI client:

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.

<img src="https://help.figma.com/hc/article_attachments/34049303807895" width="300" />

[!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.

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 to the frame or component in Figma before prompting.

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

generate_figma_design (specific clients only, remote only)

Supported file types: Figma Design

Captures, imports, or converts a web page into a Figma design. You can send live UI interfaces as design layers to new or existing Figma files, or to your clipboard.

• "Start a local server for my app and capture the UI in a new Figma file"
• "Capture the login page to [Figma file URL]"

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. Specifically, it returns an object where each key is a Figma node ID, and the value contains:

• codeConnectSrc: The location of the component in your codebase (e.g., a file path or URL).
• codeConnectName: The name of the component in your codebase.

This mapping is used to connect Figma design elements directly to their React (or other framework) implementations, enabling seamless design-to-code workflows and ensuring that the correct components are used for each part of the design. If a Figma node is connected to a code component, this function helps you identify and use the exact component in your project.

add_code_connect_map

Supported file types: Figma Design

Creates mappings between Figma node IDs and corresponding code components in your codebase. This improves design-to-code workflow quality by linking specific design elements to their code implementations.

get_code_connect_suggestions

Supported file types: Figma Design

Detects and suggests Code Connect mappings between Figma components and code components in your codebase. Works in conjunction with send_code_connect_mappings to confirm suggestions.

send_code_connect_mappings

Supported file types: Figma Design

Confirms and finalizes Code Connect mappings after suggestions are reviewed through get_code_connect_suggestions.

get_screenshot

Supported file types: Figma Design, FigJam

This takes a screenshot of your selection to preserve layout fidelity. Keep this on unless you're managing token limits.

create_design_system_rules

Supported file types: No file context required

Use this tool to create a rule file that gives agents the context they need to generate high-quality front end code. Rule files help align outpu

---