Figma-Context-MCP server in Windsurf Cascade reads the design first.
Add the figma-developer-mcp package to mcp_config.json and Windsurf's Cascade agent can fetch real frame data from Figma before it writes a line of UI code.
Cascade is at its best when it can gather its own context before acting, and for frontend work the context that matters is the design. Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) feeds it directly: frame hierarchy, components, fills, and spacing pulled from Figma's API and condensed so the model gets structure instead of noise. Link a frame, and Cascade implements it against your actual codebase conventions.
Windsurf keeps all MCP configuration in one global JSON file under the Codeium directory. One entry there and the server is available in every workspace you open.
Token first, then the file
Create a Figma personal access token under Figma Settings > Security > Personal access tokens — read access to your design files is all the server needs. Then open the config: either through the UI at Windsurf Settings > Cascade > MCP Servers > Add Server, or directly at ~/.codeium/windsurf/mcp_config.json. The directory is .codeium, a leftover of Windsurf's Codeium lineage, and typing a .windsurf path that doesn't exist is the most common way this setup fails before it starts.
The config
The server runs as a local stdio process from the figma-developer-mcp npm package — Windsurf spawns it via npx, so Node needs to be installed:
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_TOKEN"
}
}
}
}Refresh, then hand Cascade a frame
The file isn't watched: after saving, hit refresh in Settings > Cascade > MCP Servers (or restart Windsurf) and wait for the figma-context entry to go green with a tool count. The server exposes a small toolset — fetching translated file data and downloading image assets — so it sits lightly against Windsurf's cross-server tool limit.
In Figma, right-click the frame you want built and choose Copy link to selection; the embedded node ID is what lets the server fetch one subtree instead of the whole document. Paste the link into Cascade with a pointed instruction — name the target directory and the component primitives to reuse — and review the tool call it proposes before approving.
Troubleshooting in Windsurf
Red status or zero tools after refresh: validate the JSON (one trailing comma kills the whole file) and re-check the .codeium path. If the entry looks right and still won't start, the spawn is failing — Windsurf needs npx visible in its environment, so launch it from a terminal session where node -v works, or substitute the absolute path to npx in the command field.
A green server whose calls fail is a Figma-side problem: expired token, or a linked file your account can't open. Regenerate the token and confirm file access in the browser. And if tools disappear after you add more servers later, you've hit Windsurf's active-tool cap across all MCP servers — disable something unused and refresh.
The listing and the category
Figma-Context-MCP's live listing — probed tool list included — is at https://loomal.ai/marketplace/figma-context-mcp. It dominates the design tools category by stars, and the same config block, renamed keys aside, carries over to Cursor and Claude Desktop if you work across editors.
FAQ
How do I install Figma-Context-MCP in Windsurf?
Add a figma-context entry to ~/.codeium/windsurf/mcp_config.json — command npx, args -y figma-developer-mcp --stdio, FIGMA_API_KEY in env — or use Settings > Cascade > MCP Servers > Add Server. Then refresh the server list; npx pulls the package automatically on first start.
Where is Windsurf's MCP config file?
~/.codeium/windsurf/mcp_config.json — note it's under .codeium, not a .windsurf directory. It's global; Windsurf has no per-project MCP config, so the Figma server will be available in every workspace once added.
The server is green but Figma requests fail. Why?
Green only means the process started. Call failures are authentication: the FIGMA_API_KEY is invalid or expired, or the linked file belongs to a team your account can't access. Generate a fresh personal access token in Figma settings and verify you can open the file in a browser first.
Why scope requests to a single frame?
Large Figma documents translate into very large payloads even after the server's simplification, crowding Cascade's context and slowing responses. Figma's Copy link to selection embeds a node ID that limits the fetch to that frame's subtree — the workflow the server is designed around.
Browse more MCP servers for Windsurf.
Check any server's live tool list before touching mcp_config.json.