Figma
Generate diagrams and better code from Figma context
The Figma MCP server helps you pull in Figma context and generate high-quality code that aligns with your codebase and design intent. Use the MCP server to retrieve code resources from Figma Design or Make files, and turn your ideas into production apps.
Key features:
- Generate code from selected frames or nodes - Select a frame in Figma or provide a node URL to have an AI agent turn your design into code.
- Extract design context from layers - Pull out variables, components, and layouts from a design to ensure builds adhere to design patterns.
- Code smarter with Code Connect - Boost output quality by reusing your actual components, the MCP server informs AI agents about existing components derived from Code Connect information.
- Map your flows with diagrams - The Figma MCP server can turn your Claude prompts into flow charts, Gantt charts, or other diagrams in FigJam.
Note: The get_screenshot tool is currently limited to returning a descripton of screenshots in Figma when called in Claude and Claude Code. See developer term here
Want skills and commands too? Figma is also available as a Claude Code plugin.
Install
1Add the server to Claude Code
claude mcp add --transport http figma https://mcp.figma.com/mcp2Sign in
Run /mcp in Claude Code and complete the login flow for this server.
These instructions target Claude Code. Check the publisher's documentation for support in other Claude surfaces; a valid server URL alone does not establish compatibility.
JSON.mcp.json for a shared project
Commit this file so everyone on the project gets the same server.
{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}Tools
- generate_diagram
- get_design_context
- get_screenshot
- get_metadata
- create_design_system_rules
- get_variable_defs
- get_code_connect_map
- get_figjam
- whoami
About
Pull in Figma context and generate high-quality code that aligns with your codebase and design intent. Use the connector to retrieve code resources from Figma Design or Make files, and turn your ideas into production apps.
You can use the Figma connector to:
Implement designs as websites:
"Help me implement my Figma design as a website in HTML and CSS"
Generate code from selections with annotations:
"Get code from the Figma selection and make sure to take into account my annotations"
Check variables for issues:
"Get the variables used in my Figma selection, and tell me if there are any issues"
Implement components following codebase standards:
"Help me fetch the navbar behavior from my Figma Make file and implement it following my codebase standards"
Examples
