叫 Claude 接管 Figma 幫我畫系統流程圖

🎥 完整實錄影片：YouTube 觀看（4 分鐘）

這篇在講什麼

我用一個 MCP plugin 叫 Claude Talk to Figma，讓 Claude 直接在我的 Figma 畫布上動手，幫我畫出兩張完整的系統圖：

點餐系統的業務流程圖（14 個節點，含決策分支與錯誤處理）
點餐系統的 API 循序圖（6 個 actor、28 則訊息、4 個階段）

從啟動到兩張圖 + 10 張 IG 輪播 + 這篇部落格全部產出，實測 16 分鐘。

成品長這樣（下面兩張都是 Claude 在我下了自然語言指令後，直接在 Figma 上畫出來的）：

Figma 畫布全景：兩張系統圖並排，左側是流程圖、右側是循序圖，加上 Figma 左側圖層面板

點餐系統 API 循序圖：6 個 actor 垂直 lifeline，28 則訊息分為 Phase 1 至 Phase 4，含藍色請求、綠色回應、紫色 WebSocket 推播

為什麼需要這個

寫系統文件最煩的從來不是寫字，是畫圖。

draw.io 對齊永遠差 2px、字體預設超醜、分享給同事還要轉格式
Mermaid 文字語法寫完，顏色跟排版很難自訂，複雜的圖排起來一團亂
Figma 手畫 版面最漂亮，但節點拉了半小時還沒畫完，需求就改了

我要的是：講一句話，圖就好了。

Claude Talk to Figma 是什麼

一個開源 MCP plugin：github.com/arinspunk/claude-talk-to-figma-mcp

它做的事情是：

在本機跑一個 WebSocket server

在 Figma 裡開啟對應的 plugin，連上那個 server

在 Claude（Claude Code / Desktop / Cursor 都行）把 channel 名稱丟過去

之後你用自然語言，Claude 就透過 MCP 直接在 Figma 上建形狀、寫文字、設顏色

重點是免費 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。

連線

在 Figma 裡跑起來的 plugin 點 Connect，它會給你一個 channel 名稱（像 sn5nbpl2）

把 channel 貼給 Claude：「connect to figma, channel sn5nbpl2」

Claude 會呼叫 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 / 2

W = 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

搭配 Phase 區塊底色（淡米黃、淡橘、淡紅，每個 phase 不同色）——循序圖看起來就是一張能講故事的圖，不是一坨密集箭頭。

時間成本拆解

這次實測 16 分鐘：

啟動 plugin / 加入 channel：1 分鐘
流程圖（Frame + 14 節點 + 文字 + 箭頭 + 圖例）：5 分鐘
循序圖（Frame + 6 Actors + 28 訊息 + Phase 標題 + 圖例）：6 分鐘
export 抽查 + 發現填色失真：1 分鐘
IG 10 張輪播生成：1 分鐘
部落格同步：1 分鐘
其他（規劃、溝通）：1 分鐘

下次估類似工作：15-20 分鐘含全部衍生內容產出。如果節點數翻倍到 4 張圖，不是線性翻倍，估 30-35 分鐘（因為形狀填色問題要補時間）。

心法總結

工程師最該學的不是畫圖技巧，是怎麼指揮 AI 幫你畫。

下指令前先想清楚結構（節點數、階段分類、顏色意義）
用一句話讓 AI 先列座標表，確認過再動手建節點
畫完立刻 export 抽查，發現失真馬上補色
複雜圖先拆 phase，同 phase 用同底色分區

你平常怎麼畫系統圖？

A. draw.io 拖拉派
B. Mermaid 純文字派
C. Figma 手工派
D. 我就是懶得畫派

留言告訴我，順便幫你推薦工具。

---

🎬 想看完整操作過程？點我看 YouTube 實錄

🔗 原始 plugin：arinspunk/claude-talk-to-figma-mcp