核對日：2026-10-27。 如果你係香港嘅設計師、freelance 或者小產品團隊，想知 Claude Code 或者 Cursor 可唔可以幫你做出「真實可用」嘅原型，再同 Figma 來回互動——答案係可以，而且官方已經有完整工作流。Figma 官方喺 2026 年 2 月介紹咗由 Claude Code 將瀏覽器入面嘅真實 UI（例如 localhost 環境）擷取成可編輯嘅 Figma frames，仲可以一次過擷多個畫面保留流程；而用 Figma MCP server，你又可以將 Figma 設計帶返入 coding 環境，做到 code↔canvas 雙向來回（Figma 官方 blog）。呢套嘢同幾年前嗰啲「Figma 免費版教學」完全唔同一個層次——以前教你畫 mockup，而家教你直接喺真實 code 底下做設計。
點解「code↔canvas」唔係取代設計師
Figma 官方嘅定位好清楚：code 擅長收斂——跑起一個真實狀態；canvas 擅長發散——並排比較、複製 frame、試唔同結構。目標係令兩邊流暢來回，而唔係取代設計師嘅判斷（官方說明）。
換句話講，AI 工具係幫你由「畫完等工程師還原」變成「設計完自己跑一次真實版本」。根據 Figma 2026 年嘅 AI report（數字屬 Figma 報告自述、非官方外部核實）：設計師參與開發由 21% 升至 41%，開發者做 design 工作由 44% 升至 60%，85% 受訪者話 AI 令佢哋更有效率，約 41% 嘅 product builders 話 AI 改變咗成個團隊合作方式，handoff 減少（Figma 資源頁）。
官方列出嘅四個實用場景
Figma 官方資源頁列咗設計師最常用嘅幾類任務：
- Design system sync：token／變數同 code 對齊，唔會出現「設計稿一個色、code 又另一個色」
- Frame 轉真實 prototype：用現有 component 起一個真係㩒得嘅版本
- 真實互動同 empty state：loading、空狀態、錯誤提示呢啲位直接喺真環境試
- 文件同 a11y audit：檢查可存取性同寫文件
對香港嘅 freelance 或者細團隊嚟講，design system sync 同 empty state 通常係最快見到回報嘅兩項——因為呢啲正正係 handoff 最易走樣嘅位。
點樣接 Figma MCP 去 Claude Code
官方步驟概述大致係咁（細節以官網當日為準）：
- 喺終端機行
claude plugin install figma@claude-plugins-official - 用
/plugin授權 Figma - 喺 Figma 複製目標 frame 嘅 link
- 將 link 連同一個具體 prompt 交俾 Claude Code，明確要求 reuse 現有 component 同 token
有一點要留意：部分組織可能會封鎖呢個 plugin，公司用戶最好先問吓管理員。另外官方 FAQ 講明，你唔需要識寫 code 先可以用到，佢亦唔會取代工程師，而且 Claude Code 喺本地 copy 工作，唔會直接改動線上環境（官方資源頁）。
Cursor 又係點玩？
如果你慣用 IDE 而唔係 terminal，Cursor 官方 Designers 頁都有完整路徑：設計師用 Cursor 做 functional prototype、小 UI fix、內部工具；有 integrated browser 可以即時睇效果；撳 Shift+Tab 入 Plan Mode 先計劃再動手；Figma plugin 可以參考 frame 同 token；亦可以用 .cursor/rules/design-system.mdc 將 design system 規則寫死，令 AI 唔會亂起 component。
官方建議嘅起步次序：
- 由 Cloud Agents 開始
- 做一個本來只會喺 Figma mock 嘅 prototype
- 裝 Figma plugin
- 寫 design-system rules
- 先 ship 細改（spacing、copy），再交俾工程師 review
點樣起步唔會出事
官方明確建議由低風險任務開始：單一 component 嘅 padding、token 對齊、hover state、empty／error 嘅文字，呢啲即使 AI 出錯都易救。反而新架構、全 app 大改呢類，唔好一開波就交俾 AI。如果你想深入了解工具本身，可以參考我哋之前寫嘅 Claude Code 貼士、桌面版同 terminal 比較，同埋 AI coding 工具橫向比較。開工前最好都睇吓 AI coding 執行清單，確保流程有底線。
結論
呢套 Figma↔Claude Code／Cursor 嘅雙向工作流，對香港設計師嚟講係一條實際可行嘅路：唔使變工程師，都可以令設計喺真實 code 入面活起嚟。由細任務起步、用好 MCP 同 design system rules，再逐步擴大範圍。功能、步驟同 plugin 支援會隨時間變，使用前記得以 Figma 同 Cursor 官網當日為準。
更新於 2026-10-27（Asia/Hong_Kong）。
