Zed Figma MCP
A Framelink Figma MCP server extension for Zed
What is Zed Figma MCP?
Zed Figma MCP is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to framelink figma mcp server extension for zed
A Framelink Figma MCP server extension for Zed
This server falls under the Developer Tools and APIs categories on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A Framelink Figma MCP server extension for Zed
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx zed-mcp-server-figmaConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Zed Figma MCP
The Zed Figma MCP extension bundles the Framelink Figma MCP Server as a native context provider for the Zed code editor, giving Zed's AI Agent Panel direct access to Figma design files. With a Figma access token configured, developers can ask the agent to read frame contents, inspect component properties, and translate design intent into code — without switching out of their editor. It is aimed at front-end engineers who work alongside designers in Figma and want to close the gap between design specs and implementation.
Prerequisites
- Zed editor installed (latest stable or nightly build that supports Extensions and the Agent Panel)
- A Figma account with a personal access token (read-only permissions on File Content and Dev Resources)
- Internet access to reach the Figma API
- No separate Node.js install required — Zed bundles the extension runtime
Open the Zed Extensions panel
In Zed, open the command palette (Cmd+Shift+P) and search for 'Extensions', or navigate via the Zed menu.
Search for and install the Figma extension
Search 'mcp-server-figma' or 'Figma' in the Extensions panel and click Install. The extension packages the Framelink Figma MCP server internally.
Generate a Figma personal access token
In Figma, go to Account Settings > Personal access tokens. Create a new token and grant read-only access to 'File Content' and 'Dev Resources'. Copy the token.
Add the context server settings to Zed
Open your Zed settings.json (Cmd+, then 'Open config file') and add the context_servers block. Paste your Figma token as the value for figma_api_key.
{
"context_servers": {
"mcp-server-figma": {
"settings": {
"figma_api_key": "YOUR_FIGMA_PERSONAL_ACCESS_TOKEN"
}
}
}
}Open the Agent Panel and use Figma context
Open Zed's Agent Panel (Ctrl+Shift+A or via the View menu). The Figma context server should now be listed. You can paste a Figma file or frame URL into the panel and ask questions about the design.
Zed Figma MCP Examples
Client configuration
This goes inside your Zed settings.json — not claude_desktop_config.json. The figma_api_key is the only required credential.
{
"context_servers": {
"mcp-server-figma": {
"settings": {
"figma_api_key": "figd_YOUR_PERSONAL_ACCESS_TOKEN"
}
}
}
}Prompts to try
Use these in the Zed Agent Panel after pasting a Figma file or frame URL as context.
- "Read the design in this Figma frame and generate the corresponding React component with Tailwind classes"
- "List all the colour tokens used in this Figma file"
- "Describe the layout of this card component and suggest an HTML structure"
- "What font sizes and weights are used across this screen design?"Troubleshooting Zed Figma MCP
Extension installed but context server does not appear in the Agent Panel
Confirm that the context_servers block is in the correct settings.json and that the JSON is valid. Reload Zed with Cmd+Shift+P > 'Reload' after saving settings.
Figma API returns 403 Forbidden
Check that your personal access token has 'File Content' and 'Dev Resources' set to read-only. Tokens with insufficient scopes will be rejected. Regenerate the token if in doubt.
Agent returns empty content for a Figma frame
Ensure you are sharing a direct frame or component URL (not just the top-level file URL). Some file structures require the specific frame node ID in the URL for the MCP server to locate content.
Frequently Asked Questions about Zed Figma MCP
What is Zed Figma MCP?
Zed Figma MCP is a Model Context Protocol (MCP) server that framelink figma mcp server extension for zed It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Zed Figma MCP?
Follow the installation instructions on the Zed Figma MCP GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Zed Figma MCP?
Zed Figma MCP works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Zed Figma MCP free to use?
Yes, Zed Figma MCP is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Zed Figma MCP Alternatives — Similar Developer Tools Servers
Looking for alternatives to Zed Figma MCP? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Zed Figma MCP in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Zed Figma MCP?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.