Figma-Context-MCP server in Claude Desktop let Claude read your design files.
Edit claude_desktop_config.json once and Claude Desktop can pull frames, components, and styles straight from Figma — useful for spec reviews, design QA, and handoff prep, not just code generation.
Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) translates Figma's verbose REST responses into a compact representation an LLM can actually work with. In Claude Desktop that unlocks more than code generation: paste a file link and Claude can audit naming consistency, extract design tokens, write developer handoff notes, or compare two frames — anything that requires reading the design rather than squinting at an export.
Claude Desktop has no settings UI for MCP; you edit a JSON file by hand and restart the app. The whole job takes about three minutes, most of it generating the Figma token.
Generate a Figma token, find the config file
In Figma, go to Settings > Security > Personal access tokens and create a token with file read access. Then locate Claude Desktop's config file: on macOS it's ~/Library/Application Support/Claude/claude_desktop_config.json, on Windows %APPDATA%\Claude\claude_desktop_config.json. If the file doesn't exist yet, Settings > Developer > Edit Config inside the app will create it in the right place — safer than guessing the path.
The config
Add the server under mcpServers (create the key if the file is empty). The npm package is figma-developer-mcp, and the --stdio flag is required — without it the server starts in HTTP mode and Claude Desktop, which expects stdio, will sit there silently:
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_TOKEN"
}
}
}
}Restart properly, then test
Claude Desktop only reads this file at launch, and closing the window doesn't quit the app — it keeps running in the menu bar or system tray. Quit it fully (Cmd-Q on macOS, or right-click the tray icon on Windows and exit), reopen, and check the tools icon in the chat input: figma-context should be listed with its file-data and image-download tools.
For a first test, right-click a frame in Figma, choose Copy link to selection, and ask Claude to describe that frame's layout and components. Selection links carry a node ID, so the server fetches only the subtree you linked — important, because requesting an entire large file can swamp the context window.
Troubleshooting in Claude Desktop
If the server never appears, work through the classic trio: invalid JSON (a trailing comma is enough to make the whole file unreadable), a half-restart that never re-read the config, and npx not being on Claude Desktop's PATH. The PATH issue is the sneaky one — GUI apps on macOS don't inherit your shell environment, so if Node came from nvm, replace "npx" with the absolute path that which npx prints in your terminal.
Claude Desktop writes per-server logs you can actually read: ~/Library/Logs/Claude/mcp-server-figma-context.log on macOS, %APPDATA%\Claude\logs on Windows. A 403 in there means the Figma token is wrong or lacks access to the linked file; a spawn ENOENT means the command path problem above.
The live listing at https://loomal.ai/marketplace/figma-context-mcp shows Figma-Context-MCP's probed tool list before you commit to the config edit. It anchors the design tools category on Loomal — if your workflow continues from design review into implementation, the same server drops into Claude Code and Cursor with nearly identical config.
FAQ
How do I install Figma-Context-MCP in Claude Desktop?
Add a figma-context entry under mcpServers in claude_desktop_config.json with command npx, args ["-y", "figma-developer-mcp", "--stdio"], and your FIGMA_API_KEY in env. Then quit Claude Desktop completely and reopen it — the config is only read at launch.
Where is the Claude Desktop config file?
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json. Windows: %APPDATA%\Claude\claude_desktop_config.json. The reliable way to open it is from inside the app: Settings > Developer > Edit Config, which also creates the file if it doesn't exist.
I edited the config but the server doesn't show up. What's wrong?
Three usual suspects: invalid JSON syntax, an incomplete restart (Claude Desktop keeps running in the tray — quit it fully), or npx unreachable from a GUI app's PATH. Check ~/Library/Logs/Claude/mcp-server-figma-context.log for the actual error; spawn ENOENT means PATH, 403 means the Figma token.
Does this work with any Figma file?
Any file your Figma account can open, since the personal access token inherits your permissions. Files in other teams or orgs that you haven't been granted access to will return authorization errors even though the server itself is healthy.
Browse more MCP servers for Claude Desktop.
See live tool lists before you edit a single config file.