Notes Cursor Talk To Figma MCP

Cursor Talk to Figma MCP - Complete Installation & Usage Guide

English Version

Quick Summary

This guide documents the complete process of installing and using the cursor-talk-to-figma-mcp package on Windows, enabling seamless communication between Cursor AI and Figma for design automation. We successfully set up the WebSocket server, connected the Figma plugin, and demonstrated the system by creating a comprehensive Pilates fitness app prototype.

What We Achieved Today

• ✅ Installed Bun package manager on Windows
• ✅ Set up the MCP server configuration in Cursor
• ✅ Configured and started the WebSocket server
• ✅ Connected the Figma plugin to the server
• ✅ Established bidirectional communication between Cursor and Figma
• ✅ Created a complete iOS app prototype using MCP tools
• ✅ Demonstrated channel-based communication system

Prerequisites

Before starting, ensure you have:

• Windows 10/11 operating system
• PowerShell access
• Figma account and Figma desktop app
• Cursor IDE installed

Step 1: Install Bun Package Manager

Windows Installation

The curl command from the original documentation is for Unix systems. For Windows, use PowerShell:

powershell -c "irm bun.sh/install.ps1|iex"

Verify Installation

bun --version

Expected output: 1.3.0 (or latest version)

Add to PATH (if needed)

If Bun is not recognized in new terminal sessions:

$env:PATH += ";C:\Users\[YourUsername]\.bun\bin"

For permanent PATH addition (run as Administrator):

[Environment]::SetEnvironmentVariable("PATH", $env:PATH + ";C:\Users\[YourUsername]\.bun\bin", [EnvironmentVariableTarget]::User)

Step 2: Clone and Setup the Project

Clone the Repository

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

Install Dependencies

cd src/talk_to_figma_mcp
bun install
cd ../..

Create MCP Configuration

Create .cursor/mcp.json in your project root:

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

Step 3: Configure WebSocket Server for Windows

Edit Socket Configuration

Open src/socket.ts and uncomment the hostname line for Windows WSL compatibility:

const server = Bun.serve({
  port: 3055,
  hostname: "0.0.0.0",  // Uncomment this line
  // ... rest of configuration
});

Start the WebSocket Server

bun src/socket.ts

Expected output:

WebSocket server running on port 3055
Server URL: ws://localhost:3055

Important: Keep this terminal window open - the server must stay running.

Step 4: Install Figma Plugin

Method 1: Local Development Plugin

1. Open Figma
2. Go to Plugins → Development → New Plugin
3. Choose "Link existing plugin"
4. Select: src/cursor_mcp_plugin/manifest.json
5. The plugin should appear in your development plugins

Method 2: Community Plugin (Alternative)

Install from Figma Community page if available.

Step 5: Connect Figma Plugin to Server

1. Open Figma and run the "Cursor MCP Plugin"
2. Set WebSocket Server Port to 3055
3. Click "Connect" - you should see "Connected to server on port 3055 in channel: [channel-name]"
4. Note the channel name (e.g., "kwfys6tl") - you'll need this for Cursor

Step 6: Connect Cursor to Figma

Join the Channel

In Cursor, ask the AI to join the same channel as the Figma plugin:

"Please join channel 'kwfys6tl'"

Or use the MCP tool directly:

join_channel

Verify Connection

Test the connection by asking Cursor to get Figma document info:

"Get the current Figma document information"

Step 7: Using MCP Tools

Available MCP Tools

The system provides comprehensive tools for Figma interaction:

Document & Selection

• get_document_info - Get current document information
• get_selection - Get current selection details
• read_my_design - Get detailed node information
• get_node_info - Get specific node details

Creating Elements

• create_rectangle - Create rectangles
• create_frame - Create frames with auto-layout
• create_text - Create text elements
• create_component_instance - Create component instances

Modifying Elements

• set_fill_color - Change fill colors
• set_stroke_color - Change stroke colors
• move_node - Move elements
• resize_node - Resize elements
• set_text_content - Update text content

Advanced Features

• scan_text_nodes - Scan for text elements
• set_multiple_text_contents - Batch text updates
• get_reactions - Get prototype reactions
• create_connections - Create connector lines
• export_node_as_image - Export elements

