Local server (using desktop app)

warning

The Figma MCP Server is currently in open beta.

Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta period. Usage guidelines and rate limits will be announced when our MCP server is generally available.

Who can use this feature

Available on a Dev or Full seat on the Professional, Organization, or Enterprise plans

You must use a code editor or application that supports MCP Servers (i.e. VS Code, Cursor, Claude Code)

You can only use the local MCP server via the Figma desktop app. Download the Figma desktop app →

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

MCP Servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol.

With the server enabled, you can:

• 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.
• Retrieve Make resources: Gather code resources from Make files and provide them to the LLM as context. This can help as you move from prototype to production application.
• Keep your design system components consistent with Code Connect: Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

Step 1: Enable the local MCP 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 upper-left corner, open the Figma menu.
4. Under Preferences, select Enable local MCP Server.

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

note

Note: The server runs locally at 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

Once the server is running locally on the Figma desktop app, MCP clients will be able to connect to your server. Follow the instructions for your specific client to add the MCP server.

VS Code

1. Use the shortcut ⌘ Shift P to search for MCP:Add Server.
2. Select HTTP.
3. Past the server url http://127.0.0.1:3845/mcp in the search bar, then hit Enter.
4. Type in Figma MCP when it asks for a Server ID, then hit Enter.
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": {
     "FigmaMCP": {
       "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_code to confirm that the MCP server tools are available. If no tools are listed, restart the Figma desktop app and VS Code.

note

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": {
    "FigmaMCP": {
      "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-dev-mode-mcp-server 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.

Other editors

You can manually add the MCP server using this configuration:

{
  "mcpServers": {
    "FigmaMCP": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Once configured, refresh or start the server. You should see a successful connection and the available tools. If the connection failed or you do not see any tools, double check that the server is active in the Figma desktop app.

Step 3: Prompt your MCP client

The 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:

Selection-based

1. Select a frame or layer inside Figma using the desktop app.
2. Prompt your client to help you implement your current selection.

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

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.

Step 4: Tweak your settings

The local MCP server has a few settings you can tweak to get it working just as you like it. To find these settings, go to the Figma > Preferences dropdown, and select "Local MCP server settings".

Image settings

Lets you choose how image assets are handled:

• Placeholders: Skips image extraction and adds generic placeholders instead - helpful if you prefer swapping them manually in code.
• Local server: uses local images, adds a localhost link to the returned markup, allowing you to use the actual image asset wherever your file is rendered.
• Download assets: allow the MCP server to download and write image assets (e.g. icons, images) from Figma into the user's project.

Enable code connect

Includes Code Connect mappings in the response, so the generated code can reuse components from your connected codebase where possible.