🎨Figma MCP 雙向編輯 [ TalkToFigma ]

用自然語言描述，AI 立即在 Figma 中創建設計 - 突破只讀限制的革命性工具

---

📋 目錄

1. 這個工具能做什麼？

2. 核心價值與效益

3. 快速開始

4. 完整安裝指南

5. 實際應用範例

6. 故障排除

7. 重要提醒

8. 延伸資源

---

這個工具能做什麼？

🎯 一句話總結

讓 Cursor AI 不只能讀取 Figma 設計，更能直接修改、創建和批量操作 Figma 元件。

✨ 核心突破

Cursor 官方的 Figma MCP（Model Context Protocol）整合只提供單向讀取，
這個開源工具突破限制，實現雙向編輯：

---

核心價值與效益

💎 這個工具為你帶來什麼

---

✅ 確認準備就緒

□ WebSocket 伺服器正在運行
□ Figma 外掛已連接並顯示 Channel ID
□ Cursor 已成功連接到 Figma
□ 測試創建藍色矩形成功

重要提醒

⚠️ 必須記住

---

📦 資料來源

本指南基於以下開源專案編寫：

---

快速開始

🎯 重點步驟概覽

安裝前準備（一次性設置）：
□ 已註冊 Figma 帳號
□ 已安裝 Node.js（v18+）
□ 已安裝 Bun（v1.0+）
□ 已安裝 Git
□ 已安裝 Cursor 編輯器

三步驟快速啟動（每次使用）：
1️⃣ 啟動 WebSocket 伺服器（bun socket）
2️⃣ 啟動 Figma 外掛並連接
3️⃣ 在 Cursor 中連接到指定 Channel

測試連接：
輸入："創建一個藍色矩形"
看到 Figma 出現矩形 → 成功！✨

⏱️ 時間預估

一次設置完成，每天使用只需不到 1 分鐘啟動！

---

完整安裝指南

🏗️ 技術架構原理

在開始安裝前，先理解整個系統如何運作：

使用者（你）
    ↓ 自然語言：「創建一個藍色按鈕」
Cursor AI
    ↓ 轉換為 MCP 指令
MCP 伺服器
    ↓ 透過 WebSocket 傳送
WebSocket 中繼伺服器（localhost:3055）
    ↓ 即時通訊
Figma Plugin
    ↓ 執行 Figma API
Figma 畫布
    ↓ 視覺化呈現
看到藍色按鈕出現 ✨

為什麼需要這樣的架構？

• Cursor 和 Figma 是兩個獨立應用，無法直接通訊

• WebSocket 伺服器在本地建立通訊橋樑

• Figma Plugin 在 Figma 內部執行操作

• MCP 協議確保 AI 能正確理解和調用工具

---

📦 階段一：檢查並安裝基礎環境

系統需求

✓ 快速驗證現有環境

打開終端（PowerShell 或命令提示字元），執行：

# 一次性檢查所有工具
node --version && npm --version && bun --version && git --version

成功示例輸出：

v20.19.0
10.8.2
1.3.1
git version 2.43.0

如果某個工具顯示錯誤，請安裝對應的工具。

📥 安裝缺失的工具

安裝 Node.js（如需要）

方法一：使用 nvm-windows（推薦）

# 1. 下載 nvm-windows
# 前往：https://github.com/coreybutler/nvm-windows/releases
# 下載 nvm-setup.exe 並安裝

# 2. 安裝 Node.js
nvm install 20.19.0
nvm use 20.19.0

# 3. 驗證
node --version

方法二：直接安裝

前往：https://nodejs.org/
下載 LTS 版本並安裝

安裝 Bun（如需要）

# 在 PowerShell（管理員模式）中執行
powershell -c "irm bun.sh/install.ps1|iex"

# 如果遇到執行策略錯誤
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

# ⚠️ 重要：安裝後必須重啟 Cursor 才能使用 bun

驗證安裝：

bun --version
# 應顯示：1.3.1 或更高

安裝 Git（如需要）

