cursor talk to figma mcp

Local 2025-08-31 23:23:20 0
Image And Video Processing @sonnylazuardi/cursor-talk-to-figma-mcp

An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.

This project implements a Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma for reading designs and modifying them programmatically.

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

Project Structure

  • src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
  • src/cursor_mcp_plugin/ - Figma plugin for communicating with Cursor
  • src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin

Get Started

  1. Install Bun if you haven't already:
curl -fsSL https://bun.sh/install | bash
  1. Run setup, this will also install MCP in your Cursor's active project
bun setup
  1. Start the Websocket server
bun socket
  1. MCP server
bunx cursor-talk-to-figma-mcp
  1. Install Figma Plugin

Quick Video Tutorial

image

Manual Setup and Installation

MCP Server: Integration with Cursor

Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}

WebSocket Server

Start the WebSocket server:

bun socket

Figma Plugin

  1. In Figma, go to Plugins > Development > New Plugin
  2. Choose "Link existing plugin"
  3. Select the src/cursor_mcp_plugin/manifest.json file
  4. The plugin should now be available in your Figma development plugins

Windows + WSL Guide

  1. Install bun via powershell
powershell -c "irm bun.sh/install.ps1|iex"
  1. Uncomment the hostname 0.0.0.0 in src/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
  1. Start the websocket
bun socket

Usage

  1. Start the WebSocket server
  2. Install the MCP server in Cursor
  3. Open Figma and run the Cursor MCP Plugin
  4. Connect the plugin to the WebSocket server by joining a channel using join_channel
  5. Use Cursor to communicate with Figma using the MCP tools

MCP Tools

The MCP server provides the following tools for interacting with Figma:

Document & Selection

  • get_document_info - Get information about the current Figma document
  • get_selection - Get information about the current selection
  • get_node_info - Get detailed information about a specific node
  • get_nodes_info - Get detailed information about multiple nodes by providing an array of node IDs

Creating Elements

  • create_rectangle - Create a new rectangle with position, size, and optional name
  • create_frame - Create a new frame with position, size, and optional name
  • create_text - Create a new text node with customizable font properties

Modifying text content

  • set_text_content - Set the text content of an existing text node

Styling

  • set_fill_color - Set the fill color of a node (RGBA)
  • set_stroke_color - Set the stroke color and weight of a node
  • set_corner_radius - Set the corner radius of a node with optional per-corner control

Layout & Organization

  • move_node - Move a node to a new position
  • resize_node - Resize a node with new dimensions
  • delete_node - Delete a node
  • clone_node - Create a copy of an existing node with optional position offset

Components & Styles

  • get_styles - Get information about local styles
  • get_local_components - Get information about local components
  • get_team_components - Get information about team components
  • create_component_instance - Create an instance of a component

Export & Advanced

  • export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF)
  • execute_figma_code - Execute arbitrary JavaScript code in Figma (use with caution)

Connection Management

  • join_channel - Join a specific channel to communicate with Figma

Development

Building the Figma Plugin

  1. Navigate to the Figma plugin directory:
cd src/cursor_mcp_plugin
  1. Edit code.js and ui.html

Best Practices

When working with the Figma MCP:

  1. Always join a channel before sending commands
  2. Get document overview using get_document_info first
  3. Check current selection with get_selection before modifications
  4. Use appropriate creation tools based on needs:
  5. create_frame for containers
  6. create_rectangle for basic shapes
  7. create_text for text elements
  8. Verify changes using get_node_info
  9. Use component instances when possible for consistency
  10. Handle errors appropriately as all commands can throw exceptions

License

MIT

