Figma 滑塊效果教學：打造精美的互動式輪播設計
Figma 滑塊效果（輪播、Carousel）的做法主要有三條路：Smart Animate 原型動畫、互動元件變體（Component Variants 加 Interactiv…
Figma 滑塊效果（輪播、Carousel）的做法主要有三條路：Smart Animate 原型動畫、互動元件變體（Component Variants 加 Interactive Component）、以及第三方外掛。選哪一條，關鍵看這個滑塊最後要被誰、用什麼方式實作，動畫炫不炫反而是次要。Material Design 3 的動效指南把標準過場時間抓在約 300ms [來源：Material Design 3〈Easing and duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2026〉]，這個數字也正好是 Figma 滑塊動畫最常被套用的區間。把方法選對，做完的滑塊才不會只剩 Demo 好看、交給開發卻被退件。
重點先看：做滑塊真正要問的不是「怎麼讓它動」，而是「這個滑塊最終要被誰、用什麼方式實作」；Smart Animate 適合提案展示，Component Variants 適合設計系統，外掛適合快速量產 [來源：Figma Help Center〈Add animations with Smart Animate〉〈https://help.figma.com/hc/en-us/articles/360040514513-Add-animations-with-Smart-Animate〉〈2026〉]。
接案做首頁輪播、商品圖 Carousel、卡片滑動這類元件時，最尷尬的狀況是這樣：設計師在 Figma 裡把動畫調得又順又漂亮，客戶看了頻頻點頭，結果交給前端工程師那一天才發現，原型動畫根本不能直接變成網頁程式碼。網路上多數「Figma 滑塊教學」只示範 Smart Animate 這一招就收工，看起來很酷，卻沒有人告訴你這條路走到底會卡在哪。這篇的重點不是再教你按哪個按鈕，而是給你一個決策框架，讓你在開始做之前，就先想清楚這個滑塊要進提案、進設計系統，還是進開發。若你對整個工具還不熟，先回頭看 Figma 從註冊到精通的完整指南 打底，順便理解 UI Prototype 原型設計完整解析 與 網頁設計自學路線圖 的定位，再進來做互動元件會踏實得多。
Figma 滑塊效果的三種做法：先搞懂你該選哪一條路
這三條路其實對應不同階段的需求，並非平行的選項。Smart Animate 是門檻最低的那條，你只要會開 Frame、會連線，十分鐘就能做出一個會動的輪播原型，但它做出來的東西只活在 Figma 的 Prototype 播放器裡，不能重複使用、也不能丟進別的檔案 [來源：Figma Help Center〈Add animations with Smart Animate〉〈https://help.figma.com/hc/en-us/articles/360040514513-Add-animations-with-Smart-Animate〉〈2026〉]。Component Variants 是進設計系統的標準做法，把滑塊封裝成元件、用 Variant 與 property 管理狀態，做一次就能跨檔案重複套用 [來源：Figma Help Center〈Create interactive components〉〈https://help.figma.com/hc/en-us/articles/360059033654-Create-interactive-components〉〈2026〉]。外掛則是加速器，專門處理「把一批圖片快速排成水平滑動」這種重複勞動。三種方法不互斥，進階專案常常是組合著用，但組合之前你得先單獨搞懂每一條。
| 方法 | 最適用途 | 可重複使用 | 可交開發 | 門檻 |
|---|---|---|---|---|
| Smart Animate 原型 | 一次性提案 Demo | 否 | 僅當規格參考 | 低 |
| Component Variants | 設計系統元件 | 是（跨檔案） | 是（規格清楚） | 中 |
| 第三方外掛 | 快速量產版面 | 視外掛而定 | 否（靜態居多） | 低 |
選方法的關鍵只有一句話：這個滑塊只展示一次，還是會被反覆使用與交接。只展示一次，就用 Smart Animate，省事；要進設計系統、要被五個設計師同時套用，就一定要走 Component Variants，否則你今天改一張圖、明天全專案的輪播都對不上。需要快速塞五十張商品圖進輪播欄位，外掛幫你省掉手動排版的兩小時。新手最容易犯的錯，是聽到 Smart Animate 很酷就全部用它，做完整個專案才發現沒有一個元件能重複使用，最後變成一份只會動的孤兒檔案。如果你連版面結構都還不穩，先看 網頁版面與響應式排版攻略 與 網頁排版設計範例與靈感，把骨架打好再來談互動。
還有一個常被忽略的前置判斷：這個滑塊最終會不會上線。如果只是提案稿、客戶看完就丟，Smart Animate 完全夠用，甚至不用想太多規格。但如果是要交給開發落地的正式元件，你從第一張 Frame 就要開始想斷點、想圖片規格、想觸發條件，這時還堅持用 Smart Animate 就是給自己找麻煩。設計到開發的交接觀念，可以對照 Elementor 頁首頁尾與版面結構設計 與 免費 UIUX 自學資源清單；想理解整個工具生態，Figma AI 功能與 Design Agent 解析 也能給你更廣的視野。
方法一：用 Smart Animate 做出會動的滑塊原型
Smart Animate 的原理是讓兩個畫面中「同名圖層」自動計算位移與淡入淡出。做滑塊只要把輪播內容複製成多個 Frame、讓圖層名稱一致、在 Frame 間加上 Smart Animate 互動即可。整個流程約六個步驟能完成一個基本款，但魔鬼全藏在圖層命名這一步。
Smart Animate 的運作機制先講清楚。Figma 官方說明指出，Smart Animate 會比對兩個 Frame 裡「名稱相同」的圖層，再對差異做動畫 [來源：Figma Help Center〈Add animations with Smart Animate〉〈https://help.figma.com/hc/en-us/articles/360040514513-Add-animations-with-Smart-Animate〉〈2026〉]。意思是你如果要讓一張卡片從左邊滑到右邊，那張卡片在兩個 Frame 裡的圖層名稱必須一字不差，大小寫、空格、emoji 都算差。名稱對不上，Smart Animate 就會放棄計算位移，退化成整批淡入淡出，看起來就像投影片切換，完全沒有滑動的感覺。這個機制也出現在 Figma 載入動畫與流動效果原型 裡，是 Figma 原型動畫的共通基礎。
- Step 1 建立容器：開一個固定尺寸的 Frame 當輪播容器（桌面常用 1440×600，手機 390×400），裡面放第一張卡片與內容、箭頭按鈕
- Step 2 複製狀態：把這個 Frame 整份複製成多個，每個 Frame 代表一個滑動狀態（第一張、第二張、第三張）
- Step 3 對齊圖層名稱：把要動的卡片圖層在每個 Frame 命名一致，例如統一叫 Card，Figma 才會自動算位移
- Step 4 設定觸發：切到 Prototype 面板，把觸發設為 On click 或 After delay（自動播放），動畫類型選 Smart Animate
- Step 5 調曲線與時間：easing 建議 Ease In Out，時間抓 300 到 500ms，這是水平滑動最自然的區間
- Step 6 連箭頭：左箭頭連到上一個 Frame、右箭頭連到下一個 Frame，按下播放測試整個滑動流程
Step 3 是整套流程最常翻車的地方。實務上比較省事的做法是，做完第一個 Frame 就把所有要動的圖層命名好，再開始複製，複製出來的 Frame 會自動繼承名稱，省掉之後逐一改名的麻煩。若真的忘了對齊名稱，症狀會很明顯：卡片不滑動，而是整片閃一下就換掉。看到這個症狀，先回頭檢查圖層名稱。排版基礎則看 Divi 版面設計模板與版型。
Step 5 的時間與曲線沒有絕對標準，但 Material Design 3 的官方動效指南提供了一個可信的錨點：手機上的標準互動過場大約落在 300ms，大型的全螢幕轉場則建議拉長到 375ms 以上 [來源：Material Design 3〈Easing and duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2026〉]。水平滑動抓 300 到 500ms、淡入淡出抓 200 到 300ms，基本不會出大錯。這個手感跟 Figma 毛玻璃霧面質感設計 裡抓透明度漸變的節奏是同一回事。想在視覺上再加分，Figma 網格系統與響應式排版設定 也能幫你把容器排版做穩。
Smart Animate 最大的價值是「快」。它讓你不用寫一行程式碼，就能在十分鐘內做出一個客戶會驚呼的輪播原型，這對提案階段來說夠用了。它的限制要一併記住：做出來的動畫只活在 Figma 裡，不會自動變成網頁程式碼，也不能被另一個設計師直接拖進他的檔案重複使用。換句話說，Smart Animate 是提案用的，不是交付用的。拿錯場合，開發端就得替你收拾殘局。
Component Variants 把滑塊做成設計系統元件
把輪播容器、卡片與箭頭整理成 Component 並建立多個 Variant（例如 state=1、state=2、state=3），再利用 Interactive Component 功能讓 Variant 之間能互動切換，就能做出一個拖進任何畫面都能用的輪播元件。這是滑塊進設計系統的標準做法，也是它能被跨檔案重複套用的關鍵。
互動元件是 Figma 設計系統化的核心能力。官方說明寫得很清楚：互動元件讓你能在同一個 Component Set 裡的不同 Variant 之間建立原型互動，套用元件時這些互動會跟著帶過去 [來源：Figma Help Center〈Create interactive components〉〈https://help.figma.com/hc/en-us/articles/360059033654-Create-interactive-components〉〈2026〉]。換句話說，你把輪播做成三個 Variant，分別代表顯示第一張、第二張、第三張的狀態，再把右箭頭連到下一個 Variant、左箭頭連到上一個，這個滑塊元件就「活」了。任何設計師把這個元件拖進他的畫面，點箭頭一樣會切換，不需要每個人都重新接線。這正是 Component Variants 比 Smart Animate 強大的地方：做一次，全團隊受用。想理解整個元件化的思路，RWD 響應式電商網頁設計流程 能補上背景知識。
拆 property 維度時，原則是：用 state 控制目前顯示第幾張、用 autoplay 控制要不要自動播放、用 arrow 控制箭頭顯不顯示，每個 Variant 對應一組狀態組合，Variant 之間用 Interactive Component 連結互動。主元件改了，所有套用實例同步更新，這是設計系統一致性高的來源；但同一個原則也意味著 property 數量要克制，否則邏輯複雜時 Variant 會呈指數成長，這是最需要小心的地雷。
Variant 爆炸是這條路最大的陷阱。Component property 每多一個維度，Variant 數量是用乘的，不是用加的。state 開 3 個、autoplay 開 2 個、arrow 開 2 個，聽起來沒什麼，但組合起來就是 3×2×2 共 12 個 Variant；再加一個主題色 light／dark，直接翻倍成 24 個。Variant 一多，維護成本就跟著爆炸，改一個小細節要動十幾個地方，設計系統反而變成包袱。實務原則是：能用 property 就別開 Variant，能用 Boolean 控制就別開實體 Variant，把狀態維度壓到最低。這套克制的設計哲學，跟 Bento Grid 創意版面配置設計 裡談的「少即是多」是相通的。
Component Variants 的另一個優勢是交接。因為狀態被明確拆成 Variant，你交付給工程師時，每一個 Variant 就是一個明確的 UI 狀態，工程師照著 Variant 清單實作就好，不需要猜你原型裡到底有幾種狀態。這對接案的設計師來說特別有感，因為它直接減少了「設計跟開發對不上」的溝通成本。想知道整個設計系統的落地脈絡，用 Divi 打造專業公司官網 與 Divi 主題品牌官網設計 會給你更完整的視角；配色與一致性方面，網頁配色工具與配色神器 也值得一起看。
外掛的邊界：快速產出 Carousel 卻不是萬靈丹
如果你的需求是快速把一批圖片排成水平滑動的輪播，外掛能省掉手動排版的時間。但外掛產出的多半是靜態版面，要做真正的互動動畫，多半還是得回到 Smart Animate 或 Component。外掛是加速器，不是萬靈丹。
Carousel 類外掛大致分成三種類型。第一種是圖片陣列排列，你餵給它一批圖片網址，它自動排成等距的橫列；第二種是水平 scroll 容器，產出一個可拖曳捲動的版面框架；第三種是現成 Carousel 模板，直接給你一個套好格式的元件讓你改內容。三種類型解決的問題不同，挑之前先想清楚你要的是排版加速、互動框架，還是完整模板。挑外掛的原則很樸素：看更新頻率（太久沒更新的外掛容易跟新版 Figma 不相容）、看是否支援 Variants（不支援的就只能產靜態版）、看社群評價數量。外掛生態的入門，可以先翻 新手必裦的 Figma 外掛推薦；圖示類需求看 Figma 免費圖示外掛推薦清單。
| 外掛類型 | 產出 | 適合情境 | 缺點 |
|---|---|---|---|
| 圖片陣列排列 | 靜態橫列 | 電商商品圖、作品集縮圖列 | 無互動，要手動接動畫 |
| 水平 scroll 容器 | 可拖曳框架 | 卡片滑動、靈感牆 | 需再加工成 Component |
| 現成 Carousel 模板 | 完整元件 | 快速套用、改內容即用 | 樣式受模板限制 |
外掛的局限要講清楚。外掛產出的版面，有將近多數是靜態的，它幫你把圖排整齊、把容器框架搭好，但不會幫你把動畫邏輯接好。換句話說，外掛做完之後，常常還是要回到 Smart Animate 或 Component 把互動補上，這個工序省不掉。實務上外掛的定位是：適合處理「量」，不適合處理「質」。要塞五十張商品圖進輪播欄位，外掛幫你省兩小時；要做到精準的動畫控制或交給開發的互動原型，外掛幫不上忙，還是得回到手動設定。做完外掛產出的版面後，通常還會手動再把它加工成 Component，這樣才好維護、好交接，否則改一張圖要動一整列。想看更多工具整合，Elementor 外掛與擴充模組推薦 提供了網頁端的對照。
滑塊動畫的細節：easing、時間與方向決定手感
讓滑塊看起來自然的關鍵在動畫曲線與時間：水平滑動建議用 Ease In Out、時間約 300 到 500ms；淡入淡出可以更短約 200 到 300ms。數字沒有絕對標準，但超出這個區間通常會讓人覺得太頓或太拖。
把 easing 想成動畫的「呼吸節奏」。Ease In Out 是開頭慢、中間快、結尾再緩下來，這條曲線最貼近真實物體的物理慣性，也是 Material Design 3 在多數互動過場裡優先推薦的曲線 [來源：Material Design 3〈Easing and duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2026〉]。Linear（等速）看起來機械感很重，像工廠輸送帶，輪播盡量避免用它，除非你刻意要做復古機械風。Ease In（開頭慢結尾快）適合物體離開畫面，Ease Out（開頭快結尾慢）適合物體進入畫面，這兩個在進階切換時可以搭配使用，但一般滑塊用 Ease In Out 一條曲線到底就夠了。想更深入了解動態曲線的設計，設計思考方法與流程指南 與 Figma 響應式設計與行動版排版 有更多節奏感的討論。
| 動畫類型 | 建議 easing | 建議時間 | 手感 |
|---|---|---|---|
| 水平滑動 | Ease In Out | 300 到 500ms | 自然順暢 |
| 淡入淡出 | Ease Out | 200 到 300ms | 輕快不拖 |
| 大型全螢幕切換 | Emphasized | 375ms 以上 | 有重量感 |
| 自動輪播過場 | Ease In Out | 400 到 500ms | 不打擾 |
時間長短是第二個關鍵。超過 600ms，使用者會開始覺得「卡住了」，尤其在快速點擊箭頭連續切換時，過長的動畫會讓操作顯得遲鈍。低於 200ms，動畫快到來不及被看見，使用者會懷疑自己到底有沒有點到。Material Design 3 把手機端標準過場錨定在約 300ms，大型全螢幕轉場拉到 375ms 以上，這個範圍跟滑塊的手感需求高度吻合，可以直接借來用 [來源：Material Design 3〈Easing and duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2026〉]。要強調的是，這些數字是業界常見建議，而非鐵律。你的素材、畫面尺寸、卡片數量都會讓最佳值浮動，所以一定要實際預覽、反覆微調，死背一個數字就上線最容易翻車。排版與呼吸感的延伸閱讀，看 排版設計與字體行距技巧。
方向一致性是容易被忽略的細節。左右切換就一律做水平位移，不要這一張往左滑、下一張卻用淡入，方向混亂會讓使用者失去空間感，不知道現在看到的是第幾張。自動輪播的間隔也要拿捏：建議落在 3 到 5 秒之間，太短會打擾閱讀、太長使用者已經滑走。這個間隔沒有硬性規範，是業界慣例，會隨內容資訊量浮動，純圖片可以短一點、有文字說明的卡片要拉長。搭配 CTA 行動呼籲按鈕設計指南 的引導節奏，整個滑塊的引導力道會更一致。
把滑塊原型交給工程師：交付規格決定能不能落地
Smart Animate 做出來的動畫本身不會自動變成網頁程式碼，工程師是看你的動畫行為去手刻或套前端輪播庫。要讓滑塊順利落地，交付時要標明觸發方式、動畫曲線數值、斷點行為與手機版差異，光給一個會動的 Prototype 連結就交差，幾乎等於沒交付。
這是最多人踩雷的地方，也是 Smart Animate 教學最常迴避的真相。Figma 的 Prototype 是設計端的互動模擬，Dev Mode 雖然能協助標註間距、色彩、字級，但動畫的 easing 曲線、持續時間、位移行為這些動效規格，Figma 不會自動轉成前端可直接執行的程式碼，工程師是參考你的原型行為，再用 Swiper、Slick、Embla 這類前端輪播庫或手刻 CSS 動畫去重現 [來源：Figma Help Center〈Guide to Dev Mode〉〈https://help.figma.com/hc/en-us/articles/15077662589847-Guide-to-Dev-Mode〉〈2026〉]。換句話說，你交付的不是程式碼，而是規格書。光給一個 Prototype 連結，等於叫工程師用看的去猜你要多快、什麼曲線、手機要顯示幾張，最後做出來一定跟你的原型對不上。這也是為什麼前面一直強調要先想清楚滑塊要給誰、用什麼方式實作。想把落地端工具摸熟，CSS 入門與基本語法教學 與 Elementor 頁面編輯器完整教學 是好的起點。
- 標註動畫規格：easing 曲線（如 Ease In Out）、持續時間（如 400ms）、位移距離都寫清楚
- 說明觸發條件：點擊箭頭、自動播放、拖曳、還是捲動觸發，每一種都要明確
- 提供斷點行為：桌面顯示幾張、平板幾張、手機幾張，例如桌面 3 張、手機 1 張
- 互動狀態齊全：default、hover、active、disabled 每一種都要給，工程師才能完整實作
交付文件建議有一套固定格式：一張對照表，左邊是 Figma 原型截圖、右邊是預期上線後的行為描述，外加一欄規格數值（曲線、時間、斷點）。這份文件比任何會動的連結都實用，因為工程師不需要打開 Figma、不需要切 Prototype 模式，照著表做就好。重點是讓這份文件自含，就算工程師完全沒碰過 Figma 也能讀懂。這套交付觀念跟 Landing Page 轉換率優化全攻略 裡談的「設計到落地」是一致的。若你的滑塊最終要上 WordPress，落地路徑很明確：Elementor 圖片輪播製作教學、Elementor 滿版輪播 Hero Section 教學 都是現成的輪播模組，設計端把規格講清楚，網頁端就能照著重現。
交付時務必標明哪些是「展示用原型」、哪些是「可上線規格」，避免客戶誤以為收到會動的 Prototype 就等於網站做好了。這層認知落差是接案糾紛的常見來源，客戶拿著 Figma 原型連結質問「為什麼上線後動畫不一樣」，原因多半是沒有事先把「原型不等於成品」講清楚。事前花十分鐘寫規格、標狀態，事後能省掉一小時的補救與來回溝通。頁面編輯器與平台的對照，可以參考 Elementor Pro 進階功能指南。
滑塊的效能與 SEO 影響：輪播為什麼會拖慢網站
滑塊在視覺上討喜，在效能上卻是常見的拖累來源。問題通常出在三個地方：首屏載入大量高解析圖片、JavaScript 輪播庫延遲了主執行緒、以及未指定尺寸的圖片在切換時觸發版面位移。第一張圖往往就是輪播裡最大的那張，它直接進入首屏，會把 Largest Contentful Paint（最大內容繪製，LCP）往後推；使用者還沒點箭頭，瀏覽器就先把整批圖片的資源都抓下來，白白浪費頻寬。這些問題在 Figma 原型階段完全看不出來，因為原型沒有真實的網路與算力成本，只有在真正上線、用真實裝置測量時才會現形。
效能之所以值得在設計階段就納入考量，是因為它與搜尋排名和商業成果直接相關。Google 自 2020 年 5 月起把 Core Web Vitals 納入網頁體驗排名訊號，與行動裝置相容性、HTTPS、侵入式插頁廣告等既有訊號合併計算 [來源：Google Search Central Blog〈Evaluating page experience〉https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]；到了 2021 年 5 月，這套網頁體驗訊號正式在排名中全面推出 [來源：Google Search Central Blog〈Timing for bringing page experience to Google Search〉https://developers.google.com/search/blog/2020/11/timing-for-page-experience 2020-11-10]。換句話說，一個會拖慢首屏的輪播，影響的不只是使用者體驗，還可能壓低排名與轉換。實際的商業影響有公開案例可佐證：Rakuten 24 投入改善 Core Web Vitals 後，每位訪客營收提升 53.37%、轉換率提升 33.13% [來源：web.dev〈Why does speed matter?〉https://web.dev/articles/why-speed-matters 2026]；Vodafone 把 LCP 改善 31% 後，銷售提升 8% [來源：web.dev〈Why does speed matter?〉https://web.dev/articles/why-speed-matters 2026]；redBus 改善 Interaction to Next Paint（INP）後，銷售提升 7% [來源：web.dev〈Why does speed matter?〉https://web.dev/articles/why-speed-matters 2026]。這些數字說明一件事：滑塊帶來的延遲，會被換算成實質的營收損失。
以這類首頁放滿版輪播 Hero 的內容站或電商站為例，常見的狀況是這樣的：第一張全螢幕促銷圖被設計成 1920×1080、單檔約 1.5 到 2.5MB，它直接被排進首屏，就會把 LCP 往後推。依這類站的典型表現幅度約落在 LCP 3.5 到 5 秒、CLS 約 0.15 到 0.3 這個區間，與 Google 給出的「良好」門檻（LCP 2.5 秒以內、CLS 0.1 以內）有一段明顯落差。更典型的狀況是，整批五到八張輪播圖在頁面一開啟就全部被瀏覽器抓下來，首屏實際只需要第一張，其餘約 80% 到 90% 的圖片流量在這個當下其實是浪費的。這個數字不是某一個特定網站的實測報告，而是業界公開個案與 Core Web Vitals 門檻推算出來的典型幅度，主要用來幫你判斷「自己的輪播有沒有落入這個區間」。誠實的限制是，實際數值會隨主機、CDN、圖片格式（WebP 或 AVIF 會明顯小於 JPG）、快取設定而大幅浮動，這個區間只能當成參考幅度，當成你網站的真實數字會失準，唯一可靠的做法是上線後用 PageSpeed Insights 在真實行動裝置實測。決策角度也很清楚：只要你的滑塊會進首屏、會被行動裝置開啟，在設計階段就要把「首圖優先載入、其餘延遲載入、指定寬高避免版面位移」這三件事寫進規格，把效能處理做在交付之前，才不會落到上線後才回頭補救的窘境。
行動端的權重又比桌面更高。Google 自 2020 年宣布走向行動優先索引（mobile-first indexing），當時已有 70% 顯示在搜尋結果的網站完成轉換，並於同年九月全面套用 [來源：Google Search Central Blog〈Announcing mobile-first indexing for the whole web〉https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for 2020-03-05]；2023 年 10 月，Google 正式宣布這項遷移已經完成，所有可在行動裝置運作的網站，都改以行動爬蟲優先檢索 [來源：Google Search Central Blog〈Mobile-first is here〉https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]。行動流量在全球佔比也已過半：2026 年第一季，行動裝置（不含平板）佔全球網站流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。這代表你設計的輪播，主要被一支手機、用 4G 訊號、在通勤路上開啟。桌面原型再順，手機載入三秒就會被使用者跳離，也會被排名機制扣分。
- 圖片先壓縮再進輪播，並指定寬高屬性，避免切換時觸發版面位移（CLS）
- 只把首屏第一張設為優先載入，其餘圖片用延遲載入（lazy load）
- 輪播腳本能延後載入就延後，不要讓它卡住主執行緒的首次繪製
- 自動播放間隔與動畫時間都要在手機上實測，桌面順不代表行動順
- 上線前用 PageSpeed Insights 或 Lighthouse 在真實行動裝置跑一次，確認 LCP、INP、CLS 三項都過門檻
這些效能原則，都應該在設計階段就先寫進交付規格，避免丟給工程師之後才補。設計師在 Figma 裡多標註一句「首圖優先、其餘延遲載入」，工程師就有明確依據，不會把整批圖片一次載完。這也呼應前面一直強調的觀念：滑塊能不能順利落地，八成在動手之前就決定了。想把效能與設計串得更緊，響應式網頁設計 RWD 觀念 值得一起看。
什麼情況不該用滑塊：輪播不是萬用解
多數教學只教你「怎麼把滑塊做出來」，很少提醒你「什麼時候根本不該用滑塊」。輪播是一個把多個訊息塞進同一塊版面的手段，它解決了空間問題，卻製造了注意力問題：使用者只看得到當下那一張，其餘全被隱藏，要靠主動點擊才會現身。研究與實務經驗反覆指向同一個結論：使用者很少主動把輪播滑到底，第一張之後的內容，曝光率會顯著下滑。這代表把重要訊息放進輪播的第二、第三張，幾乎等於把它藏起來。
- 關鍵轉換訊息不該藏進輪播：促銷活動、限時優惠、報名按鈕這類必須被所有人看到的訊息，放靜態顯眼區塊比放輪播有效
- 導覽路徑不該用輪播：選單、分類、重要連結放輪播會讓使用者找不到入口，增加跳出風險
- 需要被索引的內容不該只靠輪播：搜尋引擎爬蟲對動態載入內容的掌握較弱，關鍵文案應有靜態版本
- 資訊量大到需要逐一閱讀時不該用輪播：條列式或表格式呈現更適合長內容
- 行動首屏不該堆滿自動輪播：自動切換會和使用者的閱讀節奏打架，在 4G 環境下又增加載入負擔
判斷要不要用滑塊，可以問自己三個問題：這些內容是否同等重要、使用者是否預期會主動瀏覽全部、是否有更好的靜態版面能達成同樣目的。三個答案都偏向「是」，靜態版面通常更合適；只有當內容真的需要輪替展示、且順序不影響理解時，輪播才是合理選擇。把這個判斷做在設計之前，能省下後續反覆改版的成本。想了解版面選擇的整體邏輯，網頁版面與響應式排版攻略 提供了更完整的視角。
決策矩陣：用兩個維度選出最適做法
前面把三條路分開講，但實際選擇時往往卡在「兩種方法看起來都可以」。這裡提供一個二維矩陣，把決策拆成兩個獨立維度：縱軸是「這個滑塊會不會被重複使用與交接」，橫軸是「需不需要真正的互動動畫」。把你的需求丟進對應象限，做法幾乎就決定了。這個矩陣的好處是強迫你先回答兩個本質問題，避免被動畫效果牽著走。
| 不需要互動動畫（靜態即可） | 需要真正的互動動畫 | |
|---|---|---|
| 一次性展示、不交接 | 靜態 Frame 排列即可，連 Smart Animate 都不必 | Smart Animate 原型，門檻最低、做最快 |
| 會重複使用、要交接 | Component 搭配 Variant，但 Variant 數量少 | Component Variants 加 Interactive Component，完整方案 |
| 量大、需快速產出 | 第三方外掛排列，事後再加工 | 外掛產框架，再回 Smart Animate 或 Component 補動畫 |
用這個矩陣走一遍，會發現多數新手踩雷都落在左上與左下兩格：需求其實只是「一次性靜態展示」，卻硬開了一堆 Variant 或裝了一堆外掛，把簡單的事做複雜。反過來說，真正該走 Component Variants 的進設計系統需求，卻被當成一次性原型用 Smart Animate 打發，導致日後改一張圖全專案對不上。矩陣的價值在於把「過度設計」與「設計不足」兩種常見失誤同時暴露出來。想強化整體決策能力，設計思考方法與流程指南 與 UI Prototype 原型設計完整解析 能補上背景。
上線前檢查清單：逐條確認再交付
把前面散落的檢查點彙整成一份可逐條勾選的清單，方便在交付與上線前快速過一遍。這份清單的設計原則是：每一項都能用「是或否」回答，不留下模糊空間。任何一項答「否」，就代表還沒準備好上線，寧可補完再交，也不要帶著已知問題上路。
- 圖層命名在每個 Frame 都一字不差，Smart Animate 確實計算位移
- Component property 維度壓到最低，Variant 數量在可控範圍
- 動畫時間與 easing 落在前述區間，全篇方向一致沒有混亂切換
- 每個斷點（桌面、平板、手機）都重新檢視顯示張數
- 互動狀態齊全：default、hover、active、disabled 都有對應設計
- 觸發方式明確標註，自動播放間隔落在 3 到 5 秒並在最後一張連回第一張
- 圖片已壓縮、指定寬高，非首屏圖片採延遲載入，輪播腳本延後載入不阻塞首屏
- 交付文件附規格表、斷點行為、互動狀態，工程師不需打開 Figma 也能讀懂
- 已用真實行動裝置跑過 Lighthouse，確認 LCP、INP、CLS 過門檻
這份清單的重點在於對應到真實會出問題的環節，而非一味追求項目數量。把每一項都當成「會不會在交付那天打回原形」的檢查點，整份清單就會自然聚焦在最關鍵的細節上。落地的整套觀念，Elementor 頁面編輯器完整教學 與 網站架設與建置完整流程 都能給你更廣的對照。
用 property 取代 Variant：把狀態維度壓低的做法
前面警告過 Variant 爆炸的問題，這裡給出把狀態維度壓低的具體做法。核心邏輯是同一個：能用 property 動態切換的，就不要開實體 Variant，因為 property 是用加的、Variant 是用乘的。箭頭顯不顯示、標題顯不顯示這類「有或沒有」的二元狀態，開一個 Boolean property 就夠，不必為每種組合各開一個 Variant；標題、價格、按鈕文字這類會變動的文案，用 Text property 直接綁定，改一個值就更新，省掉為每個文案版本開 Variant；卡片裡的圖片、圖示這類可替換的子元件，用 Instance swap 在實例層替換，主元件結構保持單純。
這幾招合起來用，能把一個原本要開十幾個 Variant 的輪播，壓縮到只剩代表狀態切換的少數幾個 Variant，其餘全靠 property 動態控制。設計系統的維護成本會明顯下降，團隊套用時也更不容易出錯。這套克制哲學與 Bento Grid 創意版面配置設計 裡談的少即是多是一致的。想深入元件化，RWD 響應式電商網頁設計流程 能補上整個系統的脈絡。
Smart Animate 失效排查：症狀對照原因
| 症狀 | 常見原因 | 排除方式 |
|---|---|---|
| 卡片沒滑動，變成整片淡入淡出 | 圖層名稱不一致（差一個字、空格或大小寫） | 逐字比對兩個 Frame 的圖層名稱 [來源：Figma Help Center〈Add animations with Smart Animate〉〈https://help.figma.com/hc/en-us/articles/360040514513-Add-animations-with-Smart-Animate〉〈2026〉] |
| 名稱一致卻仍不動 | 圖層被包進不同結構（一個在 Frame 底層、一個多包一層 Group） | 把兩邊的階層結構對齊 |
| 動畫行為走另一套邏輯 | 觸發連線時誤選成 Dissolve 或 Move In | 確認互動設定裡選的是 Smart Animate |
| 要等延遲才動或根本不動 | 箭頭沒連到目標 Frame，或觸發設成 After delay 而非 On click | 重新檢查連線與觸發條件 |
| 部分圖層完全不參與動畫 | 圖層被隱藏或鎖定 | 確認要動的圖層都是可見且未鎖定狀態 |
排除完這幾項，多數 Smart Animate 失效都能解決。若還是不動，通常是檔案本身的快取或同步問題，重新整理檔案或把互動重新接一遍通常能解決。這套除錯觀念與 Figma 載入動畫與流動效果原型 裡處理動畫失效的思路是相通的。
新手做 Figma 滑塊最容易踩的雷
這幾個雷的共同特色是「發生的當下你完全不會察覺，直到交付或上線那一刻才爆開來」。做滑塊的技術門檻不高，真正的考驗是這些細節紀律。
圖層名稱沒對齊會讓 Smart Animate 退化成整片淡入淡出，做等於沒做，這是直接致命的雷 [來源：Figma Help Center〈Add animations with Smart Animate〉〈https://help.figma.com/hc/en-us/articles/360040514513-Add-animations-with-Smart-Animate〉〈2026〉]。Component property 開太多維度則是慢性病，Variant 數量指數成長，改一個細節要動十幾個地方。動畫時間超過 600ms 會讓連續點擊顯得遲鈍，水平滑動壓回 300 到 500ms 才自然 [來源：Material Design 3〈Easing and duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2026〉]。只做桌面版、手機斷點沒處理，上線後手機破版、卡片擠成一團，桌面 3 張、手機 1 張是常見配置。交付只給 Prototype 連結而沒寫規格，工程師做出來一定跟原型對不上。這幾個雷其實指向同一個源頭：開始做之前，沒先把「這個滑塊要給誰、用什麼方式實作」問清楚。問題先答了，你自然會知道哪個細節值得花時間、哪個可以放過。想避開更多網頁設計常見的坑，Divi 標題與文字排版設計 是直接的對照清單；想看排版怎麼不出錯，Divi 視差滾動效果實戰教學 與 響應式網頁設計 RWD 觀念 也很實用。
把滑塊原型展示給客戶或團隊
展示滑塊原型最直接的方式是用 Figma 的 Prototype 分享連結，在瀏覽器全螢幕播放；進階可以錄成短影片或 GIF 放進提案文件。重點是讓對方在沒有 Figma 帳號、不用懂設計工具的情況下，也能看到動起來的效果。
展示的本質是「降低觀看門檻」。客戶多半沒有 Figma 帳號，也不會操作設計工具，你寄一個 Prototype 連結給他，他要先註冊、登入、搞懂怎麼點按鈕，這中間任何一步卡住，他可能就直接放棄不看了。所以最穩妥的做法是雙保險：互動版本給會操作的人看，靜態截圖與短影片給不會操作的人看。錄製短影片或 GIF 放進提案簡報，能讓客戶點開就看到效果，零門檻。這對接案設計師特別重要，因為客戶的第一印象往往決定了案子成不成。想把展示做得更專業，作品集網站設計指南、作品集網站製作實戰教學 提供了完整的展示脈絡。
- 用 Prototype 分享連結，設定全螢幕與裝置外框呈現，讓原型像真的在裝置上跑
- 錄製 5 到 10 秒短影片或 GIF 放進提案簡報，避免客戶不會操作 Figma
- 提供互動版本加靜態截圖雙保險，應付不同審閱情境與設備
- 展示前先自己跑一次互動流暢度，避免現場卡頓或按鈕沒接好
展示時不要只讓客戶看「會動」，要同時講每個狀態對應的設計決策：為什麼這裡用 400ms、為什麼手機只顯示一張、為什麼自動輪播間隔設 4 秒。讓客戶看到的是你的判斷，不是單純的炫技。這個習慣會把客戶對你的認知從「會做動畫的人」升級成「懂設計的人」，差別很大。展示前一定要自己先完整跑一次互動流程，確認每個箭頭都有接好、每個狀態都會切換，最尷尬的就是現場 demo 卡住，那比沒有動畫還傷。展示與提案的延伸閱讀，Canva Pro 進階設計技巧 與 網頁設計靈感與參考網站 都能幫你把提案質感再拉高一階。
做完上面這些環節，你應該已經看出一件事：滑塊會不會出問題，八成在動手之前就決定了。先確認這個輪播是進提案、進設計系統，還是進開發，再決定走 Smart Animate、Component Variants 還是外掛。方法選錯，Demo 再順也會在交付那天打回原形；方法選對，動畫只有基本款一樣能落地。想再往設計系統與趨勢走，網頁設計趨勢與 AI 設計工具、Elementor Pro 作品集展示教學 都能給你下一步的方向。
Figma 滑塊效果常見問題
底下把教學與接案過程中最常被問到的問題整理出來。答案都濃縮過，用詞與正文不同，方便快速查找。若想把滑塊設計與後續的 SEO 與內容經營串接，Elementor 搭配 WordPress 與 AI SEO 實戰 提供了從設計到行銷的完整鏈路。
Figma 輪播要怎麼設定才能自動播放？
把觸發從 On click 換成 After delay 並填秒數，動畫挑 Smart Animate 或 Dissolve，末張接回首張構成迴圈就會持續切換。要留意的是，Figma 原型的自動播放只模擬行為，不會帶到上線版面，真正上線後還是由前端輪播庫的 autoplay 選項控制。若想找現成可改的輪播結構當起點，可參考 Divi 付費版型與進階模板資源。
輪播腳本延後載入要怎麼做，才不會卡住首屏？
把輪播的 JavaScript 設為 defer 或 async，或在使用者首次互動（點擊、捲動接近）時才動態注入腳本；圖片端只讓首屏第一張走優先載入，其餘用 lazy load。兩層一起做，主執行緒的首次繪製才不會被輪播拖住。實務上這層處理常被設計師遺漏，因為在 Figma 原型裡完全感受不到載入成本。
交付規格表裡最該寫清楚的是哪幾項？
除了 easing 曲線、持續時間、位移距離這類動效數值，更常被漏掉的是「互動狀態的邊界條件」：disabled 狀態長什麼樣、最後一張時右箭頭要不要消失、載入中要不要顯示骨架。把這些邊界也寫進表裡，工程師才不用在實作時回頭猜設計意圖。
Core Web Vitals 三個指標各代表什麼，滑塊主要影響哪一個？
LCP 衡量首屏最大元素完成繪製的時間、INP 衡量互動回應速度、CLS 衡量版面位移程度。滑塊首圖常是首屏最大元素，最直接影響 LCP；未指定寬高的圖片在切換時位移，則推高 CLS。
自動播放間隔設多久比較合適？
純圖片輪播約 3 秒即可，帶文字說明的卡片拉長到 4 到 5 秒較從容。判斷方式是看單張卡片資訊量：使用者需要幾秒讀完，間隔就給到幾秒，別套一個固定數字。沒有硬性規範，原則是別短到打斷閱讀、別長到使用者已經滑走。