Figma Design 教材 / Class LLL

動態突然跳：先查配對，再選轉場節奏

名稱、祖先、階層與屬性，先於調長持續時間

同起終點卻突然跳，先查智慧動畫能否把兩個物件當成同一個，再查屬性是否支援。用雙游標台分開時間與輸出進度、持續時間與曲線，提供少動態的手動端點比較。

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

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

閱讀目標

核物件與祖先配對條件及例外
區分支援屬性與淡化替代
比較相同時間比例的不同輸出
分開持續時間與緩動及spring
少動態仍能手動檢查端點與中途

適用條件與學習範圍

明明同一個圖案，為何沒有從起點移過去，而像兩份淡掉／出現？如果只是時間變長，能修好名稱或階層配對嗎？

可直接閱讀。先能指出流程中的觸發條件／動作／目的地；需要時補讀原型基礎再返回本台。

能沿名稱、祖先／階層、區段及屬性定位配對問題，再選轉場與節奏；用手動進度比較同起終點，知道長持續時間不等於自然或可用。

明確命名的非文字矩形有限配對、位置／尺寸／旋轉／不透明度插值與形狀變化淡化示意；原創線性／二次曲線，不重現原生Bezier／spring、填色材質、shadow或全部配對與轉場引擎。

原理與判斷

智慧動畫不是替兩張畫面猜意圖。它先找匹配物件，再對可支援的差異做轉場；如果來源與目標沒有被當成同一個對象，拉長時間只會把不想要的淡化或跳變看得更久。先核配對，再選動畫，比先改成兩秒更有判斷依據。節奏又有兩個不同問題：整段多久完成，與中途何時走到哪裡。本站用時間與輸出雙游標比較，同樣50%時間，線性輸出50%、原創加速曲線只到25%；起終點不因此改變。少動態讀者可以完全停播放，仍以端點與手動中點理解差異。

先把觸發條件、動作與transition分開

原型的觸發條件決定何時開始，動作決定導航或改什麼，Animation／transition決定如何呈現中間變化。智慧動畫是transition，不是導覽至、Motion animation 樣式或一個新觸發條件。原生操作先選connection並核目的地，再在Animation選智慧動畫及Curve／Duration。本台固定同一對端點，只比較配對及有限屬性，不會替網站建立原型路由。

非文字物件不只名字相同

官方matching條件包含物件名稱、父層 frames及圖層 hierarchy。物件的父層與祖先層框架名稱要匹配，但頂層框架名稱與元件組的變體名稱不必相同。階層位置也要對應，例如一邊有父層及grandparent，另一邊也要有同等結構。本台框架 A／Panel／Marker與框架 B／Panel／Marker可配；改物件名、祖先名或多一層Wrapper就停止插值，明示兩端淡化。

區段、重名與文字例外，別用一個口訣蓋過

在區段內的物件只能配同區段中的物件。其餘條件相同卻同父層有多份同名物件時，官方用index決定配對。文字有額外例外：在圖層面板明確命名／改名時名稱需同；依內容自動命名的文字可依相同文字樣式匹配，多個候選再看X/Y。本台只用明確命名非文字物件，沒有偽造這些候選排序；回真稿遇到文字或重名時先查類型與圖層面板，而不是把所有東西改同名。

哪些差異可插值，哪些不能靠改時間修好

當期智慧動畫專文列尺寸、位置、不透明度、rotation及填色，填色可含solid／gradient／影像；不透明度可由填色或整圖層控制，建議用整圖層不透明度。新層可淡入，同值不會自己動。本站幾何稿插值位置／尺寸／旋轉與不透明度，同位置不透明度稿比較0→1；沒有用可見性開關冒充不透明度。填滿材質雖為已核支援，未在本台重現其完整插值與取樣。

形狀與效果要用當期限制判斷

官方不支援在不同形狀之間或drop／inner shadow做智慧動畫，含不支援變化時可能轉預設dissolve。當期文件另列texture／noise／background 模糊／圖層模糊的支援條件，隨機texture／noise建議複製框架保持一致，不要拿舊說法一概說所有效果不能用。本台矩形→三角形只淡化兩端，不造中間輪廓；未配對的同位置不透明度稿也按各端實際不透明度淡化，沒有憑空補一個物件。

Duration改整段時間，緩動改中途分配

相同端點下，持續時間越長平均速度越慢，卻不修名稱、結構或不支援屬性。原生文件列1–10000ms，本台只提供200–2000ms子集；固定50%時改持續時間，只改經過毫秒，不偷改位置。緩動決定加減速；原生有Linear、Ease In／Out／In and Out等Bezier及back曲線，也能調custom bezier。本站線性t、t²與1−(1−t)²是具名原創教學曲線，不宣稱等於Figma各預設組合的公式。

