Enables AI to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Give Cursor, Windsurf, Cline, 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
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"]
}
}
}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.
[
{
"description": "Add a Figma file to your context",
"inputSchema": {
"properties": {
"url": {
"description": "The URL of the Figma file to add",
"type": "string"
}
},
"required": [
"url"
],
"type": "object"
},
"name": "add_figma_file"
},
{
"description": "Get a thumbnail for a specific node in a Figma file",
"inputSchema": {
"properties": {
"file_key": {
"description": "The key of the Figma file",
"type": "string"
},
"node_id": {
"description": "The ID of the node to view. Node ids have the format `<number>:<number>`",
"type": "string"
}
},
"required": [
"file_key",
"node_id"
],
"type": "object"
},
"name": "view_node"
},
{
"description": "Get all comments on a Figma file",
"inputSchema": {
"properties": {
"file_key": {
"description": "The key of the Figma file",
"type": "string"
}
},
"required": [
"file_key"
],
"type": "object"
},
"name": "read_comments"
},
{
"description": "Post a comment on a node in a Figma file",
"inputSchema": {
"properties": {
"file_key": {
"description": "The key of the Figma file",
"type": "string"
},
"message": {
"description": "The comment message",
"type": "string"
},
"node_id": {
"description": "The ID of the node to comment on. Node ids have the format `<number>:<number>`",
"type": "string"
},
"x": {
"description": "The x coordinate of the comment pin",
"type": "number"
},
"y": {
"description": "The y coordinate of the comment pin",
"type": "number"
}
},
"required": [
"file_key",
"message",
"x",
"y"
],
"type": "object"
},
"name": "post_comment"
},
{
"description": "Reply to an existing comment in a Figma file",
"inputSchema": {
"properties": {
"comment_id": {
"description": "The ID of the comment to reply to. Comment ids have the format `<number>`",
"type": "string"
},
"file_key": {
"description": "The key of the Figma file",
"type": "string"
},
"message": {
"description": "The reply message",
"type": "string"
}
},
"required": [
"file_key",
"comment_id",
"message"
],
"type": "object"
},
"name": "reply_to_comment"
}
]