Figma Design 教材 / Class LLL

Motion：在等一次點擊，還是在安排一段時間？

分開事件、時間稿與輸出責任

從要做動態切入，對照原型事件端點與Motion時間作品；手動逐格看時間和數值進度、來源色及靜態替代。正文涵蓋時間軸／關鍵影格／預設組合／路徑／trim、樣式／時間／緩動、輸出與handoff，保留當期資格與文件差異。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 17 分鐘

開啟互動教材查看參考來源

閱讀目標

按觸發事件或時間作品選工具
分清時間、持續時間、進度曲線與來源屬性
按具名物件條件用預設組合／路徑／trim及樣式變數
核當期資格／格式／FPS與交接，保留不可用替代

適用條件與學習範圍

做一段動態，是等使用者操作後切狀態，還是沿時間排出可輸出或交接的作品？

先辨Design 框架與子層；需要原型配對／過渡時真補讀智慧動畫。

能用目的區分原型與Motion，指出時間軸、關鍵值、曲線及可重用定義，核帳戶／輸出條件並提供靜態分鏡替代。

本站固定單一來源塊、端點事件與0–2000ms手動時間公式、三分鏡；不模擬完整Motion／智慧動畫、原生Bezier／spring、路徑／trim引擎、AI、匯出或Dev Mode／MCP服務。

原理與判斷

原型用觸發條件／動作／transition描述人做什麼後發生什麼；智慧動畫是過渡方式，不是整段影片的時間軸。Motion在Design檔內用時間軸安排屬性值、動畫與輸出。兩者可服務同一設計，但不能用一個點擊預覽保證時間作品、影片或開發實作已完成。本台左是事件閂、右是時間軌，下方保留三張靜態分鏡。原型模式只切前後端點；時間模式手動取樣，不自動播放。先能讀清起終值、持續時間與曲線，少動態或工具不可用仍可討論意圖。

在Design檔內啟用Motion，先核資格差異

Design toolbar切Motion後，底部出現時間軸；Explore及時間軸等Help寫所有方案、可編輯。22日測試版頁段首另明列Full 席次 on 所有方案，並排除政府方案；同頁FAQ又只廣義寫所有方案與編輯。21日pricing也列Motion 測試版 Full 席次，22日未重新取得pricing正文；當時採集端保守停止，後核同份robots精確規則實為允許，不把舊查核改成22日或假稱資格已全部消解。 All 方案與完整席次本身是不同維度，不必互相排斥；但廣義Help省略座位、測試版 FAQ與段首詳略仍不同。保守先核完整席次、可編輯、帳戶toolbar與逐步推出；發布animated 元件／代理程式生成／高解析輸出另有付費 Full條件，不保證所有檢視者或editor都可建立。測試版可能有變動或效能問題；本站切「不可用替代」是讀者選擇，不是帳戶偵測。

Timeline管理時間，不是操作步驟清單

時間軸可Play／Pause或Spacebar預覽，Current time直接跳時刻、Duration改全長（新動畫預設2000ms）、time unit切s／ms，playback有Loop／Once／Ping-pong。Auto-keyframe是另開關；拖軌道移整段位置，拖兩端改該層動畫長度。時間軸縮放檢視只改檢視，不能當持續時間或FPS。本台時間250ms／2000ms代表12.5%時間比例，時間與線性值進度都顯示12.5%；改1000ms，同一250ms變25%。這是手動樣本，不是每秒4格的匯出承諾，也不代表作品必須連續播放。靜態分鏡仍保留0／中點／終點供可及性與交接討論。

Keyframe記某時刻的值，Auto-keyframe要看playhead

可關鍵影格的屬性旁有diamond。先移playhead到起點，按Add 關鍵影格並設值，再移到終點改值建立第二點；至少兩點才有間隔可插值。例rotation在0ms為0°、500ms為180°。Auto-keyframe啟用後改物件會自動記點，改錯時刻也會記成意外動畫，完成應關閉。單擊選點、雙擊跳該時刻，Shift選多點或框選；拖點改時間，按Shift可吸playhead或別點。雙擊關鍵影格後在側欄改該點值；刪除可刪單點或選屬性刪全部。改時間距離影響速度，改位置值影響路程，不能只用持續時間修所有問題。本台不真的新增或寫入關鍵影格。

Preset與animation 樣式能重用，來源仍要查

