Set up Figma MCP in Windsurf
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
Windsurf reads MCP server configuration from the following file:
~/.codeium/windsurf/mcp_config.jsonCreate this file if it does not already exist.
2
Add the configuration
Add the following to your Windsurf 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 Windsurf. 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.