zed -figma

This MCP server extension integrates the Framelink Figma MCP Server as a context provider for Zed's Agent Panel. It enables Zed to query Figma assets and context via a secure API key, exposing relevant project and design data to the AI agent for more accurate, context-aware responses. To use it, install the Framelink Figma MCP Server through the Zed Extensions system and supply a Figma API key with read-only permissions for File Content and Dev Resources. In Zed, configure the extension so that the context server named mcp-server-figma uses your Figma API key. Once configured, the Agent Panel can pull contextual information from your Figma files to assist with design tasks, annotations, or project-specific queries. The extension acts as a bridge between Zed and the Figma MCP Server, translating Zed’s requests into Figma API calls and returning structured context data for your AI workflows.

Prerequisites:

• Zed installed on your machine or environment where the Agent Panel extension can run
• A Framelink Figma MCP Server setup (or access to it via the Framelink extension)
• A Figma API access token with Read-Only permissions for File Content and Dev Resources

Step 1: Obtain a Figma API key

• Log in to Figma
• Generate a Personal Access Token (PAT) with read-only permissions for File Content and Dev Resources
• Save the token securely

Step 2: Install the Zed extension

• Open Zed and navigate to Extensions
• Search for and install the Framelink Figma MCP Server Extension for Zed

Step 3: Configure the MCP server in Zed

• In Zed Extensions, add or edit the mcp-server-figma context server
• Set the figma_api_key to your Figma PAT

Step 4: Add the configuration to your project (example)

• The extension expects a configuration block like:

  { "context_servers": { "mcp-server-figma": { "settings": { "figma_api_key": "<FIGMA_API_KEY>" } } } }

Step 5: Reload/Restart Zed extensions

• Apply the changes and reload the Extension or Zed instance to establish the context server connection

Tips:

• Use a dedicated Figma API key for the extension to avoid cross-project token exposure.
• Ensure the API key has at least read-only access to the necessary Figma assets (File Content, Dev Resources).
• If Zed cannot fetch context, verify network access to Figma and that the API key is correctly configured in the mcp-server-figma settings.
• The mcp-server-figma configuration is tied to the Zed Extension; changes require reloading the extension within Zed.
• For debugging, check Zed extension logs for any errors related to Figma API calls or authentication.
• Consider rotating the Figma API key periodically and updating the extension configuration accordingly.