Figma MCP server
{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}file .mcp.json (in your project root)file claude_desktop_config.jsonfile ~/.cursor/mcp.jsonfile .vscode/mcp.jsonfile ~/.codeium/windsurf/mcp_config.jsonversion 1.0.3
What it does
The Figma MCP server provides AI agents with access to design context from Figma files, enabling code generation from designs and direct modification of Figma canvas content. It is for developers and product teams who want to integrate design files into AI-powered workflows for code generation and design system management.
- Generate code from Figma frames and convert selected designs into functional code for web and app development.
- Extract design system data including variables, components, and layout information to keep generated code aligned with your design system.
- Create and modify Figma content directly from your AI agent, including frames, components, and auto layout structures.
Tools this server exposes
| Tool | Does |
|---|---|
| get_design_context | Retrieves design context from a Figma file, including variables, components, and layout data. |
| generate_code | Generates code from a selected Figma frame. |
| write_to_canvas | Creates and modifies native Figma content such as frames, components, variables, and auto layout directly from the MCP client. |
Before you enable it
An MCP server runs with whatever access you give it. Start with a development account rather than production, and check which tools the server exposes before you let an agent call them unattended.