🎥 完整實錄影片：YouTube 觀看（4 分鐘）
這篇在講什麼
我用一個 MCP plugin 叫 Claude Talk to Figma，讓 Claude 直接在我的 Figma 畫布上動手，幫我畫出兩張完整的系統圖：
- 點餐系統的業務流程圖（14 個節點，含決策分支與錯誤處理）
- 點餐系統的 API 循序圖（6 個 actor、28 則訊息、4 個階段）
成品長這樣（下面兩張都是 Claude 在我下了自然語言指令後，直接在 Figma 上畫出來的）：
為什麼需要這個
寫系統文件最煩的從來不是寫字，是畫圖。
- draw.io 對齊永遠差 2px、字體預設超醜、分享給同事還要轉格式
- Mermaid 文字語法寫完，顏色跟排版很難自訂，複雜的圖排起來一團亂
- Figma 手畫 版面最漂亮，但節點拉了半小時還沒畫完，需求就改了
Claude Talk to Figma 是什麼
一個開源 MCP plugin：github.com/arinspunk/claude-talk-to-figma-mcp
它做的事情是：
重點是免費 Figma 帳號就能用（不需要 Dev Mode 授權）。
從 0 開始的安裝步驟
前置需求
- Node.js
- Bun（
curl -fsSL https://bun.sh/install | bash） - Claude Code 或 Claude Desktop（我用 Claude Code）
- Figma 帳號（免費版即可）
三個指令跑起來
# 1. 選一個工作目錄
cd ~/your-workspace
# 2. 一行 clone + install + start（plugin README 提供的 all-in-one）
bunx claude-talk-to-figma-mcp@latest install
# 3. 之後每次只要啟動 WebSocket server
cd claude-talk-to-figma-mcp
bun socket
在 Figma 載入 plugin
Figma Desktop → Menu → Plugins → Development → Import plugin from manifest，選剛剛 clone 下來的 src/claude_mcp_plugin/manifest.json。
連線
sn5nbpl2）join_channel，成功之後就能下指令我實際下的指令
一句話：
「幫我畫一張點餐系統的業務流程圖，還有一張點餐系統 API 的循序圖」
接下來 Claude 自己規劃結構、算座標、並行建節點、加標籤、拉連線，中間沒有再問我任何問題。
踩到的三個坑
坑 1：Figma Design 檔不能用 connector
create_connector 這個工具只在 FigJam 文件可以用。一般 Figma Design 檔呼叫會直接報錯：
createConnector is not available. This command requires a FigJam document.解法： 用細長矩形（create_rectangle）當箭頭軸線、用三角形（create_polygon sides=3）當箭頭頭，手拼出箭頭。Claude 會自己換方案繼續畫，不用我提醒。
坑 2：形狀 fillColor 在 export 會變灰
畫完 export PNG 才發現一堆本來是彩色的方塊變成灰色。測試後發現：
create_text的fontColor正常create_rectangle的fillColor如果色彩飽和度高（例如藍 0.2/0.4/0.8、紅 0.86/0.34/0.34）常常掉色
fillColor，拿到 node id 後再用 set_fill_color 獨立設色。或者畫完立刻 export 抽查，發現失真再補設一次。
坑 3：不先算座標，會畫到後面崩潰
第一次我讓 Claude 邊畫邊想座標，畫到第 15 個節點就開始堆疊，對齊完全亂掉。
解法： 請 Claude 先「列一張座標表」，把所有節點的 x、y、width、height 算好再一次並行下指令。速度快一個數量級。
循序圖的 actor 間距我用這個公式：
gap = (W - 2*margin - n*A) / (n - 1)
actor_x[i] = margin + i * (A + gap)
actor_center_x[i] = actor_x[i] + A / 2W = Frame 寬、n = actor 數量、A = actor 方塊寬、margin = 邊距。這樣算出來的結果每個 actor 等距分布，訊息線從一個 center 畫到另一個 center 就對齊了。
三色法讓循序圖變易讀
循序圖如果所有訊息都一樣顏色，看起來就是一坨線。我用三色分類：
| 訊息類型 | 顏色 | RGB (0-1) |
|---|---|---|
| 同步請求（HTTP / SQL） | 藍 | 0.2, 0.4, 0.8 |
| 回應（Response / Return） | 綠 | 0.2, 0.55, 0.35 |
| 非同步推播（WebSocket） | 紫 | 0.55, 0.2, 0.7 |
時間成本拆解
這次實測 16 分鐘：
- 啟動 plugin / 加入 channel：1 分鐘
- 流程圖（Frame + 14 節點 + 文字 + 箭頭 + 圖例）：5 分鐘
- 循序圖（Frame + 6 Actors + 28 訊息 + Phase 標題 + 圖例）：6 分鐘
- export 抽查 + 發現填色失真：1 分鐘
- IG 10 張輪播生成：1 分鐘
- 部落格同步：1 分鐘
- 其他（規劃、溝通）：1 分鐘
心法總結
工程師最該學的不是畫圖技巧，是怎麼指揮 AI 幫你畫。
- 下指令前先想清楚結構（節點數、階段分類、顏色意義）
- 用一句話讓 AI 先列座標表，確認過再動手建節點
- 畫完立刻 export 抽查，發現失真馬上補色
- 複雜圖先拆 phase，同 phase 用同底色分區
你平常怎麼畫系統圖？
A. draw.io 拖拉派
B. Mermaid 純文字派
C. Figma 手工派
D. 我就是懶得畫派
留言告訴我，順便幫你推薦工具。
---
🎬 想看完整操作過程？點我看 YouTube 實錄
🔗 原始 plugin：arinspunk/claude-talk-to-figma-mcp