Figma 將 AI agent 放入畫布：設計同開發 workflow 會點變？

圖：TechCrunch．原文連結

Figma 今次加 AI assistant，表面係又一個設計工具 AI 功能，但真正值得留意嘅位，係佢唔係只放一個聊天框入工具列，而係將 AI agent 放入多人協作畫布。換句話講，設計師可以喺同一個 Figma Design file 入面，用自然語言叫 agent 改 layout、套用 design system、生成幾個方向，甚至同時開幾條 prompt 分工做。對已經用 Figma 做 UI、客戶批核同工程交接嘅香港團隊，呢件事影響嘅唔止係「畫稿快啲」，而係設計、產品同前端工程之間嘅責任邊界會再移動。

TechCrunch 報道指，Figma 呢個新 agent 會首先喺 Figma Design 推出，之後先再擴展到其他產品。Figma 官方 release notes 亦寫明，呢個 agent 由 2026 年 5 月 20 日開始逐步以 beta 形式推出，早期需要申請 waitlist，beta 期間唔消耗 AI credits，到正式推出時就會計入 credits。官方 Help Center 進一步補充，Full seat 用家可以喺 Professional、Organization 同 Enterprise plan 嘅 Figma Design file 入面使用；Dev seat 同 Collab seat 暫時只可以喺 drafts 試用；Starter、Education 同 Government plan 就未包括喺今次 beta 入面。

由生圖變成改工作流

最直接嘅改變係，Figma agent 將「AI 幫你出一張圖」推前一步，變成「AI 幫你改一個可編輯、可交接、可回復嘅設計檔」。官方列出嘅能力包括 0 到 1 產生新畫面、改 spacing 同 alignment、切換 component variants、套用 styles 同 variables、批量改文案或 placeholder 圖、整理 comments、做 accessibility feedback，甚至可以改 main components、styles 同 variables。呢啲唔係單純靚唔靚圖，而係直接觸及日常設計維護：改一批 button 狀態、將舊 layout 變成 auto layout、幫客戶簡報後一口氣消化 comments，全部都係以前最食時間但又唔太有創意嘅工序。

Figma 特別強調可以 同時跑多個 prompt：例如一個 agent 喺 dashboard frame 上試新 information hierarchy，另一個喺 settings page 改 mobile layout，設計師唔需要等第一個完成先開第二個。每個 running prompt 會喺 canvas 顯示進度，亦可以打開 chat window 睇 agent 做緊咩步驟。呢種「多條工作線並行」對細 team 有吸引力，但亦會放大 review 壓力：如果三個 agent 同時改同一套 components，最後邊個方向係產品決定、邊個只係草稿，就要靠清晰命名、分開 chat thread、duplicate 版本同人工審稿去維持秩序。

Figma 亦列明 agent 唔係萬能。Vector editing、icons、advanced visual effects、prototype interactions 暫時仍係 coming soon；animations、export assets、直接聯絡 support、建立 diagrams 同資料視覺化就標示為未支援或要用其他 Figma AI 功能處理。呢個限制好重要，因為它說明新 agent 更似一個懂得操作 Figma Design 嘅助理，而唔係一個可以完全代替 senior product designer 嘅黑盒。設計判斷、資料架構、互動狀態、可用性測試同品牌語氣，仍然要由人定方向。

MCP 令 Figma 走近 Codex 同 Claude Code

今次新聞嘅背景，係 Figma 過去一年一路將 design-to-code 同 code-to-design 拉埋。Figma MCP server 係中間件：它畀外部 AI coding agents 讀取 Figma context，例如 components、variables、layout data，再將 code 產生出嚟嘅 UI 帶返入 Figma canvas 成為 editable layers。官方 developer docs 話 MCP server 可以 write to canvas、由 selected frames 產生 code、抽取 design context、配合 Code Connect 重用真實 codebase components；MCP catalog 亦列出 Claude Code、Cursor、VS Code、GitHub Copilot CLI 同 Codex by OpenAI 等 client，其中 Codex 支援 Figma Design 同 FigJam、remote/local server、read/write access。

呢個方向同 Figma Design 入面新 agent 有分別：MCP 比較似畀外部 coding agent 寫入 Figma，Figma agent 則係直接喺設計檔內改稿、探索、批量處理同給 feedback。實際 workflow 可以係前端先用 Codex 或 Claude Code 起一個 running prototype，再透過 MCP 轉成 Figma frames；設計師喺 canvas 上改 hierarchy、tokens、components；之後再叫 coding agent 按照已整理嘅 Figma source of truth 更新 code。以前呢個循環好多時靠 screenshot、annotation 同口頭交代，容易失真；而家 Figma 想將畫布變成中間共同語言。

對香港 agency 同 startup，呢個循環最有用嘅位未必係「一鍵出 production code」，而係減少反覆溝通成本。細 team 常見情況係 designer、PM、frontend engineer 同客戶都睇同一份 Figma，但 code prototype、客戶批核版同實際 design system 可能慢慢 drift。MCP 加 Figma agent 嘅理想狀態，是將這些版本差距放回 canvas 上處理：工程師唔使只靠截圖估 spacing，設計師亦唔使逐個 state 手動重畫。問題係，呢個理想只會喺 design system 本身夠乾淨、component 命名清晰、tokens 有紀律時成立；雜亂 file 只會令 agent 放大雜亂。

點解 Figma 要咁急

