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

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

Before you start

Who can use this feature

The Dev Mode MCP Server is in open beta.

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.

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

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

The server runs locally at http://127.0.0.1:3845/sse. 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 Dev Mode MCP server.

Go to Code → Settings → Settings or use the shortcut ⌘ ,
In the search bar, type “MCP”.
Select Edit in settings.json.

Add the following configuration:

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "servers": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": true

Open the chat toolbar ⌥⌘B and switch to Agent mode.
Open the selection tool menu and look for a section labeled: MCP Server: Figma Dev Mode MCP. 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.

Open Cursor → Settings → Cursor Settings.
Go to the MCP tab.
Click + Add new global MCP server.

Enter the following configuration and save:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

For more information, see Cursor’s official documentation.

Open Windsurf → Settings → Windsurf Settings or use the shortcut ⌘ ,.
Navigate to Cascade settings and select Open plugin store.
Search for Figma and install the plugin.
Open Cascade and you should see the Figma MCP server and available tools.

For more information, see Windsurf’s official documentation.

Note: For Windsurf, change the url property in the configuration file to serverUrl to avoid errors.

Open your terminal and run:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

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.

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

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, please use this form.