Figma MCP Server
Read designs and generate code from frames
Feed Figma design context — frames, components, layout, variables — straight into an AI client so it generates accurate front-end code. Two routes: the official Figma Dev Mode MCP server built into the desktop app (runs at http://127.0.0.1:3845/sse, needs a paid seat), or the community Framelink server via npx with a Figma API token (works anywhere). Select a frame, then ask the agent to implement it.
Install Figma MCP Server
Paste into claude_desktop_config.json
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_KEY",
"--stdio"
]
}
}
}Run in your terminal
claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio Paste into .cursor/mcp.json
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_KEY",
"--stdio"
]
}
}
} After adding the server, fully restart your MCP client. Replace <placeholders> (tokens, paths) with your own values.
Facts
- Stars
- ★ 8,900
- Maintainer
- Figma (official)
Trust score, capability surface (filesystem, shell, network) and risk flags — reviewed in your browser.