[
  {
    "description": "Get detailed information about the current Figma document",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {},
      "type": "object"
    },
    "name": "get_document_info"
  },
  {
    "description": "Get information about the current selection in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {},
      "type": "object"
    },
    "name": "get_selection"
  },
  {
    "description": "Get detailed information about a specific node in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "nodeId": {
          "description": "The ID of the node to get information about",
          "type": "string"
        }
      },
      "required": [
        "nodeId"
      ],
      "type": "object"
    },
    "name": "get_node_info"
  },
  {
    "description": "Create a new rectangle in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "height": {
          "description": "Height of the rectangle",
          "type": "number"
        },
        "name": {
          "description": "Optional name for the rectangle",
          "type": "string"
        },
        "parentId": {
          "description": "Optional parent node ID to append the rectangle to",
          "type": "string"
        },
        "width": {
          "description": "Width of the rectangle",
          "type": "number"
        },
        "x": {
          "description": "X position",
          "type": "number"
        },
        "y": {
          "description": "Y position",
          "type": "number"
        }
      },
      "required": [
        "x",
        "y",
        "width",
        "height"
      ],
      "type": "object"
    },
    "name": "create_rectangle"
  },
  {
    "description": "Create a new frame in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "fillColor": {
          "additionalProperties": false,
          "description": "Fill color in RGBA format",
          "properties": {
            "a": {
              "description": "Alpha component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "b": {
              "description": "Blue component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "g": {
              "description": "Green component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "r": {
              "description": "Red component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            }
          },
          "required": [
            "r",
            "g",
            "b"
          ],
          "type": "object"
        },
        "height": {
          "description": "Height of the frame",
          "type": "number"
        },
        "name": {
          "description": "Optional name for the frame",
          "type": "string"
        },
        "parentId": {
          "description": "Optional parent node ID to append the frame to",
          "type": "string"
        },
        "strokeColor": {
          "additionalProperties": false,
          "description": "Stroke color in RGBA format",
          "properties": {
            "a": {
              "description": "Alpha component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "b": {
              "description": "Blue component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "g": {
              "description": "Green component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "r": {
              "description": "Red component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            }
          },
          "required": [
            "r",
            "g",
            "b"
          ],
          "type": "object"
        },
        "strokeWeight": {
          "description": "Stroke weight",
          "exclusiveMinimum": 0,
          "type": "number"
        },
        "width": {
          "description": "Width of the frame",
          "type": "number"
        },
        "x": {
          "description": "X position",
          "type": "number"
        },
        "y": {
          "description": "Y position",
          "type": "number"
        }
      },
      "required": [
        "x",
        "y",
        "width",
        "height"
      ],
      "type": "object"
    },
    "name": "create_frame"
  },
  {
    "description": "Create a new text element in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "fontColor": {
          "additionalProperties": false,
          "description": "Font color in RGBA format",
          "properties": {
            "a": {
              "description": "Alpha component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "b": {
              "description": "Blue component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "g": {
              "description": "Green component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            },
            "r": {
              "description": "Red component (0-1)",
              "maximum": 1,
              "minimum": 0,
              "type": "number"
            }
          },
          "required": [
            "r",
            "g",
            "b"
          ],
          "type": "object"
        },
        "fontSize": {
          "description": "Font size (default: 14)",
          "type": "number"
        },
        "fontWeight": {
          "description": "Font weight (e.g., 400 for Regular, 700 for Bold)",
          "type": "number"
        },
        "name": {
          "description": "Optional name for the text node by default following text",
          "type": "string"
        },
        "parentId": {
          "description": "Optional parent node ID to append the text to",
          "type": "string"
        },
        "text": {
          "description": "Text content",
          "type": "string"
        },
        "x": {
          "description": "X position",
          "type": "number"
        },
        "y": {
          "description": "Y position",
          "type": "number"
        }
      },
      "required": [
        "x",
        "y",
        "text"
      ],
      "type": "object"
    },
    "name": "create_text"
  },
  {
    "description": "Set the fill color of a node in Figma can be TextNode or FrameNode",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "a": {
          "description": "Alpha component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "b": {
          "description": "Blue component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "g": {
          "description": "Green component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "nodeId": {
          "description": "The ID of the node to modify",
          "type": "string"
        },
        "r": {
          "description": "Red component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        }
      },
      "required": [
        "nodeId",
        "r",
        "g",
        "b"
      ],
      "type": "object"
    },
    "name": "set_fill_color"
  },
  {
    "description": "Set the stroke color of a node in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "a": {
          "description": "Alpha component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "b": {
          "description": "Blue component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "g": {
          "description": "Green component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "nodeId": {
          "description": "The ID of the node to modify",
          "type": "string"
        },
        "r": {
          "description": "Red component (0-1)",
          "maximum": 1,
          "minimum": 0,
          "type": "number"
        },
        "weight": {
          "description": "Stroke weight",
          "exclusiveMinimum": 0,
          "type": "number"
        }
      },
      "required": [
        "nodeId",
        "r",
        "g",
        "b"
      ],
      "type": "object"
    },
    "name": "set_stroke_color"
  },
  {
    "description": "Move a node to a new position in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "nodeId": {
          "description": "The ID of the node to move",
          "type": "string"
        },
        "x": {
          "description": "New X position",
          "type": "number"
        },
        "y": {
          "description": "New Y position",
          "type": "number"
        }
      },
      "required": [
        "nodeId",
        "x",
        "y"
      ],
      "type": "object"
    },
    "name": "move_node"
  },
  {
    "description": "Clone an existing node in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "nodeId": {
          "description": "The ID of the node to clone",
          "type": "string"
        },
        "x": {
          "description": "New X position for the clone",
          "type": "number"
        },
        "y": {
          "description": "New Y position for the clone",
          "type": "number"
        }
      },
      "required": [
        "nodeId"
      ],
      "type": "object"
    },
    "name": "clone_node"
  },
  {
    "description": "Resize a node in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "height": {
          "description": "New height",
          "exclusiveMinimum": 0,
          "type": "number"
        },
        "nodeId": {
          "description": "The ID of the node to resize",
          "type": "string"
        },
        "width": {
          "description": "New width",
          "exclusiveMinimum": 0,
          "type": "number"
        }
      },
      "required": [
        "nodeId",
        "width",
        "height"
      ],
      "type": "object"
    },
    "name": "resize_node"
  },
  {
    "description": "Delete a node from Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "nodeId": {
          "description": "The ID of the node to delete",
          "type": "string"
        }
      },
      "required": [
        "nodeId"
      ],
      "type": "object"
    },
    "name": "delete_node"
  },
  {
    "description": "Get all styles from the current Figma document",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {},
      "type": "object"
    },
    "name": "get_styles"
  },
  {
    "description": "Get all local components from the Figma document",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {},
      "type": "object"
    },
    "name": "get_local_components"
  },
  {
    "description": "Create an instance of a component in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "componentKey": {
          "description": "Key of the component to instantiate",
          "type": "string"
        },
        "x": {
          "description": "X position",
          "type": "number"
        },
        "y": {
          "description": "Y position",
          "type": "number"
        }
      },
      "required": [
        "componentKey",
        "x",
        "y"
      ],
      "type": "object"
    },
    "name": "create_component_instance"
  },
  {
    "description": "Export a node as an image from Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "format": {
          "description": "Export format",
          "enum": [
            "PNG",
            "JPG",
            "SVG",
            "PDF"
          ],
          "type": "string"
        },
        "nodeId": {
          "description": "The ID of the node to export",
          "type": "string"
        },
        "scale": {
          "description": "Export scale",
          "exclusiveMinimum": 0,
          "type": "number"
        }
      },
      "required": [
        "nodeId"
      ],
      "type": "object"
    },
    "name": "export_node_as_image"
  },
  {
    "description": "Set the corner radius of a node in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "corners": {
          "description": "Optional array of 4 booleans to specify which corners to round [topLeft, topRight, bottomRight, bottomLeft]",
          "items": {
            "type": "boolean"
          },
          "maxItems": 4,
          "minItems": 4,
          "type": "array"
        },
        "nodeId": {
          "description": "The ID of the node to modify",
          "type": "string"
        },
        "radius": {
          "description": "Corner radius value",
          "minimum": 0,
          "type": "number"
        }
      },
      "required": [
        "nodeId",
        "radius"
      ],
      "type": "object"
    },
    "name": "set_corner_radius"
  },
  {
    "description": "Set the text content of an existing text node in Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "nodeId": {
          "description": "The ID of the text node to modify",
          "type": "string"
        },
        "text": {
          "description": "New text content",
          "type": "string"
        }
      },
      "required": [
        "nodeId",
        "text"
      ],
      "type": "object"
    },
    "name": "set_text_content"
  },
  {
    "description": "Join a specific channel to communicate with Figma",
    "inputSchema": {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "additionalProperties": false,
      "properties": {
        "channel": {
          "default": "",
          "description": "The name of the channel to join",
          "type": "string"
        }
      },
      "type": "object"
    },
    "name": "join_channel"
  }
]