Figma MCP Server (Framelink)Featured

What is Figma MCP Server (Framelink)?

Figma MCP Server (Framelink) is an open-source Figma MCP server that gives Cursor, Claude Code and other AI coding agents your Figma layout and styling data, so they can implement a design from a pasted link instead of guessing from screenshots.

It is a community project by GLips, published on npm as figma-developer-mcp under the MIT license. It is not Figma's own server. Before the data reaches the model, it trims and translates the Figma REST API response down to the layout, styling and content that matter for code. Less context means more accurate output.

How to use Figma MCP Server (Framelink)?

Prerequisites:

• Node.js 20 or newer (npx is used to run the package).
• A Figma personal access token. Create one in Figma under Settings → Security → Personal access tokens. The Framelink docs list the scopes to tick, and the minimum is file_content:read and file_dev_resources:read.

You can pass the token as --figma-api-key=YOUR-KEY or set FIGMA_API_KEY in the env block. The server also accepts an OAuth token through --figma-oauth-token / FIGMA_OAUTH_TOKEN. The --stdio flag makes it run as a local stdio MCP server.

Claude Code

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Claude Desktop

Open Settings → Developer, edit claude_desktop_config.json and add:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Cursor

Go to Cursor Settings → MCP → Add new global MCP server, or edit ~/.cursor/mcp.json (use .cursor/mcp.json for a single project). The same JSON works, or use the env-var form:

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

VS Code

"mcp": {
  "servers": {
    "Framelink_Figma_MCP": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windsurf

Windsurf uses the same mcpServers JSON as Claude Desktop.

On Windows, most clients can't launch npx directly. Set "command": "cmd" and start the args with "/c", "npx".

To use the server, right-click a frame or group in Figma, choose Copy/Paste as → Copy link to selection, paste the link into agent chat and ask the agent to implement it.

Key features of Figma MCP Server (Framelink)

• Reads Figma files, frames and groups from a link: the file key and node-id are taken from the URL.
• Simplifies the Figma API output to layout, styling, text and component data, which keeps token use low. The default output format is a compact tree; --format=yaml and --format=json are also available.
• Supports auto layout, CSS Grid, rich text styling, gradients, effects and strokes, according to the changelog.
• Downloads SVG and PNG assets into your project. Writes are confined to --image-dir, which defaults to the working directory.
• --skip-image-downloads removes the download tool entirely when you only need read access.
• Can also run as a local HTTP server (StreamableHTTP at /mcp, default port 3333), where each request can send its own X-Figma-Token header.
• Includes proxy support (--proxy, FIGMA_PROXY) for corporate networks.
• Free and MIT-licensed. Telemetry is on by default and can be disabled with --no-telemetry, FRAMELINK_TELEMETRY=off or DO_NOT_TRACK.

Figma MCP Server (Framelink) tools

The server exposes two tools:

• get_figma_data takes a fileKey and an optional nodeId and returns the simplified layout, content, visuals and component information for that file or node. It is the tool agents call when you paste a Figma link.
• download_figma_images exports image fills and icon nodes as SVG or PNG (PNG scale defaults to 2x) to a localPath inside the image directory, so generated code can reference real assets.

Use cases of Figma MCP Server (Framelink)

• Turn a landing page frame into components: "Implement this Figma frame in React with Tailwind: ".
• Match an existing design system: "Build this card using our existing Button and Badge components, matching the spacing in Figma."
• Pull real icons and images instead of placeholders: "Download the icons in this frame to public/icons and use them."
• Port one design to several stacks, such as SwiftUI, Vue or plain HTML/CSS, since the output does not depend on any framework.
• Check an implementation against the design: "Compare this page with the Figma frame and list spacing or color differences."

Figma MCP Server (Framelink) vs alternatives

Figma has its own official Figma MCP server, formerly called the Dev Mode MCP server. It comes in two forms: a remote server at https://mcp.figma.com/mcp that you sign into with your Figma account, and a desktop server that runs through the Figma desktop app. The desktop server needs a Dev or Full seat on a paid plan. Figma's server has many more tools, including get_design_context, get_screenshot, get_variable_defs, Code Connect tools and write-to-canvas tools. For Claude Code the setup is claude mcp add --transport http figma https://mcp.figma.com/mcp.

Framelink is better suited if you want a small, read-focused figma context MCP that runs locally with a personal access token and needs no desktop app. Its output is compact and works the same in any MCP client. Choose Figma's official server if you need Code Connect, variables, or writing designs back to Figma.

Troubleshooting Figma MCP Server (Framelink)

• 403 "Invalid scope(s)" or "Invalid token": generate a new personal access token with at least file_content:read and file_dev_resources:read, and check the config for typos or leftover placeholder text.
• 403 "File not exportable": the file owner has to allow viewers to copy, share and export, or you can duplicate the file into your own workspace.
• 429 / rate limit hit: Figma API limits depend on the file owner's plan and seat, and free plans get very few requests. Move the file to a paid team, or wait.
• fetch failed / ECONNRESET behind a proxy: add --proxy=http://your-proxy:8080 or set FIGMA_PROXY. Use --proxy=none to ignore proxy environment variables.
• Cannot find module errors: close the client, run npx clear-npx-cache, then reopen it.