Example Usage

"Create a rectangle with green fill color"
"Move the selected element to position (100, 200)"
"Change all text content to 'Hello World'"
"Create a frame with auto-layout for the login screen"

Step 8: Channel Management

Understanding Channels

Channels are communication sessions between Cursor and Figma. Each channel is identified by a unique name.

Creating Custom Channels

Use descriptive channel names for different projects:

• project-alpha
• design-session-2024
• user-research
• pilates-app-design

Switching Channels

"Join channel 'new-project'"
"Switch to channel 'design-review'"

Best Practices

• Use descriptive names: pilates-app-v2 instead of test
• Include project context: client-project-alpha
• Use hyphens for spaces: user-flow-mapping
• Keep names memorable and consistent

Troubleshooting

Common Issues

Bun Not Recognized

# Add to PATH temporarily
$env:PATH += ";C:\Users\[YourUsername]\.bun\bin"

# Or restart terminal after installation

WebSocket Server Not Starting

# Check if port 3055 is in use
netstat -an | findstr :3055

# Kill existing processes
taskkill /F /IM bun.exe

# Restart server
bun src/socket.ts

Figma Plugin Connection Failed

1. Verify WebSocket server is running
2. Check port number (should be 3055)
3. Ensure hostname is set to "0.0.0.0" in socket.ts
4. Try refreshing the plugin

Cursor MCP Not Working

1. Verify .cursor/mcp.json exists and is properly formatted
2. Restart Cursor IDE
3. Check that the MCP server is configured correctly

Verification Commands

# Check Bun installation
bun --version

# Check server status
Test-NetConnection -ComputerName localhost -Port 3055

# Check running processes
tasklist | findstr bun.exe

Project Structure

cursor-talk-to-figma-mcp/
├── src/
│   ├── talk_to_figma_mcp/     # MCP server code
│   ├── cursor_mcp_plugin/     # Figma plugin
│   └── socket.ts              # WebSocket server
├── .cursor/
│   └── mcp.json              # MCP configuration
├── scripts/
│   └── setup.sh              # Setup script (Unix)
└── README.md                 # This file

Best Practices

Development Workflow

1. Start WebSocket server before opening Figma
2. Connect Figma plugin to the server
3. Join channel in Cursor using the same channel name
4. Test connection with simple commands
5. Keep server running throughout your session

Design Automation

1. Plan your design before starting automation
2. Use batch operations for efficiency
3. Test with simple elements before complex designs
4. Save your work regularly in Figma
5. Use descriptive channel names for organization

Error Handling

1. Check server status if commands fail
2. Verify channel connection before complex operations
3. Use simple test commands to verify functionality
4. Restart components if issues persist

Example Project: Pilates Fitness App

We successfully created a complete iOS app prototype including:

• Login/Registration screens
• Home dashboard with personalized content
• Training library with categorized exercises
• Progress tracking with charts and statistics
• Community features with social interaction
• Settings and profile management
• Complete design specifications

This demonstrates the full capabilities of the cursor-talk-to-figma-mcp system for rapid prototyping and design automation.

Conclusion

The cursor-talk-to-figma-mcp package provides a powerful bridge between Cursor AI and Figma, enabling automated design creation and modification. With proper setup and understanding of the channel system, you can create complex designs efficiently and iterate rapidly on your ideas.

The system is particularly valuable for:

• Rapid prototyping
• Design system creation
• Automated UI generation
• Design iteration and testing
• Collaborative design workflows

中文版本

快速總結

本指南詳細記錄了在Windows系統上安裝和使用cursor-talk-to-figma-mcp套件的完整過程，實現了Cursor AI與Figma之間的無縫通信，用於設計自動化。我們成功設置了WebSocket服務器，連接了Figma插件，並通過創建一個完整的普拉提健身應用原型來演示系統功能。

今日成就

• ✅ 在Windows上安裝了Bun包管理器
• ✅ 在Cursor中設置了MCP服務器配置
• ✅ 配置並啟動了WebSocket服務器
• ✅ 將Figma插件連接到服務器
• ✅ 建立了Cursor和Figma之間的雙向通信
• ✅ 使用MCP工具創建了完整的iOS應用原型
• ✅ 演示了基於頻道的通信系統

