Guide to the Dev Mode MCP Server – Figma Learn - Help Center

🚧 The Dev Mode MCP Server is currently in private alpha. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the alpha period.

To access the Dev Mode MCP Server during the private alpha period, please complete this interest form.

Before you start

Who can use this feature

The Dev Mode MCP Server is in private alpha.

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 (ie. VS Code, Cursor, Windsurf, Claude Code)

You can only use the Dev Mode MCP server from the Figma desktop app. Download the Figma desktop app →

The Dev Mode 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.

Enable the MCP Server

Open the Figma desktop app and make sure you’ve updated to the latest version.
Create or open a Figma Design file.
In the upper-left corner, open the Figma menu.
Under Preferences, select Enable Dev Mode MCP Server.

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

Set up the MCP client

Now that the server is running locally on the Figma desktop app, MCP clients will be able to connect to your server. To do this, add the following to your MCP server configuration file:

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

Follow the instructions for your specific client to add the Dev Mode MCP server.

Cursor

See Cursor’s official documentation here: https://docs.cursor.com/context/model-context-protocol

VS Code

See VS Code’s official documentation here: https://code.visualstudio.com/docs/copilot/chat/mcp-servers

Windsurf

See Windsurf’s official documentation here: https://docs.windsurf.com/windsurf/mcp

Claude Code

See Anthropic’s official documentation here: https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/tutorials#set-up-model-context-protocol-mcp

Use the Dev Mode MCP server

The Dev Mode MCP server introduces a set of tools that help LLMs translate designs in Figma. We offer two different ways to share this with your client.

Selection-based

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

Link-based

Copy the link to a frame or layer in Figma.
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.

As you use the Dev Mode MCP server, you may see a popup inside Figma asking you for feedback. To give us feedback or request additional support, please use this form.

···