MCP server to provide Figma layout information to AI coding agents like Cursor
- โข Basic MCP protocol features implemented (17/40)
- โข GitHub community is developing well (16/20)
- โข Optimal dependency management (20/20)
- โข Full deployment maturity (10/10)
- โข Documentation (8/8)
- โข Archestra MCP Trust score badge is missing
{
"figma-developer-mcp-stdio-with-config": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
},
"figma-developer-mcp-stdio-with-config-windows": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
],
"env": {}
},
"figma-developer-mcp-stdio-with-env": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "YOUR-KEY",
"PORT": "YOUR-PORT"
}
}
}
Framelink Figma MCP Server
๐ Available in: ํ๊ตญ์ด (Korean) | ๆฅๆฌ่ช (Japanese) | ็ฎไฝไธญๆ (Simplified Chinese) | ็น้ซไธญๆ (Traditional Chinese)
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 Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows
{
"mcpServers": {
"Framelink Figma MCP": {
"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 Figma MCP server, see the Framelink docs.
Star History
Learn More
The Framelink Figma MCP server is simple but powerful. Get the most out of it by learning more at the Framelink site.
[](https://archestra.ai/mcp-catalog/glips__figma-context-mcp)Framelink Figma MCP Server
๐ Available in: ํ๊ตญ์ด (Korean) | ๆฅๆฌ่ช (Japanese) | ็ฎไฝไธญๆ (Simplified Chinese) | ็น้ซไธญๆ (Traditional Chinese)
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 Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows
{
"mcpServers": {
"Framelink Figma MCP": {
"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 Figma MCP server, see the Framelink docs.
Star History
Learn More
The Framelink Figma MCP server is simple but powerful. Get the most out of it by learning more at the Framelink site.
Related MCP Servers
Agent-MCP
89/100Agent-MCP is a framework for creating multi-agent systems that enables coordinated, efficient AI collaboration through the Model Context Protocol (MCP). The system is designed for developers building AI applications that benefit from multiple specialized agents working in parallel on different aspects of a project.
serena
85/100A powerful coding agent toolkit providing semantic retrieval and editing capabilities (MCP server & other integrations)
JFrog MCP Server
85/100Official JFrog MCP server that enables AI assistants to interact with the JFrog Platform. Supports repository management, build tracking, runtime monitoring, artifact searching, package intelligence, and Xray security scanning.
context7
82/100Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors
gk-cli
81/100GitKraken CLI Releases and Documentation
Excalidraw
80/100Remote MCP server for Excalidraw - streams hand-drawn diagrams with smooth viewport camera control and interactive fullscreen editing