Set up Figma MCP in Claude Code
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 Code reads MCP server configuration from the following file:
~/.claude.jsonCreate this file if it does not already exist.
2
Add the configuration
You can configure Figma MCP using the CLI command or by editing the config file directly.
Option A: CLI command
bash
claude mcp add figma-mcp -e FIGMA_ACCESS_TOKEN=YOUR_FIGMA_ACCESS_TOKEN -- npx -y figma-mcpOption B: 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 Code. 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.