Figma MCP

Official Release from Figma

Guide to the Dev Mode MCP Server

The Model Context Protocol (MCP) is an open-source standard that is rapidly changing how AI tools and design applications, such as Figma, work together. Think of it as a universal connector that allows AI assistants to understand and interact with your designs on a much deeper level.

This guide explains what MCP is, why it matters to designers, and how you can utilize it to streamline your workflow.

What is MCP?

MCP Pn

MCP is a protocol that enables AI-powered systems to connect to software applications in a standardized way. Before MCP, connecting an AI tool to an app required a custom, one-off integration. Now, an app like Figma can build a single MCP server, and any AI tool with an MCP client (like Cursor) can connect to it.

This two-way communication allows the AI to not only “see” your designs but also to access the underlying data—like design tokens, component properties, and styles. This rich context is invaluable for generating high-quality, production-ready code from your Figma files.

As Figma’s article on MCP explains, “The more context an AI assistant has, the better it’s able to understand the specific nuances of a request and deliver a high-quality output.” Source

Why MCP Matters for Designers

For designers, MCP bridges the gap between design and development more effectively than ever before. Here are some of the key benefits:

Higher-Fidelity Code: By understanding the full context of your designs, AI tools can generate code that accurately reflects your design system’s variables, components, and styles.
Faster Handoffs: Developers can work more efficiently when the AI can directly interpret design files, reducing the need for manual specification and redlining.
Improved Collaboration: When AI can speak the language of both design and code, it becomes a much more powerful collaborator in the product development process.

Who can use Figma MCP

::: note[Beta Availability] 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 (i.e. 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 → :::

What you need

To connect to Figma’s MCP server, you’ll need a code editor or application that supports MCP clients. Here are some of the popular options:

Windsurf
Claude Code
VS Code
Cursor

Other Editors

Other code editors and tools that support SSE (Server-Sent Events) can also connect to the Dev Mode MCP server.

If you’re using a different editor or tool, check its documentation to confirm it supports SSE-based communication. If it does, you can manually add the Dev Mode MCP server using this configuration.

How to Install the Figma MCP Server

Step 1: Enable the MCP Server in Figma

To get started, you need to enable the MCP server from the Figma desktop app.

Open the Figma desktop app and ensure it’s updated to the latest version.
Open any Figma Design file.
In the top-left menu, navigate to Preferences and select Enable Dev Mode MCP Server.

You should see a confirmation message at the bottom of your screen indicating that the server is running locally at http://127.0.0.1:3845/sse.

Step 2: Set up your MCP Client

Once the server is running, you can connect your MCP client. Below are the instructions for popular editors.

Cursor

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

Claude Code

[Instructions for Claude Code will go here]

VS Code

Go to Code → Settings → Settings (or use ⌘ ,).
Search for “MCP” and select Edit in settings.json.
Add the Figma Dev Mode MCP configuration to your servers:

"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 or ⌃⌘I) and switch to Agent mode.
Open the selection tool menu and look for a section labeled: MCP Server: Figma Dev Mode MCP.

Other Editors (SSE)

If you’re using a different editor that supports SSE (Server-Sent Events), you can manually add the Dev Mode MCP server using this configuration:

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

Check your editor’s documentation for the specific steps to add an SSE-compatible MCP server.

Step 3: Prompting Your MCP Client

Once connected, you can prompt your client to access a design node in two ways:

Selection-based: Select a frame or layer in the Figma desktop app and prompt your client to implement it.
Link-based: Copy the link to a frame or layer and ask your client to implement the design from the URL.

Best Practices

To get the best results from the MCP server, follow these best practices.

Structure your Figma file:

Use components for anything reused.
Link components to your codebase via Code Connect for the most consistent results.
Use variables or design tokens for spacing, color, radius, and typography.
Name layers semantically (e.g., CardContainer instead of Group 5).
Use Auto layout to communicate responsive intent.
Use annotations to convey behavior that isn’t visible.

Write Effective Prompts

Clear prompts lead to better results. Be specific about your needs:

“Generate iOS SwiftUI code from this frame.”
“Use Chakra UI for this layout.”
“Add this to src/components/marketing/PricingCard.tsx.”

Helpful links

Official Figma MCP Documentation

Read the official guide from Figma for detailed instructions and information.