/ 目錄 / 演練場 / cursor-talk-to-figma-mcp
← 全部伺服器 ↗ GitHub
● 社群 grab ⚡ 即開即用

cursor-talk-to-figma-mcp

作者 grab · grab/cursor-talk-to-figma-mcp

讓 Cursor 或 Claude 讀取並編輯你的 Figma 文件——批次重新命名圖層、注入文案、建立元件，全部透過對話完成。

一個 TypeScript MCP 伺服器搭配 Figma 外掛，透過 WebSocket 互相溝通。提供 40 多個工具，涵蓋選取、標註、文字、自動排版、樣式、元件與匯出。採讀取優先設計，讓你先探索後再以 Agent 速度批次編輯。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

cursor-talk-to-figma.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： cursor-talk-to-figma-mcp

如何透過單一提示更新 Figma 文件中的所有文字圖層

👤 執行文案審查或本地化的設計師與 PM ⏱ ~20 min intermediate

何時使用： 當你有一份規格需要重新命名 50 個字串，卻不想點擊 50 次時。

前置條件
  • 已安裝 Bun — curl -fsSL https://bun.sh/install | bash
  • Figma 桌面版已開啟且外掛已連結 — Plugins > Development > Link existing plugin > point to src/cursor_mcp_plugin/manifest.json
  • WebSocket 橋接器正在執行 — bun run start in the cloned repo
步驟
  1. 從外掛面板加入頻道
    加入 Figma 頻道 X7F2，並列出目前頁面上的所有文字節點。✓ 已複製
    → 節點 id 清單及目前的文字內容
  2. 對應舊文案與新文案
    這是一個 old_string,new_string 的 CSV。對於每個內容符合 old_string 的文字節點，使用 set_multiple_text_contents 替換成對應的 new_string。✓ 已複製
    → 已套用的更新數量，差異預覽
  3. 目視抽查
    將編輯最多的三個框架匯出為 PNG，供我審查。✓ 已複製
    → PNG URL / 檔案路徑

結果： 一份已完成文案審查的檔案，所有字串均已更新，並附有前後對比的匯出檔案作為佐證。

注意事項
  • 外掛在操作途中斷線 — set_multiple_text_contents 具有冪等性——使用相同的對應重新執行；已正確的節點會被跳過
  • 元件與實例中的文字混淆更新 — 先使用 get_instance_overrides 查看哪些實例覆寫了基礎文字
搭配使用： filesystem

如何一次性將 PRD 的標註套用至 Figma 規格

👤 將文件與模型配對的設計工程師 ⏱ ~25 min intermediate

何時使用： 當你的 PRD 中有「CTA 應顯示 X、加入 Y 工具提示文案」等內容，且想將這些轉為 Figma 標註時。

步驟
  1. 分享 PRD
    這是 PRD [貼上]。擷取所有 UI 標註需求。✓ 已複製
    → 結構化的 {node_hint, annotation_text} 清單
  2. 將提示對應至實際節點
    使用 get_selection 和 scan_nodes_by_types 將每個標註對應到目前頁面中的具體節點 id。✓ 已複製
    → 已配對的 node_id + 標註，待套用
  3. 套用標註
    使用 set_multiple_annotations 套用這些標註。✓ 已複製
    → 標註顯示於外掛的疊加層中

結果： 一份可自我說明的 Figma 檔案，工程師無需切換分頁即可閱讀。

注意事項
  • 當多個節點共用相同名稱時，Claude 可能對應到錯誤的節點 — 加入父框架名稱作為消歧提示
搭配使用： notion · github

如何以程式方式產生元件變體（深色模式、尺寸）

👤 設計系統團隊 ⏱ ~20 min advanced

何時使用： 當你需要將一個基礎按鈕複製成 12 個變體並調整填色/筆觸時。

步驟
  1. 複製基礎節點
    將 Button/Primary 框架複製 4 次，並以 16px 的間距水平排列。✓ 已複製
    → 文件中出現 4 個新節點
  2. 重新著色填色/筆觸
    對每個複製體，使用 set_fill_color 設定為 #3B82F6 的 500、600、700、800 色階。✓ 已複製
    → 可見的顏色漸進
  3. 轉換為變體
    將它們群組為名為「Button / Intensity」的元件集。✓ 已複製
    → 新的元件集出現在資產庫中

結果： 一組可立即使用的變體集，加入你的設計系統中。

