MCP 服务器

Talk to Figma MCP

Enables AI agents to directly control Figma Desktop via MCP, supporting UI creation, editing, prototyping, and variable management with over 60 tools.

README

Talk to Figma MCP（KCTW Fork）

讓 AI Agent（Claude Code / Cursor）透過 MCP 協定直接操作 Figma Desktop，實現 AI 自主 UI 設計。

基於 grab/cursor-talk-to-figma-mcp v0.3.4 的私有 fork。

與 Upstream 的差異

新增工具

工具	功能	狀態
`set_reactions`	Prototype 互動（ON_CLICK 導航等）	✅
`create_component_from_node`	Frame 轉 Component	✅
`create_component_instance`	建立 Component Instance（含 componentId 支援）	✅
`create_variables`	建立 Variable Collection（COLOR/FLOAT/STRING/BOOLEAN，多模式）	✅
`rename_node`	節點重命名	✅
`bind_variable_to_fill`	綁定 Variable 到填色	✅
`bind_variable_to_stroke`	綁定 Variable 到邊框色	✅
`set_image_fill`	圖片填充（URL → image fill）	✅
`set_effects`	陰影/模糊特效	✅
`set_font`	字體選擇 + 大小	✅
`set_gradient_fill`	漸層填色	✅
`create_page` / `switch_page` / `get_pages`	頁面管理	✅

多 Agent 支援

WebSocket Server 支援 Correlation ID 定向路由，多個 MCP Agent 可同時操作同一個 Figma 文件而不互相干擾。

每個連線分配 clientId
指令送出時記錄 messageId → sender
Plugin 回應時只路由給原始發送者（非廣播）
30 秒 timeout 自動清理過期 request
向後相容：無 id 的訊息仍廣播

連線簡化

免驗證模式：WebSocket 連線不需 ECDSA 簽名，立即放行（適合本地開發）
自動加入 Channel：MCP Server 用 MCP_CHANNEL 環境變數，Plugin 用 UI 輸入欄位
支援多專案同時使用（每個專案設不同 channel 名稱）

架構

Windows (Figma Desktop + Plugin)
      ↕ WebSocket (port 3055)
WSL2 / Linux (socket.ts)
      ↕ stdio
Claude Code (MCP Server → dist/server.js)

支援環境：

Windows + WSL2：Plugin 在 Windows Figma，Server 在 WSL2
本地開發：全部在同一台
遠端：透過 SSH Tunnel 或 Cloudflare Tunnel

安裝

前置需求

Bun（WebSocket Server）
Node.js 18+（MCP Server）
Figma Desktop App

1. Clone + Build

git clone https://github.com/kctw-dev/talk-to-figma-mcp.git
cd talk-to-figma-mcp
npm install
npm run build

2. 啟動 WebSocket Server

bun run src/socket.ts
# WebSocket server running on port 3055

3. 安裝 Figma Plugin

Windows + WSL2 環境：

# 從 WSL2 複製 Plugin 到 Windows
cp src/cursor_mcp_plugin/code.js /mnt/c/Users/<USERNAME>/figma-plugin/
cp src/cursor_mcp_plugin/manifest.json /mnt/c/Users/<USERNAME>/figma-plugin/
cp src/cursor_mcp_plugin/ui.html /mnt/c/Users/<USERNAME>/figma-plugin/

在 Figma Desktop：

Plugins → Development → Import plugin from manifest
選擇 C:\Users\<USERNAME>\figma-plugin\manifest.json
開啟 Plugin，Channel 欄填專案名稱，按 Connect

本地環境：

Figma Desktop → Plugins → Development → Import plugin from manifest
選擇 src/cursor_mcp_plugin/manifest.json

4. 註冊 MCP（Claude Code）

claude mcp add -e MCP_CHANNEL=my-project -- talk-to-figma-mcp node /path/to/talk-to-figma-mcp/dist/server.js

或在 .mcp.json：

{
  "mcpServers": {
    "talk-to-figma-mcp": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/talk-to-figma-mcp/dist/server.js"],
      "env": {
        "MCP_CHANNEL": "my-project"
      }
    }
  }
}

MCP 工具一覽（60+）

讀取

工具	說明
`get_document_info`	文件資訊
`get_selection` / `read_my_design`	目前選取
`get_node_info` / `get_nodes_info`	指定節點資訊
`get_local_components`	本地 Component 清單
`get_styles`	本地樣式
`get_reactions`	Prototype 互動
`get_annotations`	註解
`get_instance_overrides`	Component Override
`get_plugin_version`	Plugin 版本
`scan_nodes_by_types`	依類型掃描
`scan_text_nodes`	掃描文字節點

建立

工具	說明
`create_frame`	Frame（含 Auto Layout）
`create_rectangle`	矩形
`create_text`	文字
`create_component_from_node`	Frame 轉 Component
`create_component_instance`	Component Instance
`create_connections`	連接線
`create_variables`	Variable Collection

修改

工具	說明
`move_node`	移動
`resize_node`	縮放
`clone_node`	複製
`delete_node` / `delete_multiple_nodes`	刪除
`rename_node`	重命名
`set_fill_color`	填色
`set_stroke_color`	邊框色
`set_corner_radius`	圓角
`set_text_content` / `set_multiple_text_contents`	文字內容
`set_layout_mode`	Auto Layout 模式
`set_padding`	內距
`set_item_spacing`	間距
`set_axis_align`	軸對齊
`set_layout_sizing`	尺寸模式
`set_reactions`	Prototype 互動
`set_annotation` / `set_multiple_annotations`	註解
`set_instance_overrides`	Component Override
`set_default_connector`	預設連接線
`set_focus` / `set_selections`	聚焦/選取
`bind_variable_to_fill`	綁定 Variable 到填色
`bind_variable_to_stroke`	綁定 Variable 到邊框
`set_image_fill`	圖片填充（URL → image fill）
`set_effects`	陰影/模糊特效（DROP_SHADOW 等）
`set_font`	字體選擇 + 大小（fontFamily/fontStyle/fontSize）
`set_gradient_fill`	漸層填色（LINEAR/RADIAL/ANGULAR/DIAMOND）

頁面管理

工具	說明
`create_page`	新增頁面
`switch_page`	切換頁面（by ID 或 name）
`get_pages`	取得所有頁面清單

匯出

工具	說明
`export_node_as_image`	PNG/JPG/SVG/PDF

連線

工具	說明
`join_channel`	加入通訊頻道

已知限制

功能	狀態	說明
Pen tool	❌ 不支援	無法畫自定義形狀
Boolean 運算	❌ 不支援	無 Union/Subtract
Mask	❌ 不支援	無法建遮罩
Grid/Guide	❌ 不支援	無法設定網格線
匯入 SVG 檔案	❌ 不支援	無法直接匯入 SVG

開發

# WebSocket Server（開發模式）
bun run src/socket.ts

# MCP Server Build
npm run build        # 單次
npm run build:watch  # 監聽

# 測試
bun test src/socket.test.ts

修改 Plugin 後需重新複製到 Figma 讀取的路徑，然後在 Figma 重開 Plugin。