Prepare the server locally
Run this once before adding it to Claude Code.
git clone https://github.com/nludd25/Figma-Context-MCP
cd Figma-Context-MCPThen follow the repository README for any remaining dependency or build steps.
Register it in Claude Code
claude mcp add -e "FIGMA_API_KEY=${FIGMA_API_KEY}" figma-context -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdioReplace any placeholder paths in the command with the real path on your machine.
FIGMA_API_KEY+ 1 optionalMake your agent remember this setup
figma-context's config, env vars, and the gotchas you hit — recalled in every future Claude Code, Cursor, and Codex session.
npx conare@latestFree · one command · indexes the sessions already on disk. Set up in the browser instead →
What it does
- Fetches layout and styling metadata directly from Figma files
- Simplifies and translates Figma API responses for AI consumption
- Reduces context size to improve AI accuracy and relevance
- Enables one-shot UI implementation in code from design links
Environment Variables
FIGMA_API_KEYrequiredPersonal access token for the Figma APIPORTOptional port configurationTry it
Original README from nludd25/Figma-Context-MCP
<source media="(prefers-color-scheme: dark)" srcset="https://www.framelink.ai/github/HeaderDark.png" />
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.
<h3>See quickstart instructions →</h3>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.