前往：https://git-scm.com/download/win
下載並安裝，使用預設選項即可

---

📁 階段二：克隆專案並安裝依賴

1. 選擇專案存放位置

⚠️ 重要：這個目錄會長期存在，不能刪除！

推薦位置：

# 選項 1：文件目錄
C:\Users\你的用戶名\Documents\Projects

# 選項 2：自定義開發目錄
D:\Projects
E:\個人項目\開發工具

2. 克隆專案

# 進入你選擇的目錄
cd D:\Projects

# 克隆專案
git clone https://github.com/grab/cursor-talk-to-figma-mcp.git

# 進入專案目錄
cd cursor-talk-to-figma-mcp

# 記錄完整路徑（重要！後續會用到）
pwd
# 範例輸出：D:\Projects\cursor-talk-to-figma-mcp

3. 安裝專案依賴

# 確保在專案目錄內
ls package.json
# 應該看到 package.json 檔案

# 安裝依賴
bun install

# 成功標誌：看到 "XX packages installed"

---

🚀 階段三：啟動 WebSocket 伺服器

# 確保在專案目錄內
cd D:\Projects\cursor-talk-to-figma-mcp

# 啟動伺服器
bun socket

成功輸出：

WebSocket server running on ws://localhost:3055
Waiting for connections...

⚠️ 重要提醒：

• 不要關閉這個終端視窗

• 伺服器會持續運行，這是正常的

• 使用期間必須保持開啟

• 要停止按 Ctrl + C

💡 技巧：使用 Windows Terminal 的分頁功能

啟動伺服器後，按 Ctrl + Shift + T 開啟新分頁
在新分頁執行其他命令
這樣就不需要開多個視窗！

---

🎨 階段四：設置 Figma 外掛

1. 導入外掛 Manifest

步驟：

1. 打開 Figma（桌面版或網頁版）

2. 導入外掛：

   • 點擊頂部選單 Plugins → Development → Import plugin from manifest...

   • 或按 Alt + / 輸入 "import plugin"

3. 選擇 manifest.json：

    導航到：D:\Projects\cursor-talk-to-figma-mcp\src\cursor_mcp_plugin\
    選擇：manifest.json
    點擊：Save 或 Open
   

4. 驗證導入成功：

   • 再次打開 Plugins → Development

   • 應該看到：✓ Cursor MCP Plugin

2. 啟動外掛並連接

啟動外掛：

方法 A：右鍵 → Plugins → Development → Cursor MCP Plugin
方法 B：Plugins 選單 → 搜尋 "mcp" → 選擇 Cursor MCP Plugin

外掛介面：

┌──────────────────────────────────────┐
│ WebSocket Server Port                │
│ ┌──────────┐                         │
│ │ 3055     │  [Connect] ← 點這裡      │
│ └──────────┘                         │
└──────────────────────────────────────┘

操作步驟：

1. 確認 Port 為 3055

2. 點擊 [Connect] 按鈕

3. 等待連接成功

連接成功標誌：

✅ Connected to server on port 3055 in channel:
   g0e3asb0  ← 這是你的 Channel ID

[Disconnect]

📝 記錄 Channel ID！

• 例如：g0e3asb0（每次不同）

• 複製到記事本暫存

• 下一步連接 Cursor 時需要

---

⚙️ 階段五：配置 Cursor MCP

🤔 兩種 Figma MCP 的區別

Cursor 支援兩種 Figma MCP 整合方式，它們功能不同，但可同時啟用：

（Cursor 官方） | URL 連接 | 只讀
讀取設計、生成程式碼 | ❌ 不需要 | 快速查看設計稿 | | TalkToFigma
（本指南重點） | npx 命令 | 雙向編輯
創建、修改、批量操作 | ✅ 需要 | 設計自動化 |

本文主要說明 TalkToFigma 的雙向編輯功能。

---

1. 打開 MCP 配置文件

方法一：透過 Cursor 設置