前置要求

開始之前，請確保您擁有：

• Windows 10/11操作系統
• PowerShell訪問權限
• Figma帳戶和Figma桌面應用
• 已安裝Cursor IDE

步驟1：安裝Bun包管理器

Windows安裝

原始文檔中的curl命令適用於Unix系統。對於Windows，請使用PowerShell：

powershell -c "irm bun.sh/install.ps1|iex"

驗證安裝

bun --version

預期輸出：1.3.0（或最新版本）

添加到PATH（如需要）

如果在新終端會話中無法識別Bun：

$env:PATH += ";C:\Users\[您的用戶名]\.bun\bin"

永久添加PATH（以管理員身份運行）：

[Environment]::SetEnvironmentVariable("PATH", $env:PATH + ";C:\Users\[您的用戶名]\.bun\bin", [EnvironmentVariableTarget]::User)

步驟2：克隆和設置項目

克隆存儲庫

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

安裝依賴項

cd src/talk_to_figma_mcp
bun install
cd ../..

創建MCP配置

在項目根目錄創建.cursor/mcp.json：

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

步驟3：為Windows配置WebSocket服務器

編輯Socket配置

打開src/socket.ts並取消註釋hostname行以支持Windows WSL：

const server = Bun.serve({
  port: 3055,
  hostname: "0.0.0.0",  // 取消註釋此行
  // ... 其餘配置
});

啟動WebSocket服務器

bun src/socket.ts

預期輸出：

WebSocket server running on port 3055
Server URL: ws://localhost:3055

重要：保持此終端窗口打開 - 服務器必須持續運行。

步驟4：安裝Figma插件

方法1：本地開發插件

1. 打開Figma
2. 轉到插件 → 開發 → 新插件
3. 選擇"鏈接現有插件"
4. 選擇：src/cursor_mcp_plugin/manifest.json
5. 插件應出現在您的開發插件中

方法2：社區插件（替代方案）

如果可用，從Figma社區頁面安裝。

步驟5：將Figma插件連接到服務器

1. 打開Figma並運行"Cursor MCP Plugin"
2. 設置WebSocket服務器端口為3055
3. 點擊"連接" - 您應該看到"Connected to server on port 3055 in channel: [頻道名稱]"
4. 記下頻道名稱（例如"kwfys6tl"）- 您需要此名稱用於Cursor

步驟6：將Cursor連接到Figma

加入頻道

在Cursor中，要求AI加入與Figma插件相同的頻道：

"請加入頻道'kwfys6tl'"

或直接使用MCP工具：

join_channel

驗證連接

通過要求Cursor獲取Figma文檔信息來測試連接：

"獲取當前Figma文檔信息"

步驟7：使用MCP工具

可用的MCP工具

系統提供全面的Figma交互工具：

文檔和選擇

• get_document_info - 獲取當前文檔信息
• get_selection - 獲取當前選擇詳情
• read_my_design - 獲取詳細節點信息
• get_node_info - 獲取特定節點詳情

創建元素

• create_rectangle - 創建矩形
• create_frame - 創建帶自動佈局的框架
• create_text - 創建文本元素
• create_component_instance - 創建組件實例

修改元素

• set_fill_color - 更改填充顏色
• set_stroke_color - 更改描邊顏色
• move_node - 移動元素
• resize_node - 調整元素大小
• set_text_content - 更新文本內容

高級功能

• scan_text_nodes - 掃描文本元素
• set_multiple_text_contents - 批量文本更新
• get_reactions - 獲取原型反應
• create_connections - 創建連接線
• export_node_as_image - 導出元素

使用示例

"創建一個綠色填充的矩形"
"將選中的元素移動到位置(100, 200)"
"將所有文本內容更改為'Hello World'"
"為登錄屏幕創建一個帶自動佈局的框架"

步驟8：頻道管理

理解頻道

頻道是Cursor和Figma之間的通信會話。每個頻道由唯一名稱標識。

創建自定義頻道

為不同項目使用描述性頻道名稱：

