Figma Context MCP server in Zed designs in, code out.
Figma-Context-MCP feeds your Figma files to Zed's agent so it can implement a design in one shot. Here's the exact settings.json entry, where to get the token, and what to check when the server doesn't show up.
Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) gives a coding agent direct access to your Figma data. Instead of pasting screenshots into chat, Zed's agent fetches the actual layout, spacing, and style information from a Figma file and writes the component from real values.
Zed configures MCP servers through a context_servers block in settings.json. The whole setup is one config entry plus a Figma personal access token — about five minutes end to end.
What this server gives Zed's agent
The server translates Figma's verbose API responses into a compact payload of layout and styling data that a model can actually use. Its core tools fetch file or frame data (get_figma_data) and download image and icon assets (download_figma_images), so the agent can implement a design in any framework with correct dimensions, colors, and spacing instead of guessing from a screenshot.
One naming quirk to know up front: the GitHub repo is figma-context-mcp, but the npm package is published as figma-developer-mcp. The config below uses the npm name — that's the one npx needs.
Before you start
You need two things: Node.js 18+ on your machine (Zed launches the server via npx) and a Figma personal access token. Generate the token in Figma under your account settings — Security tab, then Personal access tokens. Read access to file content is enough; the server never writes to your Figma files.
Add the context_servers entry to settings.json
Open Zed's global settings with the "zed: open settings" command — the file lives at ~/.config/zed/settings.json. Add (or extend) the context_servers object:
{
"context_servers": {
"figma-context-mcp": {
"source": "custom",
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "your-figma-personal-access-token"
}
}
}
}Verify it's connected
Restart the Agent Panel (or Zed itself) so it re-reads the configuration. The server should appear in the Agent Panel's settings view with a running indicator. Test it by pasting a Figma file or frame URL into the agent and asking it to implement the selection — if the agent calls get_figma_data and returns real node names from your file, you're done.
You can see this server's tool list and live status on its Loomal marketplace listing at https://loomal.ai/marketplace/figma-context-mcp.
Troubleshooting in Zed
Server missing after setup: Zed only re-reads context_servers on restart of the Agent Panel, so restart it (or quit Zed fully) before debugging anything else. Then check settings.json for syntax errors — a trailing comma silently breaks the whole block.
Server starts but tools fail: the usual cause on macOS is that Zed, launched from the dock, doesn't inherit your shell's PATH, so npx isn't found. Launch Zed from a terminal once to confirm, or set command to the absolute path of npx (run `which npx`). A 403 from Figma means the token is wrong or expired — regenerate it and update the env block. Finally, make sure --stdio is in args; without it the package starts an HTTP server instead of speaking MCP over stdio, and Zed will sit waiting forever.
FAQ
How do I install Figma-Context-MCP in Zed?
Add a context_servers entry to ~/.config/zed/settings.json with command npx and args ["-y", "figma-developer-mcp", "--stdio"], put your Figma personal access token in the env block, then restart the Agent Panel. No separate install step is needed — npx fetches the package on first run.
Where does Zed keep its MCP configuration?
In the global settings file at ~/.config/zed/settings.json, under the context_servers key. Zed doesn't use a separate MCP config file the way Cursor or Claude Desktop do — MCP servers live alongside the rest of your editor settings.
Why is the npm package called figma-developer-mcp and not figma-context-mcp?
The project is named Figma-Context-MCP on GitHub, but its maintainer publishes the npm package as figma-developer-mcp. Use the npm name in your config; using the repo name will make npx fail to resolve the package.
The server is configured but Zed's agent never calls it — what now?
Restart the Agent Panel first, since Zed reads context_servers at startup. Then verify npx resolves (PATH issues are common when Zed is launched from the dock on macOS), and confirm the --stdio flag is present so the server speaks MCP instead of starting its default HTTP mode.
More MCP servers for Zed.
Browse design, scraping, and search servers with live tool lists.