Provides access to Figma design data via the Figma API, fetching relevant metadata for Figma files, frames, or groups and simplifying it into layout and styling information so coding agents can implement designs accurately.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Framelink Figma MCP Server Convert this Figma frame to React and Tailwind: https://figma.com/file/abc123/Design?node-id=1-2"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
Watch a demo of building a UI in Cursor with Figma design data
Related MCP server: figma-developer-mcp
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.
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.
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}{
"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.
The Framelink Figma MCP server is simple but powerful. Get the most out of it by learning more at the Framelink site.
This server cannot be deployed
The Figma MCP server brings Figma design context directly into your AI workflow.
Serves your design system and coding standards to coding agents, so they stop guessing.
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Connect AI coding agents to Anima Playground, Figma, and your design system.
