Figma 推出 Motion：動畫住進畫布，跟元件和變數共用同一個檔案

在 Figma 裡做動畫，過去是一件需要「離開 Figma」才能完成的事。你在畫布上把一個 banner、一張 illustration、一組互動狀態都排好了，接著為了讓它動起來，得另外開 After Effects、Rive、或某個瀏覽器外掛，把圖層重畫一遍、把參數調一遍，再把成果用影片或 Lottie 檔丟回團隊。動畫成了一個人的專長、一道交付關卡，也是最容易在開發階段走味的環節。

Config 2026 上，Figma 把這件事的位置整個搬了——Motion 變成畫布上的一個模式，跟 Design、Draw、Dev Mode 並排。你的動畫從此跟元件、變數、團隊住在同一個檔案裡。Config 這次發表的東西很多，code layers、3D transforms、shaders、generative plugins、Weave 工具都在同一場端出來，但對絕大多數設計師的每日工作來說，Motion 是改動最直接的一條，所以先單獨把它講透。

值得先說清楚的一點：這次的重點不在「Figma 終於能做動畫」這句話本身。Figma 早就能做簡單的 prototype 過場。真正變了的是動畫的「歸屬」——它從一個獨立的、要另開檔案的環節，變回設計檔案裡的一個原生圖層屬性。位置的改變，會連帶改變誰能做、什麼時候做、以及做完之後交付給開發時還剩下多少資訊。

動畫不再需要第二個檔案

把任一個 frame 切到 Motion 模式，時間軸會直接長在設計旁邊。你能拖曳圖層調時間、用 playhead 預覽任何一個瞬間，並各自為位置、縮放、旋轉、透明度打 keyframe。開啟 auto keyframing，playhead 在動的時候你做的每個改動都會被記錄下來。

對沒做過動畫的人，內建的 animation styles（fade、move、scale）是最快的入口——先套一個預設，再到畫布上慢慢修。多個 style 可以疊在時間軸上同時播放，也能拖成先後順序。Atlassian 的 Lead Motion Designer Maxwell Hathaway 給了一句很到位的話：「Atomic design 現在變成 atomic motion design，因為 keyframe 就在畫布上。」

更實際的協作改變是 time-based comments。團隊裡任何人都能指著動畫的某一個時間點留言，把動畫 review 從「你錄個影片給我看」變回畫布上的對話。對沒碰過動畫的設計師，還能直接請 Figma agent 給回饋——Atlassian 的 Davy Fung 說他在做 banner 時，會問 agent 哪裡 work、哪裡不 work。

把動畫養成一套系統

好的動態靠的是一組「定義一次、到處套用」的值。一堆各做各的 one-off 動畫堆在一起，頂多算特效，撐不成系統。問題是大多數團隊從來沒有一個地方能建這套系統，於是每個 sprint 都從頭刻一遍，最後上線的版本反映的是誰當時有空，跟當初的設計沒太大關係。

Motion 用兩個機制把這件事系統化。Animated components：元件是設計系統的最小單位，現在它也帶著動畫走——一旦你為某個元件做好動畫，它會像 fill 和 typography 一樣，跨所有畫面、所有協作者的檔案一起生效。Motion variables：你可以建一個 easing 變數、給它定義多個 mode，套用到所有動畫上；在 page 層級切換 mode，所有引用這個變數的動畫會一次更新。

開發拿到的，就是你設計的那一份

動畫在 production 很少跟設計長得一模一樣。那些花好幾小時調出來的 easing 和 timing，常在檔案與程式碼之間的翻譯中走味。Figma 在交付之前就把這道縫補起來：選任一個有動畫的 frame，就能直接從檔案匯出 MP4、GIF、SVG、WEBM，先拿去對齊。

要進開發時，切到 Dev Mode 打開 Motion 分頁——完整時間軸可見、可檢查，每個 timing、easing 曲線、keyframe 都讀得到，開發不用再自己猜。他們能直接從面板複製動畫的程式碼，格式有 CSS、JSON，或可直接用的 React 與 motion.dev。Motion 也吃 MCP，等於你的動畫決策能流進寫程式碼的工具裡。

agent、3D、shaders：Motion 不是孤島

動畫在技術上是有門檻的。對沒動畫經驗的人，Figma agent 帶你過基本功；對已經會的人，它接手重複勞動——調 easing、改 timing、加一個屬性，或整段打掉重想。你能同時跑好幾個 prompt，讓 agent 處理多個 frame，你維持在心流裡。

它也跟這次 Config 的其他發表咬在一起。3D transforms 讓你在 z 軸旋轉 frame、向量、文字，跟 motion 結合就能 prototype 過去 Figma 做不到的空間互動（目前 waitlist）。Shaders 則把可動畫的屬性範圍打開——以前 Figma 能動的屬性有限，現在凡是 shader 用 slider 或輸入框能控制的，都能在時間軸上 keyframe。

現在能用到什麼程度

Motion 已進入 open beta。Starter 用戶可以用，但匯出有限制；所有方案的 Full seat 用戶能用 motion primitives 與匯出；完整的設計系統整合與 Motion 版 Figma agent 則需要付費方案。3D transforms 目前要 waitlist。

別急著把每個按鈕都試一遍。真正值得花時間的，是想清楚一件事：你團隊的動態，到底有沒有一套「定義一次、到處套用」的系統？Motion 把建這套系統的地方給了你。剩下的，是你願不願意把動畫當成設計系統的一部分來經營。