Figma's official server that gives agents design context such as variables, components and layout, and generates code from selected frames.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add --transport http figma https://mcp.figma.com/mcp~/.codex/config.toml
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
# codex mcp add figma --url https://mcp.figma.com/mcp~/.cursor/mcp.json
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}.vscode/mcp.json
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"figma": {
"httpUrl": "https://mcp.figma.com/mcp"
}
}
}claude_desktop_config.json · Customize › Connectors › Add custom connector
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.figma.com/mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}Try this task
Read this Figma design and describe hierarchy, components, spacing and colors. Start with an implementation plan and flag missing states or assets.
- What to provide
- A design file or node link and access permissions.
- What to review
- Verify dimensions, states and assets against original nodes; mark gaps explicitly.