What is Framelink MCP for Figma?
Framelink MCP for Figma, from the GLips/Figma-Context-MCP repository, is an MIT-licensed server that gives an AI coding agent Figma layout and style data. It simplifies the Figma API response before returning it. You run it with npx and a Figma personal access token.
Framelink MCP for Figma is an open-source Model Context Protocol server that gives AI coding tools access to your Figma files. The repository is GLips/Figma-Context-MCP and the npm package is figma-developer-mcp.
Before it answers, it simplifies and translates the Figma API response so only the most relevant layout and styling information reaches the model. The quickstart says this compresses the data by almost 90 percent.
What it changes in your workflow
- You paste a link to a Figma file, frame or group, and the agent fetches the matching data itself.
- The agent works from layout and style data rather than a pasted screenshot, which the README says is far better for accurate one-shot designs.
- Image and icon assets can be downloaded to a folder in your project as PNG, SVG or GIF files.
- You choose the framework, because the data is not tied to one output format.
Who it is for
Best for
- Developers who implement Figma designs in their own codebase and want a free, open-source reader.
- Teams that work one section at a time, since the docs say whole complex designs can overwhelm an agent.
- Anyone who prefers a personal access token over an OAuth sign-in flow.
Not for
- Writing back to Figma. The server reads data and downloads images, and it has no canvas edit tools.
- Getting an editable WordPress page. The output is code for you to place.
- Large designs in one request. The docs advise working on one section at a time for consistent results.
Framelink or Figma's own server
| Framelink MCP for Figma | Figma's official server | |
|---|---|---|
| Source | Open source, MIT | First-party from Figma |
| Auth | Personal access token | OAuth sign-in (remote) |
| Runs | Locally with npx | Hosted remote or desktop app |
| Tools | 2: get_figma_data, download_figma_images | Many, including write to canvas |
| Best for | Reading layout and styles into code | Code, design systems and canvas edits |
Use it with UiChemy
Framelink hands your agent the design data, and the agent writes code. If you would rather turn the Figma file into an editable WordPress page directly, UiChemy Figma to WordPress does that. Compare with Figma's official MCP server first. Click Get Started on uichemy.com.
Connect Framelink MCP for Figma: Setup, Tools and Limits to your AI client
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdioCreate a Figma access token
In Figma, open Settings, then Security, then Personal access tokens and click Generate new token. Give it read permission on File content and Dev resources.
Add the server to your client
Add the JSON config shown here to your client's MCP configuration file, replacing YOUR-KEY with your token. On Windows, use cmd with /c, npx, -y and the same arguments instead.
Or use environment variables
The README says you can set FIGMA_API_KEY and PORT in the env field instead of passing the key as an argument.
Let it install
The quickstart says that once the configuration is updated, the server is downloaded and started automatically.
Copy a link to a frame
In Figma, right-click a frame or group, choose Copy/Paste as, then Copy link to selection.
Prompt your agent
Paste the link with a request such as: implement this Figma frame. The agent should call get_figma_data with your link.
Client configuration
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}Endpoints and ports
figma-developer-mcpRun through npx in the config above.https://www.framelink.ai/docs/quickstartClient-by-client setup instructions.https://www.framelink.ai/docs/best-practicesPrompting guidance from the Framelink docs.https://www.framelink.ai/docs/troubleshootingCommon connection issues.What you can do with it
- Simplified design dataThe server reduces the Figma API response to the layout and styling details a model needs, which the quickstart says cuts the data by almost 90 percent.
- Link-based promptingCopy a link to a frame or group, paste it into your prompt, and the agent calls get_figma_data with the file key and node id.
- Framework neutralThe data is not tied to one output. You choose the framework in your prompt.
- Asset downloaddownload_figma_images saves icons and images into your project as PNG, SVG or GIF files.
- Broad client listThe quickstart has setup sections for dozens of clients, including Cursor, Codex, VS Code, Windsurf, Gemini CLI, Cline and JetBrains AI Assistant.
- Open source and free to runThe code is MIT licensed, and you run it yourself with npx and your own Figma token.
- Windows, Bun and Deno supportThe docs include a Windows configuration and instructions for using Bun or Deno instead of npx.
Tools it exposes
get_figma_data
Fetches Figma file data covering layout, content, visuals and component information. It takes a file key, an optional node id from the link, and an optional depth that the tool says to use only when explicitly requested.
download_figma_images
Downloads SVG and PNG images, and animated GIFs, for image or icon nodes into a folder you specify. PNG export scale defaults to 2, and it supports cropping from a transform matrix.
Frequently asked questions
What is Framelink MCP for Figma?
It is an open-source MCP server, published as the figma-developer-mcp package from the GLips/Figma-Context-MCP repository. It reads your Figma files through the Figma API, simplifies the data to layout and styling, and gives it to an AI coding agent so the agent can implement a design in any framework.
How do I set it up?
Create a Figma personal access token with read access to File content and Dev resources. Then add an mcpServers entry that runs npx -y figma-developer-mcp with your key and --stdio. On Windows use cmd with /c. The Framelink quickstart lists the exact steps for each client.
Which clients does it work with?
The README says the server is designed for Cursor and other AI coding tools. The quickstart has sections for Claude Code, Cursor, Codex, VS Code, Windsurf, Gemini CLI, Cline, JetBrains and many more. If yours is missing, most MCP clients accept the same JSON format.
Does it need a Figma paid plan?
The README and quickstart pages read for this entry do not state a plan requirement. They only require a personal access token with read permission on File content and Dev resources. Check Figma's own terms for token and API access on your plan.
How is it different from Figma's official MCP server?
Framelink is a community open-source server with two read tools and token authentication. Figma's own server is first-party, with remote OAuth and local desktop options, Code Connect and tools that write to the canvas. Pick Framelink for a simple reader, Figma's for the wider feature set.
Can it handle a whole page at once?
It can try, but the quickstart warns that complex designs can overwhelm an agent even after compression. For the most consistent results, work on one section at a time and copy a link to each frame or group. A text-brief skill like frontend-design can then guide the visual build.
Does it produce a WordPress page?
No. It gives your agent design data and downloads assets, and the agent writes front-end code. UiChemy Figma to WordPress converts Figma frames into editable WordPress pages directly. Click Get Started on uichemy.com to begin.