選圖層，右側欄 Animations按+選單一預設組合，依動畫類型設控制；從Animations樣式入口可套composite，把多動畫一起套入，再選各段細調。Preset從當前playhead開始，可拖段移時間、拖端改持續時間，在時間軸或側欄開settings改類型／專屬值／緩動。 Animation 樣式可包含位置、縮放、rotation、size、不透明度、路徑，多類可合成一樣式，且只在Motion套用；能結合時間／緩動變數。時間是ms，可接預設組合延遲／持續時間；緩動是curve或spring，可接預設組合與關鍵影格。它們不同於數值／普通color 樣式；不要用原型transition或改一個持續時間冒充完整motion system。來源仍在Design檔，animated 元件可重用；發布與更新需核對權限及依賴，本台改色只是單一原創來源模型。

把樣式與元件存回正確模式

Animation 樣式只能在Motion從已存在物件建立：選物件，對應區段旁Apply 樣式 or 變數，picker選New 樣式 or 變數，填名稱／描述並核包含的屬性；不要把一般Local 樣式加號當不分模式都可建立animation 樣式。套用仍在Motion用Animations樣式入口。 Animated 元件建立反而要切Design：選已有動畫的圖層，Create 元件或Windows Ctrl+Alt+K／Mac Option+Cmd+K，再按資源庫流程發布。實例在時間軸是紫色軌道，可移時序，但持續時間與animation 屬性只能改主元件；實例元件屬性也要回Design改。保留來源與發布責任，不把實例當任意獨立動畫副本。

緩動改數值進度，不改時間刻度

在預設組合 settings選緩動，或點兩keyframes間的連線開緩動。官方有Linear、Ease in／out／in and out、返回與Hold，以及Gentle／Quick／Bouncy／Slow springs；可用Custom bezier拖控制點／輸四值，或Custom spring改Bounce。Bezier控制點x代表時間、y代表值進度，y越0–1可產生wind-up／overshoot；spring又是另一類，不把全部曲線叫線性慢放。本台只用u及u²：250／2000ms的u=0.125，平方值進度1.5625%（讀數1.56%）；時間沒回頭，物件卻還沒走同樣比例。u²不是Figma原生Ease in預設或Bezier／spring求解器，原型模式也沒偽造智慧動畫中間幀。

Motion 路徑改移動路徑，路徑 trim改描邊可見段

套位置 keyframes後，畫布顯motion 路徑，點列反映緩動、方框標關鍵影格位置；只在Motion編輯。選物件可拖關鍵影格改空間位置；Mac按Command／Windows按Control選點，用handle改曲線。時間上的緩動與空間路徑各有責任，不能只拉曲線讓每時刻速度自動符合意圖。 Path trim只支援置中描邊。Path animation 樣式僅open vector 路徑、每物件一個路徑預設組合；選open 路徑 > Animations > Path，灰掉先查open／置中。手動Path trim keyframes可open或closed，描邊的Path trim start／end旁Add 關鍵影格，填0–100%，移playhead再改起終值，能做draw-on、erase或spinner。它裁的是筆畫可見段，不是影片時間Trim；本台不假造任意路徑或trim按鈕。

動畫匯出核頂層框架、尺寸與FPS

animated 圖層必須在框架內，且只能選直接位於畫布的頂層框架，匯出才有Animated tab；不是多層裡任何子層框架都可同樣輸出。可選MP4／WebM／GIF／SVG，尺寸設解析度、框架 rate設FPS，Quality只MP4／WebM、Loop只GIF；匯出後新tab再Download。檢視可匯出但擁有者可限制複製／分享。輸出超過1920×1080或30FPS僅付費，測試版 FAQ另寫high-resolution需付費 Full，兩條都核，不只看所有方案。瀏覽器下載位置、桌面版檔名／位置分開。FPS與手動時間游標不是同一值；動畫SVG也不是FG40的靜態SVG同一輸出流程，實際透明色版、效果、大小及目標環境仍需開檔核對。本站沒有生成影片。

Lottie文件當期有差異，不能靠格式名保真

22日匯出 animations專文已列Lottie及dotLottie：前者raw JSON、一檔一動畫，後者compressed archive可包多動畫與影像／font assets。但同日測試版 FAQ仍稱Lottie將來推出，本文保留差異，要求核當前帳戶Animated 格式及實際檔案，不用FAQ或索引New硬保證全面可用。專文列Lottie shaders、video、angular gradients不支援：shader／angular變flat 影像，video改MP4／WebM／GIF；投影／雜訊／玻璃效果只用首幀外觀、不隨動畫更新。目標Lottie player需實測效能與支援，壓縮或向量不保證全Figma屬性／字型／效果無損；本站未輸出Lottie或在播放器實測。

Handoff與AI資格另核，先保留意圖

