Note: This project is a fork of sonnylazuardi/cursor-talk-to-figma-mcp with adjustments and optimizations specifically for Windows environments.

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.

• 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

1. Install Bun if you haven't already:

curl -fsSL https://bun.sh/install | bash

2. Run setup, this will also install MCP in your Cursor's active project

bun setup

3. Start the Websocket server

bun socket

4. MCP server

## 以下是几种不同的运行 MCP 服务器的方式
## 原始方式（可能在 Windows 上有问题）
## bunx cursor-talk-to-figma-mcp

## 通过源代码直接运行（开发时使用）
## bun run src/talk_to_figma_mcp/server.ts -- --port=3056

## 推荐方式：使用 node 运行构建后的文件（最稳定，尤其在 Windows 上）
node dist/server.js --port=3056

注意：在 Windows 系统上，我们建议使用 node dist/server.js --port=3056 来连接 MCP 服务器，这样可以避免路径和环境变量问题。同时需要修改 .cursor/mcp.json 配置文件，使用 node 而不是 bun/bunx。

5. Install Figma Plugin

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "node",
      "args": [
        "PATH_TO_YOUR_PROJECT/dist/server.js",
        "--port=3056"
      ]
    }
  }
}

Windows 用户注意：在 Windows 系统上，请确保使用完整的绝对路径并使用双反斜杠，例如：

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "node",
      "args": [
        "C:\\Users\\YourUsername\\path\\to\\project\\dist\\server.js",
        "--port=3056"
      ]
    }
  }
}

Start the WebSocket server:

bun socket

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

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

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

• 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

• 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

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

• 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

• 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

• 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_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)

• join_channel - Join a specific channel to communicate with Figma

1. Navigate to the Figma plugin directory:

   cd src/cursor_mcp_plugin
   

2. Edit code.js and ui.html

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:
   • create_frame for containers
   • create_rectangle for basic shapes
   • create_text for text elements
5. Verify changes using get_node_info
6. Use component instances when possible for consistency
7. Handle errors appropriately as all commands can throw exceptions

MIT