Figma Motion 推出：UI 動態工作流程一大步

Figma 在 2026 年 6 月 24 號推出 Motion 的 open beta。簡單講就是 Figma 自己長出 timeline + keyframes，動態設計可以留在 Figma 裡完成，不用再開另一個軟體。

對動態設計師來說，這篇想做兩件事：把 Figma Motion 主要功能講清楚，然後從動態設計師的工作流視角，聊一下這代表什麼、不代表什麼。

Figma Motion 在做什麼

Timeline + Keyframes 內建

跟 After Effects 的邏輯接近。拖圖層調時間、scrub 預覽、position / scale / rotation / opacity 都能獨立 keyframe，auto-keyframe 也有。

對熟 AE 的人來說操作不會陌生。對 Figma 重度使用者來說，這是第一次在 Figma 裡做真正的動態（過去 Smart Animate 是 prototype 偽動畫，不能輸出、不能精細控制）。

Animated Component 跟 Motion Variable

這是這次更新對 Product Design 真正有意義的地方。

Animated Component 讓動態跟著 component 走。一個按鈕加進去的 hover 動畫，所有用到這顆按鈕的地方都會自動套用。改一處、全檔同步。

Motion Variable 讓 easing curve 變成 design token。跟 color variable、typography variable 同一層。可以切 mode（例如 light / dark 對應不同 easing），一鍵全檔 update。

過去做動態的工程師打開設計檔，看到的是靜態截圖，動態文件分散在另一份 Lottie JSON、另一份 spec doc、另一個影片。現在動態跟 component 綁在一起，等於 motion 更容易成為 design system 的標配。

Dev Mode Motion Tab

工程師打開 Dev Mode 直接拿到 CSS / JSON / React/motion.dev 程式碼，含 keyframe 數值跟 easing 曲線。MCP 接上的話，給 coding agent 直接讀。

對前端來說，這比 Lottie 還直接，因為輸出的是原生 web 動畫描述，不需要再透過播放器。

Figma Agent for Motion

文字描述要什麼動態，Agent 生 keyframe。它讀得到你的 component 跟 token，所以生出的動態會符合既有設計系統。

工作流對比：以前 vs 現在

這是這次更新最值得動態設計師關注的地方。

過去做一個 UI 動態交付，大概長這樣

  1. 設計師在 Illustrator / Sketch / Figma 裡畫向量稿

  2. 把向量匯出成 SVG，丟進 After Effects

  3. 在 AE 裡重新整理圖層、命名、收進 Pre-comp（因為向量過來常常結構亂掉、命名跟 design file 不一致）

  4. 做 keyframe 動態

  5. 用 Bodymovin 出 Lottie JSON

  6. 工程師接 Lottie player，套到產品裡

  7. 客戶要改一個顏色／時間／曲線，整個流程從頭跑一次

現在用 Figma Motion，大概長這樣

  1. 在 Figma 裡同一份檔，把已有的 component 加上 motion

  2. 工程師打開 Dev Mode 拿 code

中間步驟少掉的不只是時間，而是繁瑣的平台轉換步驟。

但 AE 還是動態設計師的主力

Figma Motion 的設計目標一直很清楚，就是 UI 動態。介面動畫、micro-interaction、component state transition、簡單 hero motion。

它沒有打算碰品牌動態、角色動畫、VFX 合成、精緻 motion graphics、長時間敘事動畫這些工作。AE 三十幾年累積的 effect、expression、第三方外掛生態、跟其他 Adobe 軟體的整合，目前還是很難取代。

對動態設計師的訊號：UI motion 這塊往 Figma 學會基本操作會是加分項，但真正吃表演的動態工作，AE 還是動態設計師的主力。