動畫handoff需付費方案及Full或開發席次。Dev Mode選animated 框架，檢查 > Motion > Show in 時間軸檢視看read-only 時間軸；Code可選CSS／React／JSON並Copy。MCP可把框架 link給coding 代理程式取得keyframes、motion 類型、timing及緩動 context；取得code不是部署完成，仍需實作、reduce motion與目標瀏覽器驗證。手動Motion本身不等同AI生成。測試版 FAQ稱代理程式測試版暫不耗點數、未來適用標準；22日AI 點數專文已列agentic動作可能計費，兩頁口徑不同，不能保證免費。先查當期account／功能／model與管理員設定、來源權利及生成標記。不可用時交起終值、時間／緩動、來源檔、三分鏡與必要靜態版，別把動畫當理解內容唯一入口；本站無代理程式、MCP或原生handoff呼叫。

步驟與觀察

先定目的與資格
要互動狀態回原型，要時間稿查Motion；核Full／編輯／測試版／逐步推出與政府方案例外，缺入口保留靜態分鏡。操作名稱對照（中文為本站教學譯名）： Design toolbar > Motion Motion 時間軸 > Current time／Duration／Auto-keyframe（介面原文：Motion timeline > Current time／Duration／Auto-keyframe）右側欄 Animations > +／Animations 樣式（介面原文：右sidebar Animations > +／Animations styles）屬性旁 Add 關鍵影格（介面原文：屬性旁 Add keyframe）描邊 > Path trim start／end（介面原文：Stroke > Path trim start／end）匯出 > Animated（介面原文：Export > Animated） Dev Mode 檢查 > Motion > Show in 時間軸檢視（介面原文：Dev Mode Inspect > Motion > Show in timeline view）
記時間與來源屬性
Motion開時間軸，先定Current time／Duration與屬性值，手動關鍵影格或有意識開Auto-keyframe，完成關閉。
選預設組合、曲線及路徑責任
Animations選預設組合或樣式，確認開始時間；緩動改進度，motion 路徑改空間，路徑 trim只置中且open 預設組合／closed手動條件不同。
建立可重用定義並預覽
分時間／緩動變數、animation 樣式與animated 元件；核發布條件，以手動或播放查端點／中點／少動態替代。
按媒介驗收輸出或handoff
頂層框架 > Animated核格式／尺寸／FPS與付費門檻；Lottie支援差異及效果限制明示。Dev Mode／MCP另核付費席次，交接後仍需實作及目標環境測試。

常見問題

有編輯卻找不到Motion

Help 所有方案未完整列席次；測試版段首及歷史pricing列Full，還有逐步推出／政府方案。核帳戶toolbar，不假裝本站切換能解鎖，先用分鏡替代。

調持續時間仍動態突然跳

原型先查智慧動畫配對／支援；Motion先查時刻／值／緩動與意外Auto-keyframe。兩者不同機制，不一律加長時間。

Path灰掉，或closed 路徑不能套預設組合

Path 樣式只open vector、置中描邊、每物件一個；closed用Path trim start／end keyframes，勿與影片Trim混淆。

匯出沒有Animated tab或高FPS不可用

先選畫布上的頂層框架且animated 圖層在內；超1920×1080或30FPS核付費與Full條件、檢視及擁有者限制。

Lottie或代理程式費用與FAQ對不上

22日專文與測試版 FAQ仍有差異，查帳戶與實際選單／費用提示、目標player；沒有原生結果時明記待核，不承諾免費或全效果保真。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Motion 公開測試；Help 所有方案／編輯與測試版段首Full 席次及FAQ詳略差異，政府方案不可用，帳戶／逐步推出待核。High-res／FPS、animated 元件發布／代理程式、付費 Full／Dev handoff分開。21 pricing歷史不冒稱22更新。來源狀態：22日robots允許後單線Scrapling --ai-targeted新抓十四Help，讀相關主體／style及Timing／Easing章節；credits沿FG51同日新抓重讀。22日pricing正文未抓；採集端因urllib.robotparser未處理$末端規則而保守停止，後核同份robots精確Allow /pricing/$實為允許，保留21歷史；Lottie、seat及agent費用差異明示。示意限制：原創事件端點、0–2000ms逐格時間／線性u或平方u²、同一來源色與三分鏡，不自動播放。不模擬原生智慧動畫／Bezier／spring／路徑／trim、檔案輸出／FPS、帳戶偵測／AI／MCP。原生軟體實測：未Figma Motion、原生資格／匯出／Lottie player或開發handoff實測；只驗本站公開模型，與官方查核分開。學習成效驗證：未真人試用，無學習或遷移成效證據。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。