Figma 不是喺真空入面推 agent。TechCrunch 提到，Figma 面對 Canva、Adobe、Flora、Krea、Dessn 等競爭，亦曾收購 node-based design tool Weavy，並加入更多 AI image editing 功能。另一方面，Figma 2026 年第一季財報顯示收入為 3.334 億美元，按年增長 46%；付費客戶約 69 萬；MCP weekly active users 喺 Figma Design 內按季增長 5 倍。呢啲數字反映一件事：AI 並未即時削弱 Figma，反而令 Figma 有機會將自己由「設計檔工具」升級成產品開發 workflow 嘅控制層。

行業趨勢亦好清楚：當 AI coding tools 令 prototype 同前端 UI 起得更快，真正稀缺嘅唔再只係打 code 時間，而係判斷應該做邊個方向、點樣符合品牌、點樣令 edge cases 唔崩、點樣令設計系統可長期維護。Figma 官方 blog 將呢件事講成 code 同 canvas 之間嘅 roundtrip；換成日常講法，就係 AI 可以令粗稿爆量，但團隊需要一個地方篩走 generic、重複、唔合品牌嘅 output。Figma 想話畀市場知：呢個地方應該仍然係 Figma。

收費、港區可用性同資料風險

收費同可用性要分清楚。Figma pricing page 目前以 USD 顯示價錢，Professional Full seat 月費 16 美元並包每月 3,000 AI credits；Organization Full seat 每月 55 美元、Enterprise Full seat 每月 90 美元，分別包 3,500 同 4,250 credits；Starter 就有每日 150、每月最多 500 credits。官方亦提醒 AI credits 用量會因任務複雜度、底層模型同 Figma 成本變化而調整。香港公司要留意，呢類 SaaS 無港行/水貨問題，重點係港區帳戶是否入到 beta、發票稅項同信用卡匯率；官方資料未列香港為獨立限制地區，但港區帳戶全面可用性仍屬 [待確認]。

資料私隱方面，Figma 官方寫明 Starter 同 Professional plan 嘅 content training 預設開啟，admin 可關閉；Organization 同 Enterprise plan 預設關閉。Figma 表示客戶內容用於 AI model training 係 optional，並稱第三方模型供應商不可用客戶上載或建立於 Figma 嘅資料訓練自己模型；同時亦會加密資料、限制權限、對用於訓練嘅內容做 de-identify 同敏感資料遮蔽。不過，香港公司唔應該將呢啲官方承諾當成等於已完成合規。私隱專員公署 2024 年發表 AI 個人資料保障框架，建議機構採購同使用 AI 系統時要做 governance、risk assessment、人手監督、資料安全同供應商溝通；客戶未公開產品、金融/醫療/教育資料、NDA 素材都唔應直接丟入 agent 測試。

香港團隊應該點試

如果本地 team 想試，第一步唔係開晒全公司權限，而係揀一個低風險 file 做 sandbox，最好用假資料、公開 UI pattern 或內部 demo。試用 checklist 可以好實際：先關注 content training setting；確認邊啲 seat 可用 agent、邊啲只可喺 drafts 用；用 duplicate file 測試 bulk edit；要求每個 prompt 都寫明目標、限制、指定 component library；完成後由 designer review visual hierarchy、accessibility、brand tone，再由 engineer 睇 code handoff 會唔會更清楚。若然 agent 只係產生一堆看似合理但唔合客戶場景嘅畫面，節省嘅時間會好快喺返工重做時輸返晒。

比較務實嘅判斷係：Figma agent 對成熟 design system 嘅團隊最有價值，對 file 管理鬆散、component library 未成形嘅團隊則未必即時有神效。AI 最擅長嘅係將既有規則高速套用、產生 variation、清理重複工序；如果公司本身無規則，agent 只會用一種好有信心嘅方式猜。香港中小企同 agency 可以將佢當成加速器，而唔係創意總監或前端 lead。真正值得投資嘅，可能係先整理 design tokens、component naming、client data policy 同 review 流程，然後先畀 agent 上場。Figma 今次嘅訊號好清楚：下一代設計工具唔只係畫得快，而係要懂得同 code、AI agents、設計系統一齊工作；但最後決定產品係咪可信、易用、有香港市場語境，仍然係人嘅責任。

參考來源

• TechCrunch — Figma adds an AI assistant to its collaborative canvas — original report
• Figma Release Notes：The Figma agent is here — 官方 release notes，確認 2026 年 5 月 20 日 beta、waitlist、credits、seat 同 plan 限制。
• Figma Help Center：Work with the AI agent in Figma Design — 官方功能文件，列明 agent 可做嘅工作、限制、同 Figma Make / MCP write to canvas 嘅分別。
• Figma Developer Docs：Figma MCP Server Introduction — 官方 MCP 技術文件，確認 write to canvas、design-to-code、抽取 design context 同 beta 收費方向。
• Figma MCP Catalog — 官方 MCP client 清單，確認 Claude Code、Cursor、VS Code、GitHub Copilot CLI、Codex 等支援情況。
• Figma Pricing / AI Credits — 官方價錢頁，核對 USD 定價、各 plan AI credits、MCP support 同 AI add-ons。
• Figma：Building Figma AI — 官方 AI 資料同私隱說明，確認 content training 預設、third-party model provider 同 admin 控制。
• 私隱專員公署：Artificial Intelligence: Model Personal Data Protection Framework — 香港官方 AI 私隱框架，用作分析本地公司使用 Figma AI agent 時嘅資料保障同合規風險。

本文根據原文及公開資料整理；資料有出入時，以原文及官方資料為準。