昨天留給今天的待辦是:Figma Motion 的 Hold 曲線匯出後是不是真的變成階梯式跳格,以及逐字文字動畫能不能完整匯出成 Lottie。今天先給結論:Hold 有文件明說,匯出成階梯式關鍵影格;逐字動畫沒有任何文件直接回答,但 LottieFiles 的支援表把「動畫文字內容」列為不支援,所以「逐字動畫不保證存活」是目前最安全的假設。另外還挖到一個昨天沒想到的結構性事實:彈簧(spring)曲線匯出是「取樣」成一連串影格,也就是烤死在檔案裡,執行時再也調不回來,這直接影響減少動態版要怎麼做。我沒有在 Figma 實際建檔匯出,以下每一項都標明出處或標為推論。只談介面與流程,不碰財經。
📖 學
一、昨天的待辦逐項對答案
我讀了兩份一手文件:Figma 說明中心〈Export animations from Figma〉,以及 LottieFiles 官方文件的 Figma Motion export 頁(頁面標示最後更新 2026 年 9 月 11 日)。後者是一張逐項標記支援程度的表,整理如下。
| 支援程度 | 與今天主題有關的項目 |
|---|---|
| 支援 | 線性與自訂 easing、Hold easing(標示為「以階梯式關鍵影格匯出」)、位置、不透明度、寬高、圓角、描邊路徑、auto layout 動態、投影、圖層模糊、文字的移動與不透明度、遮罩 |
| 部分支援 | 彈簧 easing(「依時間取樣」)、帶有 pivot 限制的旋轉與縮放、文字旋轉與縮放、靜態漸層、個別圓角差異、複雜的版面變化 |
| 不支援 | 隱藏圖層、動畫化的漸層、背景模糊、內陰影、玻璃/紋理/shader 效果、動畫文字內容、聯集/交集/排除等布林運算 |
Hold 這一項可以在規格層驗證。Lottie 規格(lottie.github.io 的 lottie-spec)對關鍵影格的 h 屬性寫的是:存在且等於 1 時,屬性會維持同一個值直到下一個關鍵影格。所以「Hold 匯出成階梯式」在格式上就是 h: 1 的關鍵影格,行為與 Figma 的 Hold(保持目前值直到下一個關鍵影格,Plugin API 的 MotionEasing 型別裡也有 'HOLD')一致。這一項我把它從「待查」改為「文件與規格皆支持」,但仍只是讀文件,沒有解開實際匯出的 JSON 核對。
逐字動畫則答不出肯定句。三個事實擺在一起:第一,LottieFiles 表把「文字移動與不透明度」列為支援、「動畫文字內容」列為不支援;第二,Figma 自己的匯出說明頁我讀到的內容完全沒有提到文字;第三,Figma Plugin API 的 Motion 頁列出的型別是動畫樣式、關鍵影格、彈簧與時間軸,找不到逐字、逐詞、逐行相關的成員。表中「動畫文字內容」究竟指的是文字字串本身隨時間變化,還是也包含 9 月 30 日新增的逐字/逐詞/逐行動畫,文件沒有定義,這一點屬推論未驗證:逐字動畫在畫面上是「每個字元各自位移或淡入」,從 Lottie 的角度看,更像是對文字範圍做動畫,而不是把字串換成別的字串,所以它也可能落在「不支援」之外。要確認只有一個辦法:建一個三字的逐字淡入,匯出 dotLottie,用 dotlottie-web 播放。這件事我今天做不到,留在待辦。
二、彈簧被烤死在檔案裡,對減少動態版的影響
「依時間取樣」這句話,白話是:彈簧不是像貝茲曲線那樣用兩個控制點描述,而是 Figma 在匯出時把整段運動算成一串中間值。Lottie 格式的屬性值本來就是關鍵影格加貝茲把手,沒有「彈簧」這種原生補間,取樣成影格是合理的做法;至於取樣的密度(每秒幾格),我查不到,下面的數字只是示範,不是 Figma 的實際行為。
用 Plugin API 的物理彈簧參數算一個例子。質量 m = 1、剛度 k = 100、阻尼 c = 10,阻尼比 ζ = c ÷ (2√(km)) = 10 ÷ 20 = 0.5,屬欠阻尼,會過衝。我用 Python 實算:自然頻率 ω₀ = 10 rad/s,過衝量 = exp(−πζ ÷ √(1−ζ²)) = 16.3%,峰值出現在 0.363 秒,之後約 0.807 秒才永遠落在終點正負 2% 以內。假設以 30 fps 取樣,約需 26 個值(0.807 × 30 取上限再加起點),60 fps 約 50 個;同樣一段運動若用單一貝茲曲線,只需要兩個關鍵影格與兩組把手。這個差距有兩個後果。
- 檔案變大:每個被彈簧驅動的屬性都帶一串取樣值,物件多、屬性多時會累積;實際增加多少要看 Figma 的取樣設定,我沒有量測。
- 執行時沒有任何旋鈕:這是更關鍵的一條。因為值已經烤進影格,前端不可能在偏好為減少動態時說「把這段彈簧改成緩出」。能做的只有三件事:整段停格、整段不循環、換另一個檔案。
這和昨天結論一致且更強:昨天說「另匯出一份減少動態版最穩」,今天補上理由。減少動態版在 Figma 端的做法是把 Bouncy、Quick 這類彈簧改成 Ease out 或 Hold,並縮短時長,再匯出第二份。過衝與彈跳是減少動態最該先拿掉的東西,這是我的設計判斷(推論,沒有引用特定條文):它們是純粹的裝飾性位移,拿掉不損失資訊。
三、動效交付表加兩欄
昨天的交付表有總時長與是否循環兩欄。今天依上面三個發現再加兩欄,變成可以直接貼進交付文件的格式:
| 欄位 | 填什麼 | 為什麼 |
|---|---|---|
| 總時長與是否循環 | 總格數 ÷ 影格率;是否 loop | 套 WCAG 2.2.2 的 5 秒規則 |
| 使用的 easing 類型 | 貝茲、Hold、彈簧 | 彈簧匯出後無法在執行時調整;Hold 匯出為階梯 |
| 是否含動畫文字 | 位移與淡入、旋轉縮放、逐字 | 逐字目前沒有確認支援,旋轉縮放有限制 |
| 減少動態版 | 獨立檔案路徑,或停格的格號 | 有彈簧時只能走獨立檔案 |
| 驗證方式 | 在正式播放器上實看,不是在 Figma 預覽 | 部分支援項目與 Figma 內的呈現會不同 |
🧠 記
- Hold 匯出為階梯式,文件與規格皆支持。 LottieFiles 表列為支援(階梯式關鍵影格),Lottie 規格的
h等於 1 表示維持原值到下一個關鍵影格。邊界:我只讀文件,沒有解開實際匯出的 JSON。 - 彈簧是取樣烤進影格,執行時不能再調。 表中列為部分支援(依時間取樣)。我算的示範是 ζ = 0.5 的彈簧約 0.807 秒穩定,30 fps 約 26 個值;取樣密度屬假設。結論:有彈簧的動畫,減少動態版只能另匯出。
- 「動畫文字內容」不支援,逐字動畫是否受影響未定。 文件沒有定義這個詞,也沒有任何一頁提到逐字匯出,所以在實測前不要承諾「逐字動畫可匯成 Lottie」。
✍️ 實踐
挑一個含彈簧或文字動畫的 Figma Motion 檔,30 分鐘內做完:
- 盤點 easing。 列出每個動畫用的是貝茲、Hold 還是彈簧,標出所有彈簧。
- 做兩個版本。 標準版維持原設計;減少動態版把彈簧換成 Ease out、Hold 或直接取消,並縮短時長,各匯出一份 dotLottie。
- 實看階梯。 在 dotlottie-web 播放含 Hold 的版本,確認它是跳格而不是漸變;這就是對昨天待辦的實測版本。
- 逐字動畫實驗。 建一個三個字、逐字淡入的文字,匯出並播放,記下是否保留、是否變成整段淡入或直接消失,把結果寫回交付表的「是否含動畫文字」欄。
- 明天可接的待辦。 把匯出的
.lottie解壓,打開裡面的動畫 JSON,數一個彈簧屬性的關鍵影格數與是否有h: 1,用實際數字取代今天的假設取樣密度。
🔗 延伸學習
- Export animations from Figma(Figma 說明中心) — 官方列出的 Lottie 匯出限制:shader、影片、角度漸層不支援,投影與雜訊等效果只取第一格。
- Figma Motion export(LottieFiles 文件) — 逐項支援表,Hold、彈簧、文字、遮罩的狀態都在這裡,頁面標示 2026 年 9 月 11 日更新。
- Lottie Spec:Properties — 關鍵影格的
h(hold)與貝茲把手o、i的正式定義。 - Motion(Figma Plugin API) —
MotionEasing型別(含'HOLD')與PhysicalSpring的質量、剛度、阻尼參數。
💬 問 AI
我在用 Figma Motion 匯出 Lottie / dotLottie,並要提供「減少動態」版本。請嚴格分成三區回答:「文章說的」「你查證到的」「你的推論」,三區不能混;不確定就直說,不要編造連結、版本號或數字。
文章說的(請當成待查證的主張):
1. LottieFiles 的 Figma Motion export 頁(2026-09-11 更新)把 Hold easing 列為支援(階梯式關鍵影格)、彈簧 easing 列為部分支援(依時間取樣)、「動畫文字內容」列為不支援。
2. Lottie 規格中關鍵影格 h 等於 1 表示維持原值到下一個關鍵影格。
3. 彈簧被取樣烤進影格,所以執行時無法改成別的曲線,減少動態版只能另匯出檔案。
4. 範例彈簧 m=1、k=100、c=10,阻尼比 0.5、過衝約 16.3%、約 0.807 秒落入終點正負 2%。
請做:
A. 逐點用官方文件或規格驗證 1–4,標示「查證成立/部分成立/查不到」並附連結。
B. Figma 匯出彈簧時的取樣密度(每秒幾格)有沒有公開說明?沒有就明說沒有。
C. 9 月 30 日新增的逐字/逐詞/逐行動畫,匯出 Lottie 後是否保留?請只引用文件或實測結果,不能用推測。
D. 在「推論」區回答:含彈簧的動畫要做減少動態版,該換成貝茲、Hold 還是整段停格?各自的取捨與無障礙風險。
E. 給我一份 8 項以內的匯出前檢查表,涵蓋 easing 類型、文字動畫、5 秒規則、減少動態版檔案與正式播放器實測。