• project-alpha
• design-session-2024
• user-research
• pilates-app-design

切換頻道

"加入頻道'new-project'"
"切換到頻道'design-review'"

最佳實踐

• 使用描述性名稱：pilates-app-v2而不是test
• 包含項目上下文：client-project-alpha
• 使用連字符代替空格：user-flow-mapping
• 保持名稱易記且一致

故障排除

常見問題

Bun無法識別

# 臨時添加到PATH
$env:PATH += ";C:\Users\[您的用戶名]\.bun\bin"

# 或在安裝後重啟終端

WebSocket服務器無法啟動

# 檢查端口3055是否被使用
netstat -an | findstr :3055

# 終止現有進程
taskkill /F /IM bun.exe

# 重啟服務器
bun src/socket.ts

Figma插件連接失敗

1. 驗證WebSocket服務器正在運行
2. 檢查端口號（應為3055）
3. 確保socket.ts中hostname設置為"0.0.0.0"
4. 嘗試刷新插件

Cursor MCP不工作

1. 驗證.cursor/mcp.json存在且格式正確
2. 重啟Cursor IDE
3. 檢查MCP服務器配置是否正確

驗證命令

# 檢查Bun安裝
bun --version

# 檢查服務器狀態
Test-NetConnection -ComputerName localhost -Port 3055

# 檢查運行進程
tasklist | findstr bun.exe

項目結構

cursor-talk-to-figma-mcp/
├── src/
│   ├── talk_to_figma_mcp/     # MCP服務器代碼
│   ├── cursor_mcp_plugin/     # Figma插件
│   └── socket.ts              # WebSocket服務器
├── .cursor/
│   └── mcp.json              # MCP配置
├── scripts/
│   └── setup.sh              # 設置腳本（Unix）
└── README.md                 # 本文件

最佳實踐

開發工作流程

1. 啟動WebSocket服務器再打開Figma
2. 連接Figma插件到服務器
3. 在Cursor中加入頻道使用相同的頻道名稱
4. 測試連接使用簡單命令
5. 保持服務器運行整個會話期間

設計自動化

1. 規劃設計在開始自動化之前
2. 使用批量操作提高效率
3. 用簡單元素測試在複雜設計之前
4. 定期保存工作在Figma中
5. 使用描述性頻道名稱進行組織

錯誤處理

1. 檢查服務器狀態如果命令失敗
2. 驗證頻道連接在複雜操作之前
3. 使用簡單測試命令驗證功能
4. 重啟組件如果問題持續

示例項目：普拉提健身應用

我們成功創建了一個完整的iOS應用原型，包括：

• 登錄/註冊屏幕
• 帶個性化內容的主頁儀表板
• 按類別分類的訓練庫
• 帶圖表和統計的進度追蹤
• 帶社交互動的社區功能
• 設置和個人資料管理
• 完整的設計規範

這展示了cursor-talk-to-figma-mcp系統在快速原型製作和設計自動化方面的全部功能。

結論

cursor-talk-to-figma-mcp套件在Cursor AI和Figma之間提供了強大的橋樑，實現了自動化設計創建和修改。通過正確的設置和對頻道系統的理解，您可以高效地創建複雜的設計並快速迭代您的想法。

該系統特別適用於：

• 快速原型製作
• 設計系統創建
• 自動化UI生成
• 設計迭代和測試
• 協作設計工作流程

快速參考

常用命令

# 啟動服務器
bun src/socket.ts

# 檢查服務器狀態
Test-NetConnection -ComputerName localhost -Port 3055

# 加入頻道（在Cursor中）
"請加入頻道'您的頻道名稱'"

# 測試連接
"獲取當前Figma文檔信息"

重要文件

• src/socket.ts - WebSocket服務器配置
• .cursor/mcp.json - MCP服務器配置
• src/cursor_mcp_plugin/manifest.json - Figma插件配置

關鍵端口和設置

• WebSocket端口：3055
• 主機名：0.0.0.0（Windows）
• 頻道系統：用於組織通信會話

這個完整的指南將幫助您和未來的Cursor窗口理解如何使用cursor-talk-to-figma-mcp套件進行高效的設計自動化工作。