Before you start
Who can use this feature
The remote server is available on all seats and plans.
The desktop server is available on a Dev or Full seat for all paid plans.
You must use a code editor or application that supports MCP servers (i.e. VS Code, Cursor, Windsurf, Claude Code). See our MCP catalog for a full list of supported clients ->
Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month.
Users with a Dev or Full seat on the Professional, Organization, or Enterprise plans have per minute rate limits, which follow the same limits as the Tier 1 Figma REST API. As with Figma’s REST API, Figma reserves the right to change rate limits.
The Figma MCP server helps developers implement designs quickly and accurately by providing important context to AI agents that generate code from Figma design, FigJam 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.
Note: This page is a general overview of the Figma MCP server. For detailed instructions and code samples, see the Figma MCP server developer documentation →
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 FigJam resources
Access content from your FigJam diagrams and use it in your code generation workflow. Incorporate early-stage ideas, flows, or architecture maps directly into development.
-
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.
Set up the MCP server
You can connect the Figma MCP server in two ways:
- Desktop MCP server: Runs locally through the Figma desktop app.
-
Remote MCP server: Connects directly to Figma’s hosted endpoint at
https://mcp.figma.com/mcp.
Enable the desktop 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 toolbar at the bottom, toggle to Dev Mode or use the keyboard shortcut ShiftD.
In the MCP server section of the inspect panel, click Enable desktop 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 | Desktop server support | Remote server support |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex by OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| Openhands | ✓ | |
| Replit | ✓ | |
| VS Code | ✓ | ✓ |
| Warp | ✓ | ✓ |
Tip: For the latest list of supported editors and clients, check out our MCP Catalog.
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 (desktop server only)
- 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.