Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
GLips avatar

Figma Context MCP

  • 15.5k repo stars
  • Updated July 3, 2026
  • GLips/Figma-Context-MCP

Figma Context MCP is an MCP server that exposes your Figma file data so coding agents can implement the designs in any framework.

About

Figma Context MCP is a Model Context Protocol server that gives coding agents access to your Figma files through the Figma API. Developers use it when they want an agent to implement a Figma design in code and need it to read the actual layout, typography, and styling metadata rather than a screenshot. It simplifies the Figma API response down to the most relevant layout and styling information before passing it to the model. You run it locally over stdio and supply your own Figma personal access token.

  • Wraps the Figma API so coding agents read layout and styling instead of screenshots
  • npm package figma-developer-mcp v0.9.0 over stdio, requires a FIGMA_API_KEY personal access token
  • Designed for Cursor and other AI coding tools to implement designs in any framework

Figma Context MCP by the numbers

  • Data as of Jul 28, 2026 (Skillselion catalog sync)
terminal
claude mcp add --env FIGMA_API_KEY=YOUR_FIGMA_API_KEY figma-developer-mcp -- npx -y figma-developer-mcp --stdio

Add your badge

Show developers this MCP server is listed on Skillselion. Paste this into your README.

Listed on Skillselion
repo stars15.5k
Packagefigma-developer-mcp
TransportSTDIO
AuthRequired
Last updatedJuly 3, 2026
RepositoryGLips/Figma-Context-MCP

How do I get my coding agent to implement a Figma design accurately instead of guessing from a pasted screenshot?

Point a coding agent at a Figma file, frame, or group so it can read the real layout and styling and implement the design in code.

Who is it for?

Developers using Cursor or another AI coding tool who want the agent to build UI directly from a Figma file.

Skip if: Teams that need to edit or write back to Figma; this server reads design data for code generation, it does not modify Figma files.

What you get

The agent fetches simplified layout and styling metadata from Figma and writes framework code that matches the design more closely.

  • Agent-readable Figma file and node context via MCP
  • Faster first-pass UI code aligned to design file metadata

By the numbers

  • Single Figma personal access token (FIGMA_API_KEY) required
  • npm package version 0.9.0
At a glance

Figma Context MCP capabilities & compatibility

Free open-source server; requires your own free Figma personal access token.

Capabilities
figma file read · design to code · layout extraction · styling extraction
Works with
figma
Use cases
frontend · ui design · web design
IDEs
cursor ide · vscode
Runs
Runs locally
Pricing
Bring your own API key
Requires keys
FIGMA_API_KEY
From the docs

What Figma Context MCP says it does

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

Framelink MCP for Figma

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

weekly downloads MIT License Discord
Twitter

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

Watch the video

How it works

  1. Open your IDE's chat (e.g. agent mode in Cursor).
  2. Paste a link to a Figma file, frame, or group.
  3. Ask Cursor to do something with the Figma file—e.g. implement the design.
  4. 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

Star History Chart

Learn More

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

Recommended MCP Servers

How it compares

Figma API MCP bridge, not a Figma plugin marketplace or static design-to-code SaaS alone.

FAQ

What do I need to use Figma Context MCP?

You need a Figma personal access token set as FIGMA_API_KEY, and an MCP client such as Cursor configured to launch figma-developer-mcp over stdio.

Why is this better than pasting a screenshot?

The server fetches real layout and styling metadata from the Figma API and simplifies it before passing it to the model, so the agent one-shots designs more accurately than from a screenshot.

Which tools does it work with?

It is designed for Cursor and other AI-powered coding tools that support the Model Context Protocol, and it can be added to their MCP server configuration files.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.