PIXELYou commented this keyword
Framelink MCP for Figma
Paste a Figma link and your coding agent reads the real layout and styling data, so it can build the design accurately.
- A Figma personal access token
- Node.js (for npx)
- An MCP client
- Setup
- 5 min
- Level
- Beginner
- Stars
- 16.0k
- License
- MIT
What it does
Framelink MCP for Figma is an MCP server. An MCP server is a connector that gives an AI new tools. This one gives your coding agent access to your Figma files.
When you paste a link to a Figma file, frame or group, it fetches the design data from Figma's API and trims it down to the layout and styling details that matter. The README says this works better than pasting screenshots. It was built with Cursor in mind but uses the standard MCP config.
Install it
- Create a Figma personal access token. Figma's help article on managing personal access tokens explains how.
- Open your MCP client's config file.
- Paste the config below for macOS or Linux, and replace YOUR-KEY with your token.
- On Windows, use the Windows version below instead. Save and restart your client.
macOS / Linux config
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}Windows config
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}Use it
- Open your agent's chat.
- Paste a link to a Figma file, frame or group.
- Ask it to do something with the design, for example implement it as a page in your project.
Good to know
Instead of putting the token in the args, you can set FIGMA_API_KEY in the env field of the config. The README does not include Claude-specific steps; for more setup help, see the Framelink quickstart.
Want the next one first?
One new guide a week, straight to your inbox.
