Figma MCP server

Last verified: 2026-09

Read Figma file structure and screenshots.

Community Developer tools Needs a secret Claude Desktop, Cursor, Windsurf, Claude Code, VS Code

What it does

Framelink / GLips Figma Context MCP. Pulls file structure and (optionally) image assets so the model can implement a frame. Needs a Figma PAT.

It sits in Developer tools: Split this category in two.

Good for

Pass a file key and node id from the Figma URL and implement that frame.
Get layout structure as data instead of a screenshot in the chat.
Download image fills when you need the actual assets.
Do not dump a whole org file — one node at a time.

Tools

get_figma_data — File/node tree and layout for a file or node id.
download_figma_images — Export image fills when you need pixels.

Config (Claude Desktop / Cursor / Windsurf)

Paste the JSON below. Same mcpServers shape. Replace placeholder paths and secrets. Windows paths look like C:\\Users\\you\\project, not /path/to. Host-side steps →

Claude Desktop

OS	Config file
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json` (usually `C:\Users\<you>\AppData\Roaming\Claude\`)
Linux	`~/.config/Claude/claude_desktop_config.json`

Cursor

Scope	macOS / Linux	Windows
This project	`.cursor/mcp.json` in the repo root
This user	`~/.cursor/mcp.json`	`%USERPROFILE%\.cursor\mcp.json`

Windsurf

OS	Config file
macOS / Linux	`~/.codeium/windsurf/mcp_config.json`
Windows	`%USERPROFILE%\.codeium\windsurf\mcp_config.json`

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "figd_..."
      }
    }
  }
}

Windsurf remote MCP: use serverUrl instead of url if the block below is HTTP.

One-liner: npx -y figma-developer-mcp

Secrets it wants: FIGMA_API_KEY

Source repo →

How to get started

Create a Figma personal access token. Set FIGMA_API_KEY.
Pass a file key and a node id from the Figma URL (the part after node-id=).
Ask it to describe that frame, then implement — do not dump a whole org file.

Access risk

A PAT can read any file your Figma user can. Team files often have unreleased product UI.

When to skip it

Skip it if you only need a screenshot (paste it) or if the file is Canva.

Instead: Canva, Magic UI, shadcn/ui.

Developer toolsCanvaCreate and edit Canva designs. Developer toolsMagic UIGenerate UI components from 21st.dev. Developer toolsshadcn/uiAdd shadcn components from the registry.

Vs alternatives

Server	Official?	Needs a secret?	Best for
Figma	No	Yes	Read Figma file structure and screenshots.
Canva	No	Yes	Create and edit Canva designs.
Magic UI	No	Yes	Generate UI components from 21st.dev.
shadcn/ui	No	No	Add shadcn components from the registry.

More in Developer tools

OfficialEverythingReference server that exercises the whole MCP protocol. OfficialGitRead a local git repo: log, diff, status. OfficialGitHubRepos, issues, PRs, and file contents on GitHub. OfficialGitLabProjects, issues, and merge requests on GitLab.

All 18 in this category →

FAQ

Which token?

A Figma personal access token (FIGMA_API_KEY). It can read any file your user can, including unreleased UI.

Can it edit the Figma file?

This Framelink/GLips server is a read/export path for implementation. Do not assume write.

Figma or Canva?

Figma for product UI frames. Canva for marketing designs.

Where is the node id?

In the Figma URL after node-id=. Use that, not the whole page.