/ 目錄 / 演練場 / claude-talk-to-figma-mcp
● 社群 arinspunk ⚡ 即開即用

claude-talk-to-figma-mcp

作者 arinspunk · arinspunk/claude-talk-to-figma-mcp

Claude 透過免費外掛程式讀取、分析並修改 Figma 設計——無需 Dev Mode,免費 Figma 帳號即可使用。

claude-talk-to-figma-mcp(arinspunk)將 MCP 伺服器與 Figma 外掛程式結合。兩者協同讓 Claude 能檢視文件結構、審查樣式、掃描元件,並建立/修改圖形、文字與框架。無需付費的 Dev Mode 授權,即可實現具設計感知的 AI 工作流程。

為什麼要用

核心特性

即時演示

實際使用效果

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

安裝

選擇你的客戶端

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用場景

實戰用法: claude-talk-to-figma-mcp

審查 Figma 檔案中偏離設計系統的顏色與樣式

👤 設計系統維護人員 ⏱ ~20 min intermediate

何時使用: 團隊的檔案已偏離設計 token,需要找出不符規範的地方。

前置條件
  • 透過 manifest 匯入 Figma 外掛程式 — Figma → Plugins → Development → Import from manifest
  • 執行 bun run socket — 在專案目錄下執行;開啟 WebSocket 連線
步驟
  1. 連線
    連線至 Figma,channel abc123(從外掛程式介面複製)。✓ 已複製
    → 已連線;顯示文件名稱
  2. 掃描偏離系統的填色
    掃描所有節點中不在我們 12 個品牌 token 內的填色。列出節點路徑。✓ 已複製
    → 列出所有偏離的項目
  3. 產生報告
    依最近的框架分組並整理摘要。為每個偏離的顏色建議應對應的 token。✓ 已複製
    → 可執行的清理清單

結果: 一份可交給設計師、附有具體修正建議的檔案。

注意事項
  • 重新啟動外掛程式後 Channel ID 會更新 — 每次都從外掛程式面板複製最新的 ID;過期的 ID 會靜默逾時

將文字規格轉換為粗略的 Figma 框架

👤 PM、非設計師 ⏱ ~15 min beginner

何時使用: 想快速建立線框稿,但不想自己開啟 Figma 操作。

步驟
  1. 描述版面配置
    在目前的檔案中建立一個 1440x900 的框架。加入頁首、三欄功能格狀區塊,以及頁尾。使用我們的品牌顏色。✓ 已複製
    → Figma 中出現帶有對應結構的框架
  2. 反覆調整
    讓功能卡片使用我們的「Card」元件。將頁首切換為「primary」變體。✓ 已複製
    → 框架即時更新

結果: 不用碰 Figma 介面,就能得到一份粗略的線框稿。

對 Figma 檔案執行無障礙色彩對比度檢查

👤 設計師、無障礙設計倡導者 ⏱ ~25 min intermediate

何時使用: 在交付前,想找出色彩對比度不合格的地方。

步驟
  1. 遍歷文字節點及其背景
    針對每個文字節點,計算與最近背景填色的 WCAG 對比度。標記內文低於 4.5:1、大字低於 3:1 的項目。✓ 已複製
    → 列出不合格的配對及其對比度數值
  2. 建議調整方案
    針對每個不合格的項目,建議最小幅度的 token 替換以通過標準。✓ 已複製
    → 修正建議

結果: 在 QA 發現問題之前,先產出一份無障礙設計報告。

組合

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

claude-talk-to-figma + meigen-ai-design

產生圖片後,以佔位符方式置入 Figma 框架

用 MeiGen 產生一張主視覺圖片,然後將其作為填色置入選取的 Figma 框架中。✓ 已複製
claude-talk-to-figma + unreal

Figma HUD 轉換為 Unreal UMG Widget 腳手架

匯出選取的 Figma HUD 框架結構,然後在 Unreal 中建立對應的 UMG Widget Blueprint。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
get_document_info 第一步;確認是正確的檔案 0
get_selection 對使用者選取的內容進行操作 0
scan_styles 偏離偵測 0
create_shape type, x, y, w, h, fill? 建立版面配置 0
create_text content, x, y, style? 新增標籤或標題 0
set_fill node_id, color 修正偏離的填色 0
set_auto_layout node_id, direction, padding, gap 轉換為響應式排版 0

成本與限制

運行它的成本

API 配額
無——所有操作均透過本地 WebSocket 進行
每次呼叫 Token 數
大型檔案的文件掃描可能消耗 5-30k tokens
費用
免費
提示
盡量使用 get_selection 針對選取範圍操作;全文件掃描會大量消耗 tokens

安全

權限、密鑰、影響範圍

憑證儲存: 無需 API 金鑰;外掛程式使用您目前的 Figma 工作階段
資料出站: 僅限本地 WebSocket;Figma 資料只有在您主動分享結果時才會外流

故障排查

常見錯誤與修復

Connection timeout / channel not found

Channel ID 會更新——請從外掛程式面板複製最新的 ID 並重新連線

Plugin missing from Figma menu

透過 Plugins → Development → Import from manifest 重新匯入;在某些環境下,開發用外掛程式重啟 Figma 後不會保留

Writes fail silently

Figma 對某些檔案類型(函式庫、社群複製檔案)限制外掛程式寫入權限。請確認是否有鎖定圖示

替代方案

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

替代方案何時用它替代權衡
Framelink / Figma-Context MCP想透過個人存取 token 使用 Figma API 進行唯讀操作不支援寫入;需要 API 存取權限
Figma Dev Mode MCP (official)您的組織已購買 Dev Mode需要付費授權席次

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

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