🚧 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.
Before you start
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, Windsurf, Claude Code)
The Figma MCP server helps developers implement designs quickly and accurately by providing important context to AI agents that generate code from Figma design and Make files. The tools within Figma’s MCP server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too.
MCP servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol.
Learn more about the Figma MCP server and bringing Figma into your workflow →
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.
Note: This is a general overview for approaching the Figma MCP server. For implementation details and code samples, see the Figma MCP server developer documentation.
Setup the MCP server
You can connect the Figma MCP server in two ways:
- Local MCP server: Runs through the Figma desktop app.
-
Remote MCP server: Connects directly to Figma’s hosted endpoint at
https://mcp.figma.com/mcp.
Enable the local MCP server
- Open the Figma desktop app and make sure you’ve updated to the latest version.
- Open a Figma file.
- In the upper-left corner, open the Figma menu.
- Go to Preferences → Enable local MCP server.
A confirmation message appears at the bottom of the window once the server is running.
The server runs locally at http://127.0.0.1:3845/mcp. Keep this address handy for your configuration file in the next step.
Connect the MCP server to your editor
Follow instructions for your specific editor to connect to the Figma MCP server, either locally or remotely:
| Client | Local server support | Remote server support |
| VS Code | X | X |
| Cursor | X | X |
| Windsurf | X | X |
| Claude Code | X | X |
| Warp | X | X |
| Android Studio | X |  |
| Openhands | X | Â |
| Amazon QÂ | Â | X |
| Replit | Â | X |
Prompt 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.
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.
Tools and usage suggestions
The Figma MCP server includes several tools that help your AI assistant generate, adapt, and align code with your designs. Each tool supports different workflows, from producing code to mapping components or retrieving design tokens. To learn more about available tools and usage suggestions, see the Figma MCP server developer documentation.
As you use the Figma MCP server, you may see a popup inside Figma asking you for feedback. To give us feedback, please use this form.
Register your MCP client
During the beta, we’re collecting MCP client requests. Please register your client using this form. Our team will review submissions and reach out when we’re ready to onboard new clients.