注意事項
  • 顏色 token 與原始十六進位值不同 — 若你的系統使用變數，請在 set_fill_color 中使用變數 id 而非原始十六進位值

如何將所有已標記的框架匯出為 PNG 以供開發交接

👤 準備交接文件的設計工程師 ⏱ ~10 min beginner

何時使用： 在衝刺啟動會議或客戶審查前。

步驟
  1. 尋找有交接標籤的框架
    掃描目前頁面上名稱以「[HANDOFF]」開頭的 FRAME 類型節點。✓ 已複製
    → 目標框架清單
  2. 以 2 倍尺寸匯出
    將每個框架以 2x 尺寸匯出為 PNG，並儲存到 /handoff/2026-04/。✓ 已複製
    → 回傳的檔案路徑

結果： 一個附有時間戳記的交接資料夾，可直接放入 Notion 或 Linear。

搭配使用： filesystem · notion

組合

與其他 MCP 搭配，撬動十倍槓桿

cursor-talk-to-figma + notion

將設計標註同步至 Notion 規格頁面供工程師參考

擷取目前 Figma 頁面上的所有標註，並以勾選清單形式鏡像到 Notion 文件「Checkout Spec v3」中。✓ 已複製
cursor-talk-to-figma + filesystem

將框架匯出至以日期版本命名的本地交接資料夾

將所有 [HANDOFF] 框架以 PNG 2x 格式匯出到 /design-handoff/2026-04/。✓ 已複製
cursor-talk-to-figma + github

將設計變更與程式碼 PR 參考連結

在 CTA 按鈕上新增一個標註，連結至前端倉庫的 PR #4421。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
get_document_info 在新檔案中確認方向 free
get_selection 對使用者剛點擊的內容進行操作 free
scan_text_nodes root_id?: str 在批次文案變更前使用 free
set_multiple_text_contents updates: {id, text}[] 批次文字替換 free
set_fill_color id: str, color: {r,g,b,a} 重新設定節點樣式 free
set_layout_mode id, mode: 'HORIZONTAL'|'VERTICAL'|'NONE' 切換自動排版 free
create_component_instance component_key: str, parent_id: str, position?: {x,y} 將元件庫中的元件放置到畫布上 free
set_multiple_annotations annotations: {id, text}[] 批次規格標註 free
export_node_as_image id: str, format: 'PNG'|'SVG'|'JPG', scale?: number 交接、審查、行內預覽 free
join_channel channel: str 啟動外掛後的第一次呼叫 free

成本與限制

運行它的成本

API 配額
Figma 未公開發布外掛操作的速率限制；實際上限取決於 WebSocket 吞吐量
每次呼叫 Token 數
節點資訊：依子節點數量，約 100-1500 個 token
費用
免費（需要 Figma 帳號；免費方案即可使用）
提示
請務必將掃描範圍限定在特定的根節點 id；對大型檔案進行全頁掃描會導致上下文爆炸。

安全

權限、密鑰、影響範圍

最小權限： Figma plugin running in desktop/web app; no API token needed
憑證儲存： 無——外掛在 Figma 內部執行；MCP 透過本地 WebSocket 通訊
資料出站： Figma 文件節點從外掛流向你的本地 MCP，再流向你選擇的 LLM。敏感設計只有在呼叫 LLM 時才會離開你的機器。
切勿授予： Do not expose the WebSocket port beyond localhost

故障排查

常見錯誤與修復

Plugin cannot connect to WebSocket

確認 bun run start 正在執行，且外掛的頻道 id 與 Agent 加入的頻道相符。

驗證： bun --version && lsof -i :3055
set_multiple_text_contents only updates some nodes

鎖定圖層或元件內的節點會被跳過。請解鎖，或改為操作實例的覆寫值。

Figma plugin shows 'manifest not found'

透過「Plugins > Development > Link existing plugin」重新連結，選取 src/cursor_mcp_plugin/ 中的 manifest.json。

Exports return empty URLs

部分節點（遮罩群組、特定效果）無法在伺服器端渲染。請先合併（Flatten），或改為匯出成 SVG。

替代方案

cursor-talk-to-figma-mcp 對比其他方案

替代方案何時用它替代權衡
Official Figma Dev Mode MCP當你擁有 Figma 付費版 Dev Mode 座位且希望獲得官方支援時唯讀；不支援批次編輯
Framelink Figma MCP當你偏好唯讀的 REST API 伺服器時不支援修改，也不需要 WebSocket 外掛，但無法進行編輯

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills