A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
A complete solution for creating and modifying Figma designs through Cursor Agent using the Model Context Protocol.
Blog: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/
This project enables AI-powered design creation in Figma using natural language prompts through Cursor Agent. It consists of two main components:
With this integration, you can use natural language to: - Create basic design elements (shapes, text, etc.) - Design complete page layouts with multiple sections - Modify existing designs
cd figma-mcp-server
cp .env.example .env # Edit this file to add your Figma token
bun install
bun run index.tscd figma-plugin
npm install
npm run buildThen import the plugin into Figma:
1. Open Figma
2. Go to Plugins > Development > Import plugin from manifest
3. Select the figma-plugin/manifest.json file
In Cursor:
1. Go to Settings > Agent > MCP Servers
2. Add a new server with URL: http://localhost:3000/api/mcp/schema
For more detailed instructions, see: - MCP Server README - Figma Plugin Setup Guide
Once everything is set up, you can use Cursor Agent to create designs with prompts like:
Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.MIT
[
{
"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"
}
]