figma-developer-mcp
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
pinned to #24713d8updated 3 months ago
Ask your AI client: “install mcps/figma-developer-mcp”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install mcps/figma-developer-mcpmetahub onboarded this repo on the author's behalf.
If you own github.com/GLips/Figma-Context-MCP on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
15,168
Last commit
3 months ago
Latest release
published
- #ai
- #cursor
- #figma
- #mcp
- #typescript
What this server exposes
Surfaces parsed from this server's source at publish time.
Launches: figma-developer-mcp
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.24713d8· 3 months ago
Behavioral checks haven't run yet: the sandbox couldn't execute this artifact (it may need credentials we don't provide, or an unsupported build). An environment limit, not a verdict.
Safety
2 passed1 warningDependencies: known vulnerabilitieswarn
3 high/critical advisories — [email protected] (HIGH: GHSA-hm92-r4w5-c3mj) · [email protected] (HIGH: GHSA-vmh5-mc38-953g) (+1)
Update the affected packages, then re-publish. (`npm audit` shows the same data locally.)
LICENSE file at repo root
LICENSE
No sensitive files in the repo
scanned for .env, credentials.json, *.pem, .ssh/, AWS / GCP configs — none found
Release history
1- releasecurrent24713d8warn3 months ago
Contents
[
](https://www.framelink.ai/?utm_source=github&utm_medium=referral&utm_campaign=readme)
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.
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.
Reviews
No reviews yet. Be the first.
Related
headroom
The Context Optimization Layer for LLM Applications - Cut costs by 50-90%
Next Ai Draw Io
MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview
Playwright Mcp
Playwright Tools for MCP
mh install mcps/figma-developer-mcp