Framelink MCP for Figma

0.11.0 · active · verified Tue Apr 21

Figma Developer MCP (Model Context Protocol) is a Node.js server designed to bridge Figma design data with AI-powered coding agents, such as Cursor. Currently at version 0.11.0, the package sees a rapid release cadence, often with multiple updates within a month, indicating active development. Its core function is to fetch relevant metadata from the Figma API, then simplify and translate this data into a format optimized for AI models, focusing on layout and styling information. This targeted data reduction helps AI agents accurately "one-shot" designs into various frameworks, improving their precision compared to alternative methods like screenshot analysis. It differentiates itself by acting as a specialized intermediary, reducing context overload for AI models and facilitating direct integration of design specifications into code generation workflows via the Model Context Protocol.

Common errors

```
403 Forbidden: Missing Figma API Key
```
cause The Figma API key is either missing, incorrect, or does not have sufficient permissions to access the specified Figma file.

fix Ensure the `FIGMA_API_KEY` is correctly set in your AI client's configuration or as an environment variable, and that it's a valid personal access token with appropriate permissions. Check the Figma help documentation for creating and managing tokens.
```
Error: Node not found with ID '...' in Figma file '...'
```
cause The specific Figma node (frame, group, component) referenced by its ID could not be found within the provided Figma file URL.

fix Verify that the Figma link points to a valid and accessible node within the file. The node might have been deleted, moved, or the link itself is malformed.
```
mcpServers configuration error: 'command' or 'args' not found
```
cause The AI client's configuration for the MCP server is incomplete or malformed, missing required fields like `command` or `args`.

fix Carefully review your AI client's MCP server configuration JSON against the provided quickstart example, ensuring all necessary fields are present and correctly formatted, especially `command` and `args`.

Warnings

breaking The server's internal HTTP transport mechanism was switched to a stateless model. This could impact custom integrations or configurations that relied on the previous stateful behavior.
Fix: Review any custom server configurations or integrations for compatibility. The new stateless approach might require changes in how state is managed externally if needed.
breaking The `getServerConfig()` function signature changed. It no longer accepts an `isStdioMode` parameter; it now internally detects stdio mode and returns it as part of the `ServerConfig` object.
Fix: If you are programmatically interacting with `getServerConfig()`, update your calls to remove the `isStdioMode` parameter and retrieve stdio mode from the returned `ServerConfig` object instead.
gotcha Anonymous PostHog telemetry was added, which collects usage data. Users should be aware of this data collection. There is no explicit mention of an opt-out mechanism in the provided changelog.
Fix: Review the project's documentation or GitHub repository for information on how to opt-out of telemetry if privacy is a concern.
gotcha The default behavior for routing traffic through `EnvHttpProxyAgent` was changed. Previously, all traffic was routed, but this was stopped in version 0.11.0.
Fix: If your environment relies on HTTP proxy auto-detection via environment variables (like `HTTP_PROXY`), verify that network requests from `figma-developer-mcp` are still routed correctly or reconfigure explicit proxy settings if necessary.
gotcha The package now enforces Node.js version `20.20.0` or higher. Older Node.js versions are not supported and will prevent the server from running.
Fix: Ensure your Node.js environment is updated to version `20.20.0` or newer to run this package.

Install

npm install figma-developer-mcp npm
yarn add figma-developer-mcp yarn
pnpm add figma-developer-mcp pnpm

Imports

Figma Developer MCP Server
```
npx figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
```
This package is primarily a command-line tool and server. Direct programmatic imports (e.g., `import { ... } from 'pkg'`) are not its typical use case. It is usually invoked via `npx` or a direct executable call within an AI client's configuration.
Figma Developer MCP Server (Windows)
```
cmd /c npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
```
The command for running the server on Windows often requires `cmd /c` to correctly execute `npx`.

Quickstart

This configuration JSON snippet demonstrates how to set up Framelink MCP for Figma within an AI client that supports Model Context Protocol servers, such as Cursor. It specifies the command to run the server and passes the Figma API key.

{  "mcpServers": {    "Framelink MCP for Figma": {      "command": "npx",      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"],      "env": { "FIGMA_API_KEY": "YOUR-KEY" }    }  }}

view raw JSON →