Spring與組合轉場又有別的條件

官方spring presets及custom stiffness／damping／mass是另外控制，mass也可能影響持續時間；它不是把Bezier時間拉長。智慧動畫可單獨使用，也可搭其他transition的matching 圖層：不匹配層採主transition，匹配支援層另插值，fixed匹配層不轉場、fixed不匹配層採dissolve。組合Slide／Move時框架填色不一起動畫，可能露出重疊；官方建議需要時在內容後放實色矩形，仍須核層序。開啟覆蓋層不支援同樣智慧動畫方式，替換覆蓋層的matching 圖層則有例外。本台只做單獨智慧動畫概念，不播放推移／Move／Slide、spring或覆蓋層組合，更不混作Figma Motion時間軸。

少動態不是少一半教學

本台偵測prefers-reduced-motion時停自動播放，時間滑桿與起點／中點／終點按鈕仍能呈現同份數值與圖。一般模式可單次播放、暫停再看當下，沒有自動循環；播放過程用本地瞬時時間，完成或手動操作才寫本站探索狀態。這是本站可及性選擇，不聲稱Figma原型會自動照相同偏好轉場；真原型應另備可理解的少動態替代並實際測。

調慢供診斷，完成後回真內容判斷

官方建議製作時可暫調長持續時間以看清配對，但正式節奏仍要按用途與內容判斷。先在原型懸浮看matching highlight、核圖層面板名稱／祖先／層序，再隔離一項支援屬性，最後比較起終點及中途。不能由本站平滑或看過紀錄宣稱自然、有效或真人可用；目前只有官方查核與本站操作，沒有原生Figma或真人效果證據。

步驟與觀察

先核連線與動作
在原型選connection，確認觸發條件、動作及目的地，進Animation選智慧動畫。操作名稱對照（中文為本站教學譯名）：原型 > connection > Interaction details > Animation > 智慧動畫（介面原文：Prototype > connection > Interaction details > Animation > Smart animate） Animation > Curve／Duration 原型 > 懸浮圖層 > matching highlight（介面原文：Prototype > hover layer > matching highlight）圖層面板 > 物件與祖先名稱／階層（介面原文：Layers > 物件與祖先名稱／階層）
逐層查匹配
比物件名稱、祖先層框架及hierarchy；頂層名稱可不同，區段、文字及重名另核具名條件。
隔離一項支援差異
先只改位置或不透明度，再加尺寸／rotation；不同形狀或shadow不要靠拉時間期待插值。
比較同時間比例
在本台50%看線性與原創加減速的不同輸出，改持續時間再看時間毫秒，起終點保持同一份。
播放一次並保少動態路徑
一般模式可單次播放／暫停；少動態用時間滑桿及三端點按鈕，不需動態也能比較。
回真原型短測
用懸浮 highlight與圖層面板核實配對，再預覽／播放；調慢只用於診斷，回合理節奏檢查內容並記限制。

常見問題

同圖案卻淡入淡出

查名稱、祖先／hierarchy、區段及支援屬性，外觀相同不等於被當作同一物件。

框架 A與B名字不同就急著改同名

頂層框架名稱不必同；真正要查內部祖先名稱與結構，以及物件類型的匹配條件。

所有重名物件亂飛

不要只改成同名；核父層內的index與階層，複製完整框架可幫保一致，仍要懸浮看匹配。

改成兩秒仍突然跳

持續時間不修配對或不支援變化；先隔離原因，再選轉場，不能把越慢當越自然。

以可見性開關做淡入沒效果

比整圖層不透明度 0→1而非只切可見，核支援與匹配；本站同位置不透明度稿可手動觀察。

少動態模式不能播放就無法學

用同源手動時間及起點／中點／終點；不要求看動態才取得正文、數值或補讀。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design 原型所有方案，可編輯建立／編輯，可檢視可看；不由基礎條件泛推Motion、分享或其他進階資格。少動態是本站路徑，非原生Figma偏好實測。來源狀態：2026-10-22 Scrapling get --ai-targeted新核Smart animate、Matching、Easing／spring、Prototype animations四文；duration欄範圍沿同日FG32新核Connect。具名保留top-level及文字例外、section／重名index、當期effects支援與overlay例外，不照舊概括。示意限制：原創雙游標配對台：明確命名非文字子集，幾何／不透明度插值或兩端淡化同源。時間與輸出分開，t／二次曲線明示非原生預設組合公式；單次本地播放，少動態停播可手動比較。不重現Figma配對／Bezier／spring／填色材質／shadow／組合轉場引擎。原生軟體實測：未原生Figma配對、智慧動畫、效果或跨裝置實測；官方查核與本站瀏覽器分開。學習成效驗證：未真人自然度、可用性或學習成效實測。

參考來源

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