Figma Context MCP

Name: Figma Context MCP
Author: GLips

by GLipsversion 0.13.2i★ 16,165iRuns on your computer

Registry nameio.github.GLips/Figma-Context-MCP

Overview

Description from the maker (original English)

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

User voiceiNo reviews yetReviews open together with accounts in a later step
Our basic checksi3 of 3 passedChecked from public information; code not scanned yet
UsageiWidely used★ 16,165

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

Connection: Runs on your computer
Transport: stdio
Category: Design, images & audio
You need to fill in: FIGMA_API_KEY

Install

Pick the AI app you use, then copy the settings.

You need

npmNode.js installed (for the npx command)

Claude DesktopClaude CodeCursorVS Code

Open Claude Desktop → Settings → Developer → Edit Config, and paste this into claude_desktop_config.json

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

Run this in your terminal

claude mcp add figma-context --env FIGMA_API_KEY=your-value -- npx -y figma-developer-mcp --stdio

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "figma-context": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

Values you fill in

FIGMA_API_KEY secret required env
Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Values marked secret are keys to your account. Never share them or paste them into a chat.

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 5, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account GLips, which owns the repo
✓ Pass
Still maintained
Code last changed 9 days ago
✓ Pass
Has a licence
Uses MIT
– Not applicable
Endpoint responds
This one runs on your computer; there is no internet endpoint
– Not applicable
Sign-in with OAuth
Runs on your computer and uses local settings instead
… Not checked yet
No hidden instructions in tool descriptions
Needs the server’s tool list first; this check starts in the next step

Compared with others in Design, images & audioi

More stars than 100% of the other 14 servers in this category
Published to the registry more recently than 21% of the other 14 servers in this category
Basic checks equal to or better than 100% of the other 14 servers in this category

Compared only with servers in this prototype, not the whole registry.

Common questions

Is Figma Context MCP safe?

It passed 3 of 3 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

You need to fill in: FIGMA_API_KEY

Does it run on my computer or in the cloud?

It runs on your computer. Your AI app starts it when needed, and data does not pass through the maker’s servers (unless it calls an online service itself).

Is it still maintained?

The GitHub repo last changed 9 days ago, and the latest version (0.13.2) reached the registry 5 months ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. You also need Node.js on your computer.

What can I use instead?

In the same category: Claude Real Video, Figma MCP Server, Harness

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

Claude Real Video

by HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

Runs on your computer★ 2,284MITUpdated 2 months ago

Figma MCP Server

by figma

Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.

Runs in the cloud★ 2,152Updated 13 months ago

Harness

by autonomous-ai

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

Runs on your computer★ 1,428MITUpdated 17 days ago

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

Framelink MCP for Figma Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions →

Demo

Watch a demo of building a UI in Cursor with Figma design data

How it works

Open your IDE's chat (e.g. agent mode in Cursor).
Paste a link to a Figma file, frame, or group.
Ask Cursor to do something with the Figma file—e.g. implement the design.
Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux

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

Windows

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

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink MCP for Figma, see the Framelink docs.

Star History

Learn More

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.