Set up Figma MCP in Claude Desktop
Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.
1
Locate the config file
Claude Desktop reads MCP server configuration from the following file:
~/Library/Application Support/Claude/claude_desktop_config.jsonCreate this file if it does not already exist.
2
Add the configuration
Add the following to your Claude Desktop config file:
json
{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": [
"-y",
"figma-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
}
}
}
}3
Set up environment variables
Figma MCP requires the following environment variables:
FIGMA_ACCESS_TOKENRequiredFigma personal access token
4
Verify it works
Restart Claude Desktop. Figma MCP should appear in your MCP server list with 8 tools available.
This server adds approximately 4,120 tokens to your context window for tool definitions.