Figma 公布 AI 動畫同 code layers，設計交接想少一輪來回

Figma 今次想縮短嘅係交接距離

The Verge 喺 2026 年 6 月 24 日報道，Figma 喺 Config 2026 公布一批設計同 coding 新功能。最搶眼有三樣：code layers 可以喺 Figma Design 畫布入面直接處理 code；Motion 可以用 prompt 生成動畫、transition 同 3D transform，亦可以用 preset 或 timeline 手動調；Shaders 就用 WebGPU 做 dither、pixelate、blur 呢類以前 Figma 入面冇嘅視覺效果。再加上 Figma Weave 20 多個工具準備同主 Figma 整合，方向其實好明顯：Figma 想將設計、prototype、AI agent 同 code 放近啲。

圖片：Figma

重點係 code 入咗畫布

AI 動畫同 shader 好吸睛，但對產品隊最貼地嘅反而係 code layers。過去做 landing page、demo app、SaaS dashboard，通常係 designer 出靜態 frame 或 prototype，前端再照 spec 寫一次；改 hover、loading、transition 呢啲細位，來回幾輪好正常。如果 code layer 做得穩，呢啲來回有機會變成同一晚試幾個版本。對香港 agency、中小企、startup 產品隊嚟講，價值唔係少請一個前端，而係 pitch、client demo、內部拍板之前，可以快啲見到互動係咪真係啱用。

圖片：Figma

前端唔會就咁畀取代

呢度要清醒啲睇。AI 幫你生互動可以好快，但 code quality、accessibility、state、API error、security、SEO、performance，全部都要有人睇。Figma 喺 2026 年 5 月 28 日公布 Make 連 production codebase 嘅 beta，官方當時寫明只限 Mac Beta desktop app、要申請早期試用，改動會經 branch、local commits 同 PR 跑。呢個設計其實好合理：真正出街嘅 code 唔可以繞過 engineering review。Figma 今次推近 code，只係將討論提早到畫布入面，唔代表 frontend developer 變成橡皮圖章。

收費同可用性有幾個坑

Figma 官方現時文件顯示，Figma Design 入面嘅 AI 工具喺團隊共享檔案要 paid plan 同 Full seat；Figma Make 要完整使用亦係 paid Full seat，Dev、Collab、View 可以喺 drafts 試，但分享、發布同團隊協作有限制。AI credits 亦要計：Professional Full seat 每月 3,000 credits，Organization 3,500，Enterprise 4,250；Dev、Collab、View 每月 500，Starter 每日 150、每月最多 500。Weave 要分開睇，佢自己 pricing FAQ 寫明同主 Figma 係獨立產品，credits 唔互通，亦未接入主 Figma 產品。Figma 官方現時文件冇寫香港係例外，不過公司 admin 可以關 AI 功能，所以香港團隊唔好淨係問有冇 Figma account，要問自己個 seat 同 AI 設定。

對香港小隊有用嘅位

如果你係做產品、agency、startup，今次最可能幫到嘅係三件事：pitch 前快速做有互動嘅 prototype；設計師自己試 micro-interaction、3D transform、shader 效果；同埋前端收到嘅唔再淨係靜態 frame，而係有行為、有 code trace 嘅材料。收唔收到實際好處，就睇設計系統有冇整理好、repo 權限清唔清、PR review 夠唔夠快。如果本身 design tokens 亂、component 命名亂，AI 只會快啲放大問題。

下一步睇開放後有幾穩

短期睇，Figma 係想將 After Effects、Framer、Webflow、IDE 之間嗰啲細碎來回，盡量收返入自己平台；長遠就係想做設計同 code 共用嘅控制台。講真，呢條路好合理，因為 AI 生成 UI 已經唔稀奇，難嘅係改完可唔可以保住系統一致、可唔可以交俾工程落 PR、可唔可以計清 credits。用開 Figma 嘅團隊，接落嚟要留意兩樣：各項新功能嘅 plan 限制，同輸出質素有幾穩。

參考來源

• The Verge — Figma now has AI motion graphics and shader tools — original report
• Figma Newsroom — 官方產品背景同媒體圖來源
• Make your site interactive with code layers | Figma Blog — 官方解釋 code layers 點樣用喺 Figma Sites 同互動 prototype
• Figma Make FAQs | Figma Help Center — 確認 Full seat、drafts、分享同發布限制
• How AI credits work | Figma Help Center — 確認各 plan 同 seat 嘅 AI credits 月額
• Figma Make, now on your local code | Figma Blog — 補充 Figma 連 codebase、branch、PR 同 beta 狀態背景
• Figma Weave Pricing — 確認 Weave 同 Figma credits 分開、暫時未接入主 Figma 產品

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