Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰
2026年6月25日 上午 3:51
UI/UX 設計FIGMA · MOTION · CONFIG 2026
QUICK ANSWER
Figma Motion 是 Figma 在 Config 2026 推出的原生動效功能，把時間軸、keyframe 與緩動曲線直接放進設計 canvas，不必再跳去 After Effects 或外掛。現為全方案開放 Beta，能用預設、手動 keyframe 或請 Figma agent 生成第一版，最後在 Dev Mode 直接輸出 CSS、JSON、React，或匯出 MP4、GIF、WebM、Animated SVG。
Config 2026 開幕那天，半個設計圈的 Threads 都在洗同一句話——FIGMA MOTION IS HERE，連發三次，像怕你沒看到。
做設計這些年，我看過太多「Figma 終於能動了」的標題。光是去年，Community 裡能在 Figma 裡拉 keyframe 時間軸的外掛就有一整排，LottieFiles、MotionKit、Aninix 各據一方。所以第一眼看到這次發表，我的反應其實很冷靜：時間軸誰沒有過。
真正讓我坐直起來的，是後面兩件事——動效這次是長在設計系統裡的，而且一切換到 Dev Mode，它就變成工程可以直接讀的程式碼。這兩件事，外掛做不到。
CHAPTER 01 · WHAT IS IT
Figma Motion 到底是什麼
講白話：Figma Design 多了一條時間軸。你選一個圖層，把工具列切到 Motion，下方就展開 keyframe 軌道，可以替位置、縮放、旋轉、透明度這些屬性打關鍵影格，再用緩動曲線（easing）和彈簧（spring）去捏動的手感。它要的權限很低，只要你對那個檔案有編輯權就能玩。
發布時間是 2026 年 6 月 24 日，採逐步開放，全方案都能用的開放 Beta——也就是免費帳號也摸得到。但有幾道門檻要收費：發布動效元件、用 agent 生成動效、高解析影片匯出這三項，要付費方案的 Full seat 才解鎖。政府方案（Figma for Government）目前不支援。
它跟 Config 2026 同場的 code layers、shader 效果是一整套思路——Figma 想把「程式碼、動態、材質」都收進同一塊畫布。code layers 的部分我另外寫過一篇，這裡先專心講動效（延伸閱讀：Figma Config 2026 生成式外掛與 canvas 新材質）。
CHAPTER 02 · WHY IT MATTERS
它砍掉的是一條十年沒人敢動的流水線
想像一個再日常不過的需求：產品 demo 裡，幾個畫面要淡入、一兩個 micro-interaction、結尾給工程一個 Lottie。標準東西。但過去要走完它，你得這樣排：
過去 VS 現在 · 動效交付流水線
過去
現在
這條流水線之所以存在，是因為過去沒得選。設計師畫圖、動效師接手、工程再翻一次，中間每一道交接都在掉細節。Figma 這次做的，就是把這整段拉回同一塊畫布——動效不再是一個獨立工種、一次性的 handoff，而是設計檔案本來就帶的一層。
CHAPTER 03 · HOW IT WORKS
三種做法，從套預設到讓 AI 起頭
Figma Motion 給了三條入口，難度由淺到深：
01
套預設
一鍵丟上現成動畫預設，最快有東西在動。
02
手動 keyframe
從零打關鍵影格，用 easing 曲線與 spring 捏手感。
03
agent 生成
用講的描述要的動態，讓 Figma agent 先給第一版再手修。
第三條最值得留意。對不熟動效的設計師來說，agent 不只是幫你打 keyframe，它還能在你做動畫時給回饋——你問它「這個 banner 哪裡怪」，它會告訴你哪段節奏卡卡的。Figma 自己的講法是，這讓更多人能快速看到東西怎麼動，而「看得到」正是養出動態品味最快的路。對我來說這句話比功能本身重要：AI 在這裡是把門檻降下來的那隻手，不是替你決定品味的那隻手。
做完之後，重點來了——切到 Dev Mode，整條時間軸變成唯讀但可檢視的狀態，每一個時間值、每一條緩動曲線、每一個 keyframe 工程都讀得到，不用再靠猜。你可以直接把動畫複製成 CSS、JSON 或可直接用的 React。它還支援 MCP，意思是你能把任何一個動畫影格丟給寫程式的 AI agent 去實作。要出影片也行：MP4、WebM、Animated SVG、GIF 都能匯出，官方說 Lottie 之後會補上。
想看它實際怎麼動，Figma 官方這支介紹影片把時間軸操作走了一遍：
CHAPTER 04 · THE REAL SHIFT
動效變成設計系統的一個原件
這才是我覺得這次真正重要的地方，也是外掛永遠補不上的那一塊。
因為動效是建在 Figma 平台上，它現在可以成為設計系統的基礎元素。你替一個元件做一次動效，這段動效就會跟著它跑遍每一個畫面、每一位協作者的檔案——就跟顏色填色、跟字體樣式一樣，是會傳播的。
動效從一個專人交接的工序，變成系統本身的能力。
Atlassian 的設計團隊在搶先試用後講了一句很到位的話，大意是：在 canvas 裡做動效，把會動的插畫「從一個專人 handoff 變成系統能力」。我把它翻得更白一點——以前一個 App 裡的微動畫要不要做、做不做得一致，取決於團隊裡那一兩個動效師有沒有空。現在它變成設計系統的一個變數，誰拉元件誰就帶著那段動。
這對 Figma 的版圖意義也不小。它這幾年的動作一路在抹平「設計」跟「工程」之間那條線，Figma Make 把畫面直接變成可編輯的程式碼是一步（我寫過：Figma Make 本地程式碼 Beta），Motion 把動態變成可檢視的程式碼又是一步。canvas 不再只是設計停下來的地方。
CHAPTER 05 · IN PRACTICE
設計師現在可以拿它做什麼
撇開噱頭，落到日常工作，我會這樣排優先順序。最直接的是 micro-interaction——按鈕的 hover、toggle 的切換、卡片的展開，這些 80% 的 UI 動態，現在不用離開檔案就做完。第二是原型動效，過去要靠串接畫面硬湊的轉場，現在能用真的時間軸做出來，提案時的說服力差很多。
第三是交付。動效做完直接在 Dev Mode 給工程讀 code，省掉「我重寫一遍你的動畫」這段最容易翻車的工。第四，如果你跟我一樣常要餵社群，直接匯出 GIF 或 MP4 當貼文素材，連錄螢幕都省了。
一個提醒：Beta 階段先別把它當生產線主力。拿你手上一個正在做的小元件試水溫，比一開始就賭一整個專案聰明得多。
CHAPTER 06 · LIMITS & COMPARED TO
它還不能取代誰
講優點容易上頭，所以這段我要說得保守。Figma Motion 現在是開放 Beta，幾個現實限制要記著：還沒有 Lottie 匯出（官方說在路上）、目前主打的是時間軸式的線性動畫，沒有 Rive 那種 state machine 互動邏輯，而且發布動效元件、agent 生成、高解析匯出都要付費 Full seat。
所以它不是 After Effects 殺手，也不是 Rive 殺手。它搶下的是中間那塊最大的肉——日常 UI 動態，而且這塊肉現在就放在你元件旁邊。各工具的分工，大概是這樣：
如果你好奇 Figma 把手伸這麼長之後，跟同樣野心很大的 Framer 怎麼比，可以接著看這篇：2026 年 Figma 對決 Framer。
CHAPTER 07 · TAKEAWAYS
所以這次到底改變了什麼
「Figma 能做動畫了」這句話，外掛兩年前就能讓你講。這次不一樣的地方，是動效第一次跟你的元件、變數、團隊住在同一個檔案裡——它變成設計系統會傳播的一層，也變成 Dev Mode 裡工程讀得懂的程式碼。前者解決的是一致性，後者解決的是交接。這兩件事，剛好就是動效這個工種十年來最會掉球的兩個環節。
Dylan Field 在 keynote 講，AI 把地板降低了，但天花板要靠創作者自己往上頂。Figma Motion 大概就是這句話的具體版本——它把「會動」這件事的入場門檻砍到很低，低到不會動效的設計師也能開始練眼睛、養品味。至於那條天花板，工具不會幫你頂，那一直都是設計師的事。
常見問題
Q：Figma Motion 免費帳號能用嗎？
A：能。它是全方案開放的 Beta，免費帳號只要對檔案有編輯權就能用時間軸與 keyframe。但「發布動效元件、用 agent 生成動效、高解析影片匯出」這三項要付費方案的 Full seat 才解鎖。
Q：它支援哪些匯出格式？
A：目前可匯出 MP4、WebM、Animated SVG、GIF；在 Dev Mode 還能複製成 CSS、JSON 或 React 程式碼。Lottie 官方表示之後會補上。
Q：Figma Motion 會取代 After Effects 嗎？
A：短期不會。After Effects 在 VFX、合成、廣播級動態圖像仍不可取代。Figma Motion 鎖定的是日常 UI 動態與原型動效這塊——量最大、但過去得繞最遠路的那塊。
Q：它跟 Rive、Lottie 的差別在哪？
A：Rive 強在 state machine 互動邏輯與高效能 runtime，Figma Motion 目前主打線性時間軸動畫，還沒有互動狀態機。Lottie 是跨平台的輕量動畫格式，採用最廣，Figma Motion 的 Lottie 匯出尚未上線。三者比較像分工而非互相取代。
Q：不會做動效的設計師也能上手嗎？
A：可以。除了現成預設，你能用文字描述想要的動態，讓 Figma agent 先生成第一版再手動微調；它也會針對你的動畫給回饋。對新手而言，這是降低門檻、快速養成動態品味的入口。
Q：動效能套用到設計系統嗎？
A：能，這是這次最關鍵的設計。你替一個元件做一次動效，這段動效會像顏色與字體樣式一樣，傳播到每一個畫面與每一位協作者的檔案，並能用 timing、easing 變數維持整套系統的一致性。