Figma 想再拉近 design 同 code，今次重點係少啲交付空轉

Figma 今次想補邊個位

Figma 喺 Config 2026 一口氣講咗 code layers、Motion、Shaders、Figma Weave、agent skills 同 generative plugins。表面聽落好似又係一堆 AI 功能名，但今次有個好清楚嘅方向：Figma 今次唔只想做畫 UI 同交 spec 嘅工具，仲想畀產品團隊喺同一個 canvas 試功能、動效同 code 行為。TechCrunch 引述 Figma 產品主管 Yuhki Yamashita 嘅講法，code layers 喺呢個 canvas 入面唔係叫你寫乾淨 production code，重點係畀 designer、PM 同工程師快啲試方向，呢句其實講中咗重點。

圖片：Figma

code layers 唔係要取代工程師

TechCrunch 提到 code layers 可以 clone repo，同埋將 code flow 抽成可編輯嘅 design layers，方便團隊試唔同方向。至於用 agent 將 code 變成 canvas，再經 MCP 將改動送返 code，就屬於 Figma Design Agent、code-to-canvas 同 MCP 嗰條 workflow，唔係 code layers 單一功能。呢件事最啱用喺前期探索；designer 自己 ship app 呢種講法太飄。舉例講，一個 checkout flow、設定頁、AI onboarding flow，以前 designer 可能做靜態 frame，工程師用 Storybook 或 local branch 砌行為，PM 再喺兩邊對；而家可以先喺 canvas 攤開幾個方向，一齊睇狀態、copy、interaction 同設計系統有冇撞。

不過要講清楚，Figma 呢套唔等於 production source of truth。官方自己喺 MCP 文件都寫到 beta 級質素，output 要人手 review 同 cleanup，AI tools 亦會有錯。即係話，code layers 最實際嘅用法係縮短「諗法變成可睇可改嘅 prototype」嗰段時間，工程 review 仍然走唔甩。越大型嘅產品，越要管好 repo 權限、設計 token、component 命名同 branch 規矩；AI 生成多幾個版本，唔會自然少咗混亂。

圖片：Figma

Motion 同 Shaders 係少啲口頭交代

今次另一個值得睇係 Motion 同 Shaders。Figma 話 Motion 可以喺 Figma 入面做動畫、transition 同 3D transforms，可以用 AI prompt、preset，亦可以喺 timeline 手動調；Shaders 就用 WebGPU 做 dither、pixelate、blur 呢類以前 Figma 入面冇咁直接嘅效果。呢啲賣點如果淨係當畫面炫啲就睇細咗。產品團隊最怕係 designer 講「呢度滑順啲」、「呢個 loading 有少少彈性」，工程師聽完只能估。動效可以同設計系統、code-backed prototype 放喺同一個 file，handoff 起碼少啲靠口述。

但限制都好現實：瀏覽器 performance、accessibility、低階機、reduced motion、web app 實際 bundle size，全部都唔會因為 Figma 有 timeline 就自動解決。Motion 同 Shaders 最實際嘅用處，係 prototype 可以直接表達動效，唔使靠一堆文字註解估來估去；去到 production，工程師仍然要揀 library、測 FPS、處理 fallback。對 agency 或 in-house product team 嚟講，呢個已經夠有用，因為少一次誤會，就少一次返手改。

圖片：Figma

AI plugin 最有用係處理重複工序

Generative plugins 同 agent skills 可能冇 code layers 咁搶眼，但實際睇，呢邊可能更貼地。Figma 今次講到可以用 prompt 產生重用到嘅 plugin，例如 layout generator、vector path tracer，又可以畀 AI agent 接 Notion、Granola、Excel、GitHub 或 file 做 context。對一隊每星期都要整理研究筆記、批量改文案、做多語言 frame、檢查 design system 用錯位嘅 team，呢啲先係真慳時間。以前靠一堆半棄置 plugin 同人手 checklist，而家起碼有機會變成 team 自己可分享嘅工具。

同時，呢度亦係最容易出事嘅位。Figma Help 寫明 Design AI tools 用 paid plans，Full seat 先用到；MCP write-to-canvas 暫時 beta 免費，但官方話之後會按用量收費。即係如果你間公司係 Enterprise plan，又有 admin 關咗 AI，或者 repo、會議紀錄、客戶 Excel 唔可以隨便畀 AI 讀，呢堆新功能未必即開就用得上。特別係 agency 做客案，資料權限同合約條款要先講清楚。

Figma 想守住產品中樞

Figma 呢一年分幾條線推 design-to-code：Figma Make 做 prompt-to-code prototype，亦試緊連本機 codebase、開 branch 同 PR；MCP server 就畀 coding agent 讀寫 canvas；而家 Config 2026 再加 code layers、Motion、Shaders 同 Weave。Figma Weave 嗰邊，按 TechCrunch 報道，Figma 計劃今年遲啲畀用戶直接喺 Figma 產生 Weavy 多步 AI 製作流程，呢個方向同樣係將更多素材生成、動效同 VFX 工序拉入 Figma。對 Framer、Rive、Webflow、Builder.io 呢類工具，壓力位係好多團隊可能寧願先喺 Figma 解決八成，再睇使唔使出去專門工具。

如果你隊 team 已經用 Figma 做 source of truth，呢次更新值得叫 designer 同工程師一齊試；如果你而家仲係用 Figma 畫完圖、交低 spec、等工程師估動效，code layers 同 Motion 可能真係幫你少啲來回。不過要等官方講清楚新功能嘅 plan、地區同 beta 範圍，特別係 AI credit 同企業管理設定，先知實際推廣會有幾順。

參考來源

• TechCrunch — Figma adds code layers, support for animations, more AI features in new update — original report
• The Verge: Figma now has AI motion graphics and shader tools — 補充 Config 2026 公布清單，包括 code layers、Motion、Shaders、Weave、agent skills 同 generative plugins。
• Figma Blog: Make your site interactive with code layers — 官方 code layers 背景，確認 Figma Sites 入面 code layers 用 React、AI chat、code composer 加互動。
• Figma Blog: The Figma Design Agent is Here — 官方設計 agent 背景，確認 canvas agent、MCP、code-to-canvas 點樣連住。
• Figma Developer Docs: Write to canvas — 官方 developer docs，確認 write-to-canvas beta、Full seat 權限同現有限制。
• Figma Help: Use AI tools in Figma Design — 官方 Help，確認 Figma Design AI tools 係 paid plans、Full seat，同 agent limited beta。
• Figma Blog: Figma Make, now on your local code — 官方 blog，確認 Figma Make 連本機 codebase、PR/branch 係 limited beta，Mac Beta desktop 先有。
• Figma Blog: Introducing Figma Weave — 官方背景，確認 Figma 收購 Weavy，同 Figma Weave 會補 image、video、animation、motion design、VFX 能力。

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