
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)
claude mcp add --env FIGMA_API_KEY=YOUR_FIGMA_API_KEY figma-developer-mcp -- npx -y figma-developer-mcp --stdioAdd your badge
Show developers this MCP server is listed on Skillselion. Paste this into your README.
| repo stars | ★ 15.5k |
|---|---|
| Package | figma-developer-mcp |
| Transport | STDIO |
| Auth | Required |
| Last updated | July 3, 2026 |
| Repository | GLips/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
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
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
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.
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.