1. 在 Cursor 按 Ctrl + ,（或 Cmd + , on Mac）
2. 搜尋 "MCP" 或 "Model Context Protocol"
3. 點擊 "Edit Config" 或 "Open config file"

方法二：手動打開

Windows: C:\Users\你的用戶名\.cursor\mcp.json
Mac: ~/.cursor/mcp.json
Linux: ~/.cursor/mcp.json

📁 如果檔案不存在，請手動創建！

---

2. TalkToFigma 配置（本指南重點）

🎯 基本配置

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

📋 參數說明

✨ 功能範圍

• ✅ 創建 Figma 元件

• ✅ 修改現有設計

• ✅ 批量操作

• ✅ 雙向同步

• ✅ 文字替換

• ✅ 樣式更新

💡 重要說明

• npx 會自動下載並執行最新版本

• 無需手動安裝套件

• 每次啟動 Cursor 會檢查更新

• 必須搭配 WebSocket 伺服器使用

---

3. Cursor 官方 Figma MCP（選配）

如果你也想使用官方的只讀功能，可以同時配置：

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp",
      "headers": {}
    },
    "TalkToFigma": {
      "command": "npx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

官方 Figma MCP 用途：

• ✅ 查看 Figma 設計結構

• ✅ 讀取元件屬性

• ✅ 生成 React/CSS 程式碼

• ❌ 無法修改 Figma 內容

---

4. Windows 用戶特殊配置

如果 npx 無法正常運行，使用以下配置：

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "cmd",
      "args": ["/c", "npx", "cursor-talk-to-figma-mcp@latest"]
    }
  }
}

變更點：

• command 從 "npx" 改為 "cmd"

• args 添加 "/c" 前綴

• 這樣 Windows 會透過 cmd.exe 執行 npx

---

5. 保存並重啟 Cursor

• 按 Ctrl + S 保存

• 完全關閉 Cursor（重要！）

• 重新打開 Cursor

---

6. 驗證配置成功

在 Cursor Chat 視窗中：

輸入：@
應該看到：@TalkToFigma

如果看到 @TalkToFigma，表示配置成功！✅

---

🔗 階段六：連接並測試

前置條件檢查清單

在執行連接前，確認：

• [ ] ✅ WebSocket 伺服器正在運行（終端顯示 running on port 3055）

• [ ] ✅ Figma 外掛已啟動並顯示綠色 "Connected"

• [ ] ✅ 已複製 Channel ID（例如：g0e3asb0）

• [ ] ✅ Cursor 已重啟並載入 MCP 配置

連接到 Figma

在 Cursor Chat 中輸入：

Talk to Figma, channel g0e3asb0

⚠️ 記得替換為你實際的 Channel ID！

成功標誌：

✓ Successfully joined channel: g0e3asb0

測試基本功能

測試 1：創建矩形

創建一個寬 200px、高 100px 的藍色矩形，圓角 12px

測試 2：創建按鈕

創建一個按鈕，寬 160px，高 44px，綠色背景，白色文字寫「送出」

測試 3：批量創建

創建 5 個不同顏色的圓形，水平排列，間距 20px

如果 Figma 畫布上出現對應的元件 → 🎉 恭喜完成設置！

---

實際應用範例

🎨 基礎操作

使用描述性指令 ❌ 模糊：「創建一個按鈕」 ✅ 清晰：「創建寬 160px、高 44px 的藍色按鈕，白色文字『送出』，圓角 8px」

範例 1：創建設計元件

指令：

在 Figma 中創建一個主要按鈕元件：
- 寬 160px，高 44px
- 背景色 #10B981（綠色）
- 圓角 8px
- 白色文字「立即開始」，字體大小 16px，置中對齊

AI 會自動：

1. 創建 Frame 容器

2. 添加矩形背景

3. 設定顏色和圓角

4. 添加文字並置中

結果： 完整的按鈕元件，可直接轉為 Component

---

範例 2：創建複雜佈局

指令：

