Framelink Figma MCP

Feeds Figma layout and styling to coding agents so the UI matches the design.

Started in our test
★ 16.1K GitHub stars
61.3K downloads a week
Last commit 25 Oct 2026

At a glance

Paste a link to a Figma frame and Framelink fetches it through the Figma API, then trims the response down to the layout, spacing, colours and text a coding agent needs. Less noise than the raw API means better first attempts at the component.

It reads designs only; it does not change your Figma files.

Made by: Framelink (Graham Lipsman and contributors)
Licence: MIT
Latest version: 0.13.2 (18 Jun 2026)
npm package: figma-developer-mcp
GitHub stars: 16.1K
Downloads: 61.3K a week
Last commit: 25 Oct 2026
Tools: 2
Runs on: Your computer

Our check: We ran this exact config on 26 Oct 2026: it started and answered with 2 tools.

What's in the pod: its tools

We found 2 tools when we started it on 26 Oct 2026. Every one of them only reads, so nothing changes unless you act on what it finds.

Only reads2 tools · Looks things up and changes nothing.

Tool	What it is for
`download_figma_images`	Saves the icons and images used in a design as SVG or PNG files into your project.
`get_figma_data`	Fetches a Figma file or one frame and trims it to the layout, text, styles and components a coding agent needs.

Grouped and described by us. The README on GitHub lists the inputs each tool takes.

Set it up

Pick your app for the exact snippet and where it goes.

Where it goes: claude_desktop_config.json (Settings → Developer → Edit Config)

Claude Desktop

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

Where it goes: Your terminal, in the project folder

Claude Code

claude mcp add-json framelink-figma '{"command":"npx","args":["-y","figma-developer-mcp","--figma-api-key=YOUR-KEY","--stdio"]}'

Where it goes: ~/.cursor/mcp.json, or .cursor/mcp.json in a project

Cursor

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

Where it goes: .vscode/mcp.json in your project

VS Code

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

Where it goes: ~/.codeium/windsurf/mcp_config.json

Windsurf

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

Replace YOUR-KEY with a Figma personal access token (Figma → Settings → Security).

New to this? See the setup guides for Claude Code, Cursor, Claude Desktop and ChatGPT.

Settings

Names are exactly as the project spells them. Required ones are marked.

Setting	What it does
`FIGMA_API_KEY`Environment variable · required	Your Figma personal access token. Read access to files is enough.`figd_xxxxxxxx`
`--figma-api-key`Command line flag	The same token passed as an argument instead of an environment variable.`--figma-api-key=figd_xxxxxxxx`
`--stdio`Command line flag · required	Talks to your app over standard input and output. Needed in a client config.`--stdio`
`PORT`Environment variable	Port for running it as a local HTTP server instead.`3333`

What it can touch

It can read

Any Figma file your token can open, frame by frame

It can change

Writes downloaded images into a folder you name in your project
Nothing in Figma: it never edits designs

Safer setup: Create a token with file read access only, and revoke it in Figma settings when you stop using it.

Before you start

A Figma personal access token
Node.js 18 or newer

If it does not work

403 or "Invalid token" errors: The token is missing, expired or lacks file read scope. Make a new personal access token in Figma settings and paste it again.
The output is huge and fills the context window: Paste a link to a single frame (it carries a node-id) rather than the whole file.
Windows says npx is not found: Use "command": "cmd" with args ["/c", "npx", ...] in the config, as the project's Windows example shows.

Peas in a pod: similar servers

How Framelink Figma MCP lines up against other design, 3d and games servers on the shelf.

Server	Tools	Runs on	Licence	Stars
Framelink Figma MCP	2	Your computer	MIT	16.1K
Talk to Figma	40	Your computer	–	7.1K
Godot MCP	14	Your computer	MIT	6.4K
KiCad MCP	244	Your computer	–	3K
MiniMax	8	Your computer	MIT	1.6K

Questions

What is the difference between Framelink and Talk to Figma?

Framelink only reads designs through Figma's API so an agent can build matching code. Talk to Figma goes the other way: it edits the open Figma file through a plugin.

Do I need a paid Figma plan?

No. A personal access token from any account works, as long as the account can open the file.

How do I point it at one screen?

Right-click the frame in Figma, copy the link to the selection and paste that into your chat. The link includes the frame's node id.

Full docs on GitHubGLips/Figma-Context-MCP

Something wrong on this page? Tell us.