Figma 在 2026 年 9 月 30 日的 release notes 裡，把 Figma Motion 這條動畫產品線補上四個一次講得通的功能：可儲存、可發佈到程式庫的自訂動畫樣式（Animation styles）、能拖進時間軸的音訊、可逐字／逐詞／逐行動畫但事後仍可編輯的文字，以及 Lottie／dotLottie 匯出。Motion 本身是 2026 年 6 月 24 日由 Figma 官方部落格正式發表，目前仍掛在 open beta。今天只看一件事：這批功能怎麼用、解決哪個設計問題、以及它沒有替你解決的無障礙問題。財經面的消息一律略過，這裡只談介面與流程。
📖 學
先把 Motion 放回它要解決的設計問題
動效在設計團隊裡長期是「只有一個人會、規格靠口頭」的資產。設計稿本身（顏色、字級、間距）早就能用變數與樣式管理，但「這個彈窗進場要多快、用哪條曲線」通常是散在原型連線、影片檔、工程師 PR 留言裡的隱性知識。Figma 在發表文中的定位是「動效現在跟其他設計住在同一張畫布」，並且把動畫跟元件、變數放進同一個檔案（來源：Figma 官方部落格〈Introducing Figma Motion〉，發表日 2026-06-24）。換句話說，它要解的是「動效無法被命名、無法被版本控管、無法被程式庫散佈」這個 design system 的缺口，而不是「讓設計師多一個做動畫的玩具」。
官方部落格列出的能力包括：時間軸上獨立為位置、縮放、旋轉、不透明度打關鍵影格；預設動畫樣式（淡入、移動、縮放）可疊加或排序；動效變數（easing 變數可有多個 mode，切換 mode 會更新所有引用它的動畫）；動畫隨元件跨檔案流動；時間點留言；Dev Mode 能看到完整時間軸。匯出格式部落格列的是 MP4、GIF、SVG、WEBM，以及 CSS、JSON 與 React／motion.dev 程式碼。方案上，Starter 使用者匯出有限制，全席位使用者在各方案都能用基本動效與匯出，完整的設計系統整合與 AI agent 功能需要付費方案（同一篇部落格的說明；實際權限以你帳號的方案頁為準，我沒有登入驗證）。
9 月 30 日新增的四件事，逐一講到能操作
一，自訂動畫樣式。 release notes 的原文是「Save an animation style with custom easing, duration, and other variable-backed properties」，並且可以發佈到程式庫，讓每個檔案都從同一組樣式取用。要理解它的價值，要先看 Figma 說明中心已有的「預設動畫樣式」流程：選取圖層，點右側欄 Animations 區的加號，選一種動畫類型（位置、縮放、旋轉、尺寸、不透明度等），再用設定調整；套用後動畫會出現在時間軸、從目前播放頭的位置開始，可拖曳整段移動或拖把手調整長度；也能選「組合動畫樣式」一次套用多個預設動畫，之後再逐個微調。這些是官方說明中心〈Quickly add motion with preset animation styles〉的描述。自訂樣式就是把「你調好的那組」存起來，下一次不用再從零調。
二，Easing 與動效變數。 這是最值得先做的一步，因為它決定整個動效系統的「性格」。說明中心〈Adjust an animation’s easing〉列出兩大類：貝茲曲線有 Linear、Ease in、Ease out、Ease in and out、Ease in/out back（有蓄力或過衝）、Hold（直接跳到終點）；彈簧（Spring）有 Gentle、Quick、Bouncy、Slow 四個預設。自訂貝茲曲線由四個數值（兩個控制點在時間與進度軸上的座標）定義，彈簧可以調彈跳強度，而且「自訂曲線與彈簧都可以存成變數」。在 Figma 自己的〈Motion design fundamentals: Easing〉裡，選曲線的原則寫得很直白：物件進場用 ease-out（快速抵達、緩緩停穩），退場用 ease-in（先慢後快，給人時間意識到它要離開），畫面內移動用 ease-in-out，Linear 只留給需要固定節奏的地方，例如 spinner 與進度指示。
把這三條對成可以直接抄的設定表：
| 動作情境 | 建議曲線 | 對應 token 命名（舉例，非官方） |
|---|---|---|
| 彈窗／抽屜進場 | Ease out | motion.easing.enter |
| 彈窗／抽屜退場 | Ease in | motion.easing.exit |
| 元素在畫面內換位置 | Ease in and out | motion.easing.move |
| 載入 spinner、進度條 | Linear | motion.easing.linear |
| 需要個性的回饋（按鈕按下、成功） | Spring：Quick 或 Gentle | motion.spring.feedback |
表中的曲線選擇來自上述 Figma 文件；右欄的命名是我依 design token 慣例（原始→語意→元件）擬的示範，不是 Figma 規定。Figma 的說明文件沒有給出建議的毫秒數，我查到的 Easing 與預設動畫頁都只談曲線形狀、沒給時長，所以如果有人說「Figma 官方建議 200ms」，在我今天讀到的頁面裡找不到這句。時長要自己訂，前面六月的記錄提過的 100–400ms 甜蜜點可以當起點，但那是業界慣例，不是這批文件的結論。
三，動畫元件（Animated components）。 建立方式跟一般元件相同：切到 Design 模式、選取圖層、建立元件（Mac 的快捷鍵是 Option+Command+K，Windows 是 Ctrl+Alt+K），系統會把圖層包進特殊元件框，圖層面板以紫色元件圖示標示。實例在時間軸上顯示為紫色圖層軌，位置可以前後挪動，但時長與屬性只能回到主元件改。官方列出的限制有兩條：元件只能在 Design 模式建立，而且元件屬性不能在 Motion 模式內改，要切回 Design（來源：說明中心〈Create and use animated components〉）。這個限制在實務上很關鍵：它等於強制「動效的規則寫在主元件，實例只能決定何時播」，剛好是 design system 想要的治理方式。
四，音訊、文字動畫與 Lottie 匯出。 音訊可以拖到動畫片段上，在時間軸中裁切、分割、對齊關鍵影格，匯出 MP4 與 WebM 時會一起帶出；文字的字元、詞、行可以分別動畫，套用後文字仍可編輯；動畫可匯出 Lottie、dotLottie、MP4、WebM（以上四項皆來自 Figma release notes 2026-09-30 條目）。另外官方還寫了：動畫樣式可由 Figma agent 與程式碼 agent 透過 MCP 或 Skills 自動套用（Releasebot 對該條目的整理，我沒有在 Figma 原頁面逐字找到這句，標為二手來源）。程式面還有一個 Plugin API：figma.motion.figmaAnimationStyles() 會回傳目前文件可用的樣式陣列，每個物件有 name、styleId 與描述參數型別與預設值的 props，用 applyAnimationStyle 套到節點上（Figma 開發者文件）。對要寫外掛、做動效稽核的人，這是少數能「用程式讀出整個動效詞彙表」的入口。
動畫做得出來，不等於使用者承受得了
這批功能全部指向「更容易做出會動的東西」，所以無障礙的帳要同時算清楚。WCAG 2.2 有兩條直接相關。第一條是成功準則 2.2.2「暫停、停止、隱藏」（Level A）：只要動態內容自動開始、持續超過 5 秒、而且與其他內容並列呈現，就必須在 5 秒內自動停止，或提供使用者暫停／停止的控制；W3C 說明文件寫明選 5 秒是因為「長到足以吸引注意，又短到使用者還能等它結束」。例外是動畫對活動「必要」，像下載中的載入動畫。第二條是 2.3.3「互動觸發的動畫」（Level AAA）：由使用者互動觸發的動態，必須能被關閉，除非它對功能或資訊是必要的；成因是前庭障礙使用者看到視差、縮放會頭暈、噁心、頭痛，常見做法是尊重 prefers-reduced-motion 媒體查詢（來源：W3C Understanding 文件）。
這兩條與 Lottie 匯出碰在一起時有一個容易漏掉的洞。我查到的社群文章（DEV Community 上的〈Lottie Animations and Accessibility〉）主張，CSS 的 prefers-reduced-motion 管不到 Lottie 的 JavaScript 渲染迴圈，要在程式裡自己偵測並關掉自動播放與循環；它也給了 ARIA 建議：裝飾性動畫用 aria-hidden="true" 加 role="presentation"，有意義的用 role="img" 加 aria-label，狀態變化用 role="status" 加 aria-live="polite"。但這篇只講 lottie-web 與 lottie-react，沒有提到 dotlottie-web；我另一次搜尋的摘要宣稱兩者行為相同，我沒能在一手文件確認。所以今天可以確定的是：Figma 匯出 dotLottie 之後，要不要尊重使用者的減少動態偏好，是你接手那一端的工程責任，Figma 的 release notes 沒有寫匯出檔會自帶這個行為；至於 dotLottie 播放器本身有沒有內建，我查不到，要自己讀播放器文件或實測。
最後是推論，不是查到的事實：Figma 讓動效「像樣式一樣被命名、被散佈」，如果動效的 token 裡沒有同步放進「減少動態版本」（例如把位移換成淡入、把彈簧換成 Hold），那整個 design system 會很有效率地把不安全的動效複製到每個檔案。Easing 變數支援多個 mode 這件事（部落格原文：切換 mode 會更新所有引用它的動畫），理論上剛好能拿來做「標準 mode／減少動態 mode」兩套，但這是我對功能的一個用法推測，官方文件裡沒有把它當成建議流程寫出來，要實測你的元件在 mode 切換後輸出是否真的符合。
🧠 記
- Motion 的重點不是「Figma 能做動畫」，而是「動效能被命名並發佈到程式庫」。 查到的事實：自訂動畫樣式含 easing、duration、變數綁定屬性，可發佈到程式庫（release notes，2026-09-30）；動畫元件也能發佈（說明中心）。這把動效拉進 design system 的治理範圍。
- 選曲線先看「物件是進場、退場、還是換位置」。 Figma 官方 Easing 指南：進場 ease-out、退場 ease-in、畫面內移動 ease-in-out、Linear 只給 spinner 與進度條。官方文件沒給毫秒建議，查到的頁面確實缺這一項。
- 動畫元件的規則只能寫在主元件。 實例只能挪時間軸位置，時長與屬性要回主元件改；元件屬性不能在 Motion 模式改（說明中心原文）。這既是限制，也是強制一致性的機制。
- 無障礙要同步想兩個閾值：5 秒與使用者偏好。 2.2.2（Level A）管自動播放超過 5 秒的並列動態需可暫停；2.3.3（Level AAA）管互動觸發的動態要能被關閉。Lottie 播放端是否尊重
prefers-reduced-motion，今天只有lottie-web的二手說法（不會自動），dotlottie-web查不到一手結論。
✍️ 實踐
挑你手上任何一個有進場動畫的元件（彈窗、Toast、抽屜都可以），30 分鐘內做完這四步：
- 盤點。 在設計稿或前端程式裡把這個元件的進場、退場動效寫成一張表：觸發條件、屬性（位移／縮放／不透明度）、曲線、時長。對照上面的表，標出哪一個違反「進場 ease-out、退場 ease-in」。
- 建兩組 token。 在 Figma 變數（或你專案的 CSS 自訂屬性）建立
motion.easing.enter與motion.easing.exit兩個變數；如果你已在用 Figma Motion beta，就把調好的曲線存成 easing 變數，並嘗試加一個「減少動態」mode（位移換淡入、時長縮到最短）。 - 做 reduced-motion 實測。 在作業系統打開「減少動態」（macOS 在系統設定的輔助使用 → 顯示 → 減少動態），重新載入頁面，看你的元件有沒有把位移動畫停掉；若有用 Lottie，確認它是不是仍在自動循環。
- 記下結果。 如果有任何動態超過 5 秒、自動開始又與其他內容並列，給它加暫停按鈕，或改成播完一次就停。
🔗 延伸學習
- Introducing Figma Motion: Your canvas now has a timeline — 2026-06-24 官方發表文，列出時間軸、動畫樣式、動效變數、匯出格式與方案範圍。
- Adjust an animation’s easing（Figma 說明中心） — 貝茲曲線與彈簧預設、自訂曲線四個數值、存成變數的方法。
- Create and use animated components（Figma 說明中心） — 動畫元件的建立、時間軸紫色軌、發佈到程式庫與兩條限制。
- Understanding SC 2.2.2: Pause, Stop, Hide（W3C） — 5 秒規則與必要動態的例外，配 2.3.3 一起讀。
💬 問 AI
我在評估 Figma Motion（open beta）的「自訂動畫樣式」要不要拿來建團隊的動效 design system,同時要顧到無障礙。請嚴格分成三區回答:「文章說的」「你查證到的」「你的推論」,三區不能混。
文章說的(請當成待查證的主張):
1. Figma 在 2026-09-30 的 release notes 新增自訂動畫樣式(含 easing、duration、變數綁定屬性,可發佈到程式庫)、時間軸音訊、可逐字／詞／行動畫的文字、Lottie 與 dotLottie 匯出。
2. Easing 官方指南:進場 ease-out、退場 ease-in、畫面內移動 ease-in-out、Linear 給 spinner;官方頁面沒有給毫秒建議。
3. 動畫元件的時長與屬性只能在主元件修改,實例只能挪動時間軸位置。
4. WCAG 2.2.2 要求自動開始、超過 5 秒、並列呈現的動態可暫停;2.3.3(AAA)要求互動觸發的動態可關閉。
5. prefers-reduced-motion 不會自動讓 Lottie 停下來;但 dotlottie-web 是否相同,我沒查到一手資料。
請做:
A. 逐點用 Figma 說明中心、開發者文件、W3C 與 dotlottie-web 的官方文件去驗證第 1–5 點,每一點標示「查證成立／部分成立／查不到」,並附連結;查不到就直接寫查不到。
B. 專門查 dotlottie-web 的官方文件或原始碼:是否提供 reduced-motion 的內建行為?若沒有,給出最小可行的偵測與停播寫法,並說明哪些是你驗證過、哪些是推測。
C. 在「推論」區回答:easing 變數的多個 mode 能不能拿來做「標準／減少動態」兩套?如果能,Figma 的哪個機制保證匯出到 CSS 或 Lottie 時也帶出對應版本?如果沒有保證,工程端要補什麼檢查。
D. 最後給我一份 10 項以內的檢查表,讓我在套用自訂動畫樣式前,逐項確認是否符合無障礙要求。