創建一個產品卡片元件：
1. 外框：寬 320px，高 400px，白色背景，圓角 16px
2. 頂部圖片區域：高 200px，灰色背景
3. 標題：「產品名稱」，字體 24px，粗體
4. 描述：「產品描述文字」，字體 14px，灰色
5. 價格：「$99」，字體 20px，綠色
6. 按鈕：「加入購物車」，藍色背景

結果： 完整的卡片元件，包含所有層級和樣式

---

範例 3：創建設計變體

情境： 需要製作深色模式版本

指令：

複製當前選中的 Frame，並將其轉換為深色模式：
- 背景從白色改成 #1F2937
- 文字從深色改成淺色
- 按鈕樣式相應調整

AI 會自動：

1. 複製整個 Frame

2. 遞迴處理所有子節點

3. 根據深色模式規則調整顏色

4. 保持佈局和間距

效益：

• 手動操作：15 分鐘

• AI 操作：1 分鐘

• 節省：93%

---

範例 4：響應式佈局生成

指令：

將當前的桌面版佈局（1440px）轉換為：
1. 平板版（768px）
2. 手機版（375px）
自動調整元件尺寸和間距

AI 會：

• 分析佈局比例關係

• 計算適合的縮放比例

• 創建新 Frame 並調整元件

---

範例 5：從描述生成完整頁面

指令：

創建一個登入頁面：
- 左側：品牌 Logo 和標語
- 右側：登入表單
  - 標題「歡迎回來」
  - Email 輸入框
  - 密碼輸入框
  - 「記住我」勾選框
  - 「登入」按鈕
  - 「忘記密碼？」連結
- 使用現代簡約風格，主要藍色 #3B82F6

結果： 完整的登入頁面，所有元件已對齊排版

---

故障排除

🔧 安裝問題

Q1: 執行 bun socket 顯示「找不到 bun」？

原因： PATH 環境變數未更新（最常見）

解決方案：

# 步驟 1：確認 Bun 是否安裝
C:\Users\你的用戶名\.bun\bin\bun.exe --version
# 如果顯示版本號，表示已安裝

# 步驟 2：完全重啟 Cursor（推薦）
1. 完全關閉 Cursor
2. 重新打開
3. 開啟新終端
4. 執行：bun --version

# 步驟 3：或手動刷新環境變數
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
bun --version

---

Q2: Figma 顯示 "Manifest error: editorType does not include 'dev'"

原因： manifest.json 配置缺少開發模式標記

解決方案：

// 打開：D:\Projects\cursor-talk-to-figma-mcp\src\cursor_mcp_plugin\manifest.json
// 確保包含：
"editorType": [
  "figma",
  "figjam",
  "dev"
],

修改後重新導入外掛。

---

---

Q4: Figma 外掛點擊 Connect 沒反應

檢查清單：

□ WebSocket 伺服器是否在運行？
  → 終端應顯示 "running on port 3055"

□ Port 號碼是否正確？
  → 必須是 3055

解決方法：
1. 確認伺服器運行
2. 重啟 Figma 外掛
3. 再次點擊 Connect

---

Q5: Cursor 顯示找不到 TalkToFigma 工具

原因： MCP 配置未正確載入

解決方案：

# 1. 檢查配置文件
notepad C:\Users\你的用戶名\.cursor\mcp.json

# 2. 確保包含 TalkToFigma 配置
# 3. 完全重啟 Cursor
# 4. 測試：在 Chat 輸入 @ 應看到 @TalkToFigma

---

Q6: 連接成功但 Figma 沒反應

檢查清單：

1. Figma 外掛是否保持 "Connected" 狀態？
2. 終端是否顯示訊息交換？
3. Channel ID 是否輸入正確？（區分大小寫）

解決方法：
1. 在 Figma 外掛點擊 Disconnect
2. 再次 Connect 獲取新 Channel ID
3. 在 Cursor 重新連接

---

延伸資源

📚 官方資源

---

最後更新： 2025-11-08
作者： 比利先生
授權： 基於 MIT License 的開源專案編寫
專案來源： https://github.com/grab/cursor-talk-to-figma-mcp