Figma-Context-MCP server in Cursor the design-to-code pairing.
Cursor plus Figma-Context-MCP is the combination this server was practically built for: paste a frame link into Composer and get framework-accurate markup from real layout data.
Of all the clients that run Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars), Cursor is where it gets the heaviest use — the project's own docs lead with the Cursor workflow. The server fetches frame structure, components, fills, and spacing from Figma's API, simplifies the payload, and hands the agent something it can translate into your codebase's components and conventions in one pass.
Cursor reads MCP servers from mcp.json at two levels: ~/.cursor/mcp.json for every project, or .cursor/mcp.json inside one repo. For a design-implementation tool, project scope is often right — frontend repos want it, backend repos don't need the tool noise.
Prerequisites
Two items: a Figma personal access token (Figma Settings > Security > Personal access tokens, read access is enough) and a working Node install, since Cursor launches the server with npx. The package, figma-developer-mcp, downloads on first run — there's no separate install step.
If you want to preview what you're adding, the server's probed tool list is on its live Loomal listing at https://loomal.ai/marketplace/figma-context-mcp.
The config
Open Cursor Settings > MCP and click Add Server, or create the file directly. Either path produces the same JSON:
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_TOKEN"
}
}
}
}Enable the toggle and run the workflow
This is the step Cursor users skip: after the server appears in Settings > MCP, it has an enable toggle, and a freshly added server may need it flipped before tools register. Healthy means a green dot and a listed tool count.
Then the actual workflow: in Figma, right-click the frame you want built and choose Copy link to selection. Paste it into Composer in agent mode with an instruction like "implement this frame using our existing component library." The selection link's node ID lets the server pull only that frame's subtree — both faster and far cheaper on context than fetching the document.
Troubleshooting in Cursor
No green dot: check the JSON for syntax slips, then toggle the server off and on — Cursor's MCP state can lag a config edit, and a restart clears what the toggle doesn't. If the server starts but errors when called, read the MCP channel in the Output panel; a 403 there is your Figma token (expired, or no access to that file), while spawn errors mean Cursor can't find npx — launch Cursor from a terminal or use the absolute npx path in the command field.
One scale note: Cursor caps how many MCP tools it sends to the model, so if you run many servers simultaneously, tools can silently drop. Figma-Context-MCP only exposes a couple of tools, so it's rarely the offender — but if its tools vanish, disable an unused server and re-toggle.
Make the output match the design
The quality of the generated code tracks the quality of the request. Scope to one frame at a time, name the target file and component conventions in your prompt, and let the agent download image assets through the server's asset tool when icons or illustrations are part of the frame. For checking the result visually, a browser-automation server from the design tools category's neighbors makes a good second tool in the same workspace.
FAQ
How do I install Figma-Context-MCP in Cursor?
Add a figma-context entry to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project) running npx -y figma-developer-mcp --stdio with FIGMA_API_KEY in env, or use Cursor Settings > MCP > Add Server. Flip the server's enable toggle and confirm the green dot.
Where is Cursor's MCP config file?
Two places: ~/.cursor/mcp.json applies to every project, and .cursor/mcp.json in a repo applies to that project only. Project entries are handy for frontend repos where designs get implemented; commit the file without the token and let each developer add their own.
Cursor shows the server but Figma fetches fail — why?
Almost always the token. Cursor's Output panel (MCP channel) will show a 401 or 403 from Figma's API, which means the FIGMA_API_KEY is invalid, expired, or your account can't open the linked file. The server process being green only proves it started, not that it can authenticate.
Should I link whole files or individual frames?
Individual frames, via Figma's Copy link to selection. Whole-file fetches on large documents produce enormous payloads that crowd out your actual code context and slow the agent down. One frame per Composer request is the workflow the server is optimized for.
Browse more MCP servers for Cursor.
Every listing shows its live, probed tool list.