Design & MediaMCP RegistrynpmA · 95

Figma-Context-MCP

Name: Figma-Context-MCP
Author: GLips

io.github.GLips · Updated 4mo ago

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

At a glance

Figma-Context-MCP is an MCP server in the Design & Media category. It runs locally over stdio via `npx -y figma-developer-mcp`, and needs FIGMA_API_KEY. It scores A (95/100) on the MCP Skills Hub health score as of Oct 28, 2026.

Source 16k

One-click install

VS Code VS Code Insiders Cursor

Opens your editor and pre-fills the config. Your editor will ask before adding it.

How to install Figma-Context-MCP in your AI client

Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.

How to install Figma-Context-MCP in Claude CodeAnthropic's agentic CLI

Add the server

bash

claude mcp add Figma-Context-MCP -e 'FIGMA_API_KEY=<FIGMA_API_KEY>' -- npx -y figma-developer-mcp

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.
3
Verify it's connected
bash
```
claude mcp list
```
Sharing it with your team?
Add `--scope project` to write it to .mcp.json in the repository root, which you can commit (with the secrets left as environment variables).
Use it in a session
Ask Claude to use the tools this server exposes. It discovers them automatically.

How to install Figma-Context-MCP in Claude DesktopDesktop app (MCP config)

Open your MCP config
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

Add this server

json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.
Restart Claude Desktop
The tools appear under the 🔌 menu once the app reloads.

How to install Figma-Context-MCP in CursorAI-first code editor

Create / edit .cursor/mcp.json in your project

json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.
Enable it
Cursor Settings → MCP → toggle the server on. Tools become available to the Composer/Agent.

How to install Figma-Context-MCP in Codex CLIOpenAI coding agent

Add to ~/.codex/config.toml

toml

[mcp_servers.Figma-Context-MCP]
command = "npx"
args = ["-y", "figma-developer-mcp"]
env = { FIGMA_API_KEY = "<FIGMA_API_KEY>" }

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.
Run Codex
Codex loads MCP servers from config.toml on startup and exposes their tools to the agent.

How to install Figma-Context-MCP in WindsurfCodeium's agentic IDE

Edit ~/.codeium/windsurf/mcp_config.json

json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.
Reload
Windsurf → Cascade → refresh MCP servers. Cascade can now call the tools.

How to install Figma-Context-MCP in ClineVS Code autonomous agent

Open Cline → MCP Servers → Configure
Adds to cline_mcp_settings.json.

Add the server

json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.

How to install Figma-Context-MCP in VS CodeCopilot / MCP support

Create .vscode/mcp.json

json

{
  "servers": {
    "Figma-Context-MCP": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}

Fill in your credentials
Replace <FIGMA_API_KEY> with your real value. Keep secrets out of any config file you commit.
Start it
VS Code shows a ▶ Start action above the server entry. Agent mode (Copilot Chat) can then use the tools.

What does Figma-Context-MCP need from you?

API key — Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

FIGMA_API_KEYrequiredsecretEnvironment variable
Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Pass secrets through your shell environment rather than committing them into a config file.

What tools does Figma-Context-MCP expose?

This server runs as a local package. We only query remote servers for their tool list — asking this one would mean executing it, so its tools are listed in the documentation below.

What the code can do

Read from the published package source — never executed. Parsed 9 of 9 source files.

This server can read and write files, make network requests and read your environment variables.

Some of this package is bundled— its dependencies are compiled into the published files. The capabilities below are really in what runs on your machine, but they may come from a bundled library rather than the author's own source.

How it was published

Published by a verified CI identity (github trusted publishing) rather than a personal token.
Has a provenance attestation tying this artifact to the commit it was built from.
1 npm maintainer — a single point of compromise · last published by GitHub Actions.

Maintainer of this package and think something here is wrong? Tell us and we'll correct it.

Before you install

Signals gathered from the source repo and package registry — not a safety verdict.

What it can reach

Runs code on your machine — Executes as a local process with your user's permissions, including filesystem access.
Downloads at launch — The package is fetched from its registry each run unless you pin a version.

Last commit 2 days ago — Actively maintained.
16k GitHub stars — Community adoption signal.

Client compatibility

Claude Code: NativeClaude Desktop: NativeCursor: NativeCodex CLI: NativeWindsurf: NativeCline: NativeVS Code: Native

Health score

A · 95

Maintenance, adoption, transparency and packaging — not a safety audit. How this is calculated

Maintenance30%100%
Last commit 2 days ago.
Adoption20%100%
16100 stars.
Transparency20%75%
3/4: ✓ public source repo, ✓ declared license, ✓ documentation, ✗ discoverable tool list.
Provenance15%100%
Package and registry entry point at the same repository.
Packaging15%100%
Publishes a pinned version (0.13.2).

Documentation

Full README

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.

Alternatives to Figma-Context-MCP

Maintain Figma-Context-MCP? Add a badge to your README

Shows its health grade, and links readers to install steps for every client.

markdown

[![Figma-Context-MCP on MCP Skills Hub](https://mcp-skills-hub.vercel.app/badge/io-github-glips-figma-context-mcp)](https://mcp-skills-hub.vercel.app/mcps/io-github-glips-figma-context-mcp)

Catalog data refreshed Oct 28, 2026. Something wrong? Report it.