--- title: "Figma Motion 怎麼用？核心能力、製作流程與把動效做好看的實戰原則" slug: figma-motion-how-to-use url: https://rar.design/posts/figma-motion-how-to-use published_at: 2026-07-07 author: "設計師 Riven" category: "AI 設計" tags: ["設計工具", "UI 設計", "動效設計", "Figma Motion", "figma"] access: public_access --- # Figma Motion 怎麼用？核心能力、製作流程與把動效做好看的實戰原則 > 從 Timeline、Keyframes 到四個實戰原則，設計師在原生 canvas 上把動效做對的完整上手指南 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-07-07 FIGMA · MOTION · 2026▲ Figma Motion 把動畫時間軸直接放進設計 canvas，設計、元件、變數與動效都在同一個檔案。QUICK ANSWERFigma Motion 是 Figma 在 Config 2026 推出的原生動效工具，把動畫時間軸直接放進設計檔，目前全方案開放 Beta。你可以用 Timeline 安排動畫先後、用 Keyframes 設定 position／scale／rotation／opacity、用 easing 控制速度感，做完直接在 Dev Mode 匯出 CSS、JSON 或 React。這篇不堆規格，而是帶你理解四個核心能力、四步製作流程，以及讓動效「做得好看」的實戰原則與新手練習。CHAPTER 01 · WHAT IS IT先搞懂：Figma Motion 是什麼過去要讓一張設計稿動起來，設計師得把檔案丟進另一個軟體，做完再想辦法對回來。Figma Motion 把這件事收回原本的畫布——它是繼 Design、Draw、Dev 之後，Figma canvas 上新增的一個模式。把任何一個 frame 切到 Motion，畫面下方就長出一條時間軸，而你的設計、元件、變數、留言，全部還留在同一個檔案裡。這是 Config 2026 一連串更新 裡，對日常工作流影響最直接的一個。如果你想看它跟 After Effects、Rive、Lottie 的完整功能與定價比較，我另外寫過一篇 Figma Motion 完整解析；這篇專心講一件事——怎麼用得好。▲ 切到 Motion 模式，時間軸就出現在畫面下方，動畫跟設計在同一張畫布上完成。（圖：Figma 官方）CHAPTER 02 · WHY IT MATTERS為什麼設計師該學這個動效常常被當成最後才補的特效——畫面先做完，動畫另外找人、另外開軟體，交付時丟一支錄屏影片，隔著螢幕喊「再快一點」。問題是，動效其實是介面在說話：它決定使用者怎麼讀懂層級、怎麼感覺一個互動有沒有被回應。這種等級的設計決策，不該被丟到流程最尾端。Figma Motion 真正改變的，不是多了一個做動畫的地方，而是動效在整個流程裡的位置。它從「最後補的特效」，變回「設計當下就一起決定的東西」。“當你在設計動效，你其實是在用「時間」做設計。理解它的機制，才能把移動變成意義。— Figma Motion 設計原則具體來說，把動效收回同一個檔案，替設計師換回四件事：01 · 少切工具不用為了做動畫，一直在設計檔和動畫軟體之間來回切換。02 · 更好協作設計師、PM、工程師在同一個檔案裡，更容易看懂動態邏輯。03 · 更快驗證微互動直接在畫布上預覽，提早發現手感不對的地方。04 · 更好交付動畫能直接輸出成 code 或影片，溝通不再靠一支錄屏。如果你是剛入門、還在建立基礎的人，可以先補一篇 認識 UI/UX 設計，再回來看動效會更有感覺。CHAPTER 03 · CORE ABILITIES四個核心能力，先懂這些就能開始Figma Motion 的功能不少，但你不需要一次學完。先把下面四個名詞弄懂，你就能開始把畫面動起來。▲ Timeline、Keyframes、Easing、Transform——動效的四個底層概念。Timeline：用時間軸安排先後與長度切到 Motion，畫面下方就是那條時間軸。拖曳圖層可以調整每個動作的開始與長度，拉動播放頭就能即時預覽任何一個瞬間。它還支援 time-based comment——任何人都能在動畫的某個時間點上留言，把整個團隊拉進動效的討論裡。Keyframes：設定起點、中間變化、終點關鍵影格是動畫的骨架。position、scale、rotation、opacity 四個屬性可以各自打 keyframe，互不干擾。你可以手動一格一格設，也可以打開 auto keyframe，讓 Figma 在你移動播放頭時自動記錄每一次改動——這對新手特別友善，你只要把東西擺到對的位置，keyframe 自己生出來。Easing：控制速度感，讓動作更自然同樣一段移動，等速跟先快後慢，體感天差地遠。Figma Motion 內建 fade、move、scale 等預設樣式讓你最快上手，也能用 bezier 曲線和 spring 細調每一段的加減速。更進階的做法，是把 easing 存成一個變數、定義多個模式——之後在頁面層級切換模式，所有引用它的動畫會一起更新，動效語言天生統一。Transform：位移、縮放、旋轉、透明度都能動動效的變化，本質上都是這幾種變形的組合。值得一提的是，因為 Motion 長在 Figma 的平台上，連 shader 材質 上任何能用滑桿控制的屬性，都能打 keyframe 做動態。3D transform（沿 z 軸旋轉）官方也已預告，目前開放候補。還有一件事讓它跟外掛型動畫工具不同：動畫可以做成元件屬性。你替一個元件做好動效，這段動畫會像 fill 和字體樣式一樣，跟著元件跑遍每一個畫面、每一位協作者的檔案。動效第一次真的能變成設計系統的一部分。CHAPTER 04 · GETTING STARTED一個好上手的製作流程概念懂了，接下來是順序。新手最常見的卡關，是打開時間軸不知道從哪一步開始。照這個順序做，會比較不容易亂掉。▲ 定義起終點 → 安排時間 → 調整過渡 → 反覆測試，一條清楚的動效製作路線。先想清楚元件要從哪裡來、到哪裡去——這是「定義起點與終點」；接著決定速度、停頓與節奏，也就是「安排時間」；再用 easing 讓過渡更自然；最後一步最容易被跳過，卻最重要：反覆測試，確認這個動效是真的在幫助理解，而不是只為了炫。同一段動畫，Figma Motion 給了三種難度的做法，可以照你當下的需求選：層級 01 · 最快套 preset：直接用 fade、move、scale 等預設樣式，可以疊著同時播、也可以拖成先後順序。層級 02 · 更精準開 auto keyframe：手動或自動記錄每一格，對每個屬性做細節控制。層級 03 · 最省力交給 Figma agent：用一句話描述你要的動態，它會直接在時間軸上生出 keyframe，而且會參考你的元件和變數。真的不知道從哪開始，就從一個按鈕的 Hover 開始。把最小的互動做順，再慢慢擴展到整個產品，是最實際的練習路徑。CHAPTER 05 · IN PRACTICE把動效做好看的實戰原則工具會用之後，真正拉開差距的是判斷。動效的重點從來不是更花，而是更清楚。下面四個原則，是把動效做得耐看的底線。▲ 有目的、有主次、要一致、別過頭——判斷一個動效好不好，先過這四關。有目的：每個動作都要幫助理解，用動態去提示、引導、回饋，而不是只為了讓畫面熱鬧。有主次：重要的先被看見，次要的再跟上，用時間差把層級做出來。要一致：同一套產品，時間與 easing 規則盡量統一，動畫語言不能每個畫面都不一樣。別過頭：微動效通常比大場面更耐看，幅度先小一點，往往比華麗更好。再補一個很實際的數字：多數微互動的時間，抓在 150～300ms 就很順。太短會像瞬移，太長會讓人等——這是很多新手第一個要校正的手感。至於要做在哪，最常見的四種應用可以照著練：按鈕回饋Hover、Press 讓操作更有反應。彈窗轉場Modal、Drawer 的開關更順。頁面切換讓流程的銜接更自然。狀態變化Loading、成功、錯誤更容易被讀懂。新手可以照這個難度爬：先做按鈕的 Hover／Press，再練卡片的展開／收合，最後挑戰 Modal 的開啟／關閉——把進場與退場的邏輯練熟，你就掌握了大半的介面動效。CHAPTER 06 · HANDOFF做好看只是一半，能交付才算完整動效最尷尬的環節，一直是交付。設計師錄了一支影片，工程師問你「所以 easing 的數值是多少」，你答不出來，因為它從來沒被當成一個能交付的參數。Figma Motion 把這一段補起來了。▲ 切到 Dev Mode，動畫的每個時間值、easing 曲線、keyframe 都能讀，直接複製成 CSS。（圖：Figma 官方）切到 Dev Mode 打開 Motion 分頁，整條時間軸變成唯讀但可檢視——每一個時間值、每一條 easing 曲線、每一個 keyframe 都攤在那裡，工程師不用猜。你可以直接複製成 CSS、JSON，或 React（motion.dev）。它也支援 MCP，把任何一個動畫 frame 的連結丟給 coding agent，動效的完整脈絡會一起帶過去，不會被重新詮釋。不出 code 也行——動畫可以直接匯出成 MP4、GIF、Animated SVG 或 WebM，官方也說之後會加更多格式（包含 Lottie）。想更完整地比較各工具在交付上的分工，可以看 Figma 與 Framer 怎麼選。官方的上手教學可以直接看這支：▲ Figma 官方：Get started with Figma Motion and 3D transform effects（Config 2026）。CHAPTER 07 · PLANS & LIMITS方案怎麼分、有哪些限制Figma Motion 目前是 open beta，功能還在更新，也可能遇到效能問題。開放程度依方案不同：STARTER免費方案能用 Motion，但匯出有限制。FULL SEAT所有方案的完整席次可用動效基本功能，並能匯出。PAID PLAN付費方案完整設計系統整合，加上 Figma agent 生動效。要注意的限制：3D transform 目前是候補（waitlist）尚未全面開放；Lottie 匯出官方說之後才會加；既然是 beta，正式專案上還是建議留一手驗證。想掌握 Config 2026 整批發布的上線時間表，可以看 Config 2026 重點懶人包。CHAPTER 08 · TAKEAWAYS重點整理先懂四個核心能力——Timeline 安排先後、Keyframes 設定變化、Easing 控制速度、Transform 決定變形；照四步流程走——定義起終點、安排時間、調整過渡、反覆測試；再守住四個原則——有目的、有主次、要一致、別過頭。工具給了三種難度的入口，從一個按鈕的 Hover 開始練，就是最好的起點。往回看，動效這件事被搬動了位置。它從流程最尾端那個「最後補的特效」，變成設計當下就一起決定的屬性，跟圓角、字級站在同一排。而設計師交付的東西也跟著變了——以前我們交出去的是畫面，現在交出去的，是畫面加上時間。手上拿著對的工具，這件事第一次不用等別人。RELATED READS · 延伸閱讀Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰想看功能全貌、三種做法，以及跟 After Effects、Rive、Lottie 的分工，看這篇。閱讀 →Figma Config 2026 發表了什麼？Code Layers、Motion 與六種材料上 canvas 全解析Motion 只是其中之一，看看這場發表把哪些材料一起搬上了畫布。閱讀 →Figma Config 2026 重點懶人包：六大發布、上線時間、設計師先學哪個？六大發布的上線時間表與學習優先順序，一頁看完。閱讀 →Figma Shaders 是什麼？一句話生成全息箔、噪點質感的 AI 材質完整教學shader 的每個屬性都能打 keyframe，搭配 Motion 就能做會動的材質。閱讀 →Figma 與 Framer 怎麼選？2026 設計師的工具分工完整解析動效、建站、交付，兩個工具各自負責哪一段，這篇說清楚。閱讀 →AI 會取代 UI/UX 設計師嗎？2026 想轉職的人，問題從來不在這當工具把門檻降低，設計師真正的價值在哪？換個角度想這件事。閱讀 →EXTRA · 官方資源＊ Figma Motion 官方頁面：figma.com/motion＊ 官方 playground 練習檔與說明中心：Figma Help Center 搜尋「Figma Motion」＊ Config 2026 發表回顧：Introducing Figma MotionCOURSE100 種 Figma 設計的方法把 Figma 從介面設計練到動效，一套課帶你把工具真正吃透。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：Figma Motion 要付費嗎？A：目前是 open beta。免費的 Starter 方案能用，但匯出有限制；所有方案的 Full seat 席次能用動效基本功能並匯出；完整的設計系統整合，以及用 Figma agent 生動效，則限付費方案。Q：Figma Motion 可以取代 After Effects 嗎？A：定位不同。微互動、UI 動效、元件動畫在 Figma 裡做最順，因為跟設計、變數、交付都在同一個檔案；複雜的影像合成、長篇敘事動畫，仍是 After Effects 的強項。完整分工可以看 Figma Motion 完整解析那篇。Q：Figma Motion 的動效可以匯出成 code 嗎？A：可以。切到 Dev Mode 的 Motion 分頁，能把動畫複製成 CSS、JSON 或 React（motion.dev），也支援 MCP 把動畫 frame 傳給 coding agent。此外也能匯出 MP4、GIF、Animated SVG、WebM。Q：完全不會做動畫，也能用 Figma Motion 嗎？A：可以。最快的做法是套 fade、move、scale 等 preset，或直接叫 Figma agent 用一句話描述你要的動態，它會生出 keyframe。建議從一個按鈕的 Hover 開始練。Q：微互動的動畫時間抓多久比較好？A：多數微互動 150～300ms 就很順。太短像瞬移、太長會讓人等。搭配「幅度先小、節奏一致」，通常比華麗的大動作更耐看。Q：Figma Motion 支援 Lottie 和 3D 嗎？A：Lottie 官方說之後會加入匯出格式；3D transform（沿 z 軸旋轉）目前開放候補（waitlist），可以做並匯出成 CSS。兩者都還在陸續展開中。