Figma 滑塊效果設計教學

Figma 滑塊效果設計教學

Figma 做出精美滑塊的關鍵不在畫面多炫，而在「把設計區塊、Auto Layout、Component 與 Prototype 互動綁成一套可重用的結構」。只要一次設好這套骨架，之後無論要展示商品、菜單或卡片輪播都能直接套用，改一處全部同步。Material Design 3 的動效指南把標準過場時長抓在約 300ms [來源：〈Material Design 3 — Duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2024〉]，這個數字正好也是 Figma 滑塊位移動畫最順手的區間；選對動畫類型、把圖層命名綁好，滑塊給客戶點一下才不會破功。

重點先看：滑塊成敗關鍵在結構而非視覺；先用 Auto Layout 包卡片、再轉 Component，最後進 Prototype 用 Smart Animate 串狀態，動畫時長守 200 至 300ms [來源：〈Material Design 3 — Duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2024〉]，一套做法能套到商品、菜單、卡片三種輪播。

接到一個要做商品輪播或菜單分頁的提案時，很多設計師會直接開三個畫面，把漸層疊一疊就送審。客戶在會議室點頭，回家自己點進 Prototype 卻發現切換生硬、動畫跳掉、甚至按了沒反應。真正的關鍵在於你做的是「靜態排列」還是「可互動滑塊」：前者只是三張圖並排，後者必須進 Prototype 把觸發、目標畫面、動畫類型一條條綁好。這篇會用一套可重用的結構走完整套流程，從單張卡片的 Auto Layout、Component 化、到 Prototype 串接與展示，讓你做完一次就能套到不同情境。若對整個工具還不熟，先回頭看 Figma 中文完整教學入門指南 打底，把 UI Prototype 原型設計的定位與 UI UX 設計觀念與實戰指南 先搞清楚，再進來做互動滑塊會踏實得多。

先分清楚三種型態，再決定怎麼綁

Figma 的「滑塊效果」泛指可左右拖曳或點擊切換的輪播互動，實務上分三型：卡片輪播、菜單或定價分頁、商品圖輪播。三型長相可能相似，分野落在「主要互動動作」上：卡片輪播重橫向位移、分頁重狀態切換、商品輪播重圖片替換。最常見的混淆是把「靜態排列」當成「可互動滑塊」，把三張卡片並排放好、加一個箭頭圖示，看起來像輪播，點了不會動就只是排列。真正的滑塊一定要進 Prototype 模式設定觸發，否則給客戶看的那一刻就破功。

滑塊型態	主要互動	Frame 數量建議	適用場景
卡片輪播	橫向位移	每張卡片一個狀態畫面	作品集、文章推薦
菜單分頁	狀態切換	每個分頁一個畫面	餐廳菜單、定價方案
商品圖輪播	圖片替換	每張主圖一個畫面	電商商品頁、相簿

決定型態後，Frame 數量與觸發方式就清楚了：卡片輪播每張卡片準備一個位移狀態畫面；菜單分頁每個分頁一個完整畫面，重點在切換時只有內容區變動；商品圖輪播最省事，主圖區一個位置、靠縮圖點擊替換。動手前先釐清這個滑塊要解決的核心需求，到底是「讓使用者一次看完很多內容」，還是「讓使用者在幾組對等資訊之間切換」，後面要綁的互動會完全不同。

型態選擇的二維決策矩陣

三種型態對設計新手來說容易混淆，把它拆成兩個維度判斷會更俐落。第一個維度是「內容數量」：要展示的項目多或寡。第二個維度是「切換目的」：是要讓使用者逐一瀏覽多個項目，還是要在幾組對等資訊之間快速比對。把這兩個維度交叉，就能鎖定最合適的型態，省下在卡片輪播與分頁之間反覆改做的時間。

內容數量／切換目的	逐一瀏覽（序列式）	對等比對（並列式）
項目多（五項以上）	卡片輪播，靠橫向位移逐張呈現	分頁切換，用 Tab 或縮圖切換內容區
項目少（三至四項）	商品圖輪播，主圖配縮圖替換	直接並排展示，通常無需滑塊

這張矩陣的最大用途，是幫你在提案初期就排除「明明只要並排卻硬做輪播」的過度設計。很多設計師把輪播當成炫技手段，三張卡片也要做成滑塊，結果使用者要點三次才看完全部資訊，體驗反而退化。項目少又需要並列時，靜態排版往往比滑塊更清楚，這個判斷在動手前先做，能避免把時間花在不需要的互動上。

決定要做哪一型之前，若版面骨架還沒想清楚，可先參考 Wireframe 線框稿設計教學 把滑塊在頁面上的落點先定好；想用更結構化的版面搭配滑塊，Bento Grid 網頁排版設計 是值得評估的方向。

開工前的骨架工程

做滑塊前，先用 Auto Layout 把單張卡片包成可伸縮的容器，再轉成 Main Component。這樣後續複製狀態、調整間距都不會牽一髮動全身，這一步決定了滑塊能不能被重複使用。Auto Layout 會自動處理內部元素的對齊與間距，這層保險比任何特效都重要。

這一步之所以關鍵，在於滑塊一定會被複製成多個狀態畫面，每個畫面裡的卡片結構若不一致，Smart Animate 補間就會崩掉。Auto Layout 等於是把「結構一致性」這件事用工具鎖死，不靠記憶；轉成 Main Component 之後，後續用 Instance 複製，改主元件時所有副本同步更新，這就是「一套做法可重用」的核心。根據 Figma 官方文件的說明，Auto Layout 提供了 Gap、Padding 與 Resizing 三組主要設定，把這三組調對，卡片在桌面與手機之間伸縮才不會跑位。實務上常見的狀況是設計師急著進 Prototype 玩動畫，底層卡片結構沒固定，做到一半發現每張卡片寬度都差幾 px，Smart Animate 補間整個抖，只好整組重畫。這一步最無聊也最容易被跳過，卻決定後面三步會不會崩。

卡片內的元素該怎麼安排，把對齊規則定清楚即可，重點是間距與層級一致；配色還沒定案時，色彩學與配色技巧指南 能幫你把主色先選出來，中文字型要避免在 Prototype 裡糊掉可翻一下 中文字體設計與推薦字體。卡片內若有圖示，Figma 圖示外掛免費 Icon 匯入 能省下找素材的時間，配圖需求則從 商用免費圖庫網站總整理 挑選。

Component 與 Variant 命名規範：讓 Smart Animate 找得到對應圖層

命名看似瑣碎，卻是 Smart Animate 能不能順利補間的決定因素。Smart Animate 的運作邏輯是比對兩個畫面中「名稱完全相同」的圖層，一旦名稱出現任何差異，補間就會退化成淡入淡出。換句話說，命名規範直接決定動畫能否成立，屬於技術前提而非美觀問題。把命名規則在骨架階段就定下來，後面所有狀態畫面都遵循同一套規則，能從源頭消除補間失敗的風險。

實務上有兩層命名要顧。圖層命名指的是卡片內部的每一個元素，例如圖片、標題、副標、按鈕，都要有固定且語意清楚的名稱，避免 Layer 1、Frame 23 這類自動產生的預設值；同一張卡片複製成多個狀態時，內部圖層名稱必須一字不差，主元件則集中放在獨立的 Component 頁面、與展示用畫面分開，避免展示過程誤改。Variant 命名則是 Component 的屬性組合，用 `屬性=值` 的格式表達狀態，例如 `state=active`、`state=next`、`device=desktop`、`device=mobile`，狀態值通常固定一組枚舉（active、next、prev、disabled）。Variant 命名的好處是 Prototype 能依屬性切換狀態，設計端也能一眼看出這個實例處於哪種狀態，方便後續維護與交接。

把命名規範套用到團隊協作時，價值會更明顯。多人共同編輯同一份 Figma 檔案，若每個人隨意命名，Smart Animate 幾乎一定崩，交接時也無法判斷哪個圖層對應哪個狀態。統一的命名規則等於把「這個圖層是什麼、處於什麼狀態」這層資訊寫進檔案結構裡，後續接手的人不用猜測就能理解。命名規範與 Figma 網格系統與排版設定 裡的結構化思維是同一條線，都是用規則降低人為失誤。

用具體例子最能看出命名規範的價值。假設做一個三張卡片的商品輪播，主元件命名為 `Card / Product`，內部圖層分別是 `thumb`（縮圖）、`title`（品名）、`price`（價格）、`cta`（按鈕）。複製出來的三個狀態畫面，內部圖層名稱維持 `thumb / title / price / cta` 一字不動，只在 Variant 上標 `state=slide1`、`state=slide2`、`state=slide3`。Smart Animate 比對時會發現三個畫面的 `thumb` 是同一個圖層、只是位置位移，於是順利補間；一旦有人把第二張的縮圖改名成 `thumb 2`，補間當場失效，畫面退化成淡入淡出。它把「動畫會不會順」這件事，從靠記憶變成靠結構。

Figma 滑塊核心步驟：從設計區塊到 Prototype 串接的完整流程

整套流程可拆成四步：建立設計區塊、複製成多個狀態畫面、進 Prototype 模式綁定觸發、選對動畫類型預覽。每一步都有判斷點，照順序做才不會設定錯誤。前面地基打好了，這四步其實跑得很快。

步驟拆解的好處是，每一步都有一個可驗證的產出。Step 1 做完要看到一張完整的單卡，Step 2 做完要看到多個位移不同的畫面，Step 3 做完要看到 Prototype 面板上一條條連線，Step 4 做完要能在 Present 模式點出順暢滑動。任何一步沒達標，先回頭修那一步，不要往下硬做，否則錯誤會一層層疊上去。

Step 1：建立主卡片與內容

先把視覺做到定位再進互動。一張卡片含圖片、標題、副標、按鈕，全部用 Auto Layout 包好，設定 Gap 與 Padding。這張卡就是後面所有狀態的母版，所以視覺細節要在這一步定案，不要等到 Prototype 階段才回頭改配色，每改一次就要連動調整多個狀態畫面。

Step 2：複製 Frame 作為不同滑動狀態

把整組輪播容器複製成多個 Frame，每個 Frame 裡的卡片位移位置各不同。例如第一張卡片在左、第二張往右移一格、第三張再移一格，模擬滑動過程中的不同瞬間。關鍵是卡片本身的結構與命名完全不動，只動整組容器的水平位移，這樣 Smart Animate 才有辦法比對並補間。

Step 3：進 Prototype 模式用 On click 連接

切到 Prototype 面板，把箭頭按鈕或卡片本身用 On click 連到下一個狀態畫面，指定目標 Frame。根據 Figma 官方文件的說明，On click 是最基礎的觸發條件，可指定目標畫面與轉場動畫。連線方向就是使用者動線，方向接反是新手最常踩的雷，連完務必逐條檢查。

Step 4：動畫類型選 Smart Animate 處理位移

位移類的滑塊首選 Smart Animate，它會比對兩個畫面中相同名稱的圖層並自動補間，位置、尺寸、顏色都會算出中間帧。選完動畫類型，按下右上角 Present 逐條預覽，確認每條連線觸發正確、滑動方向沒有接反，整套滑塊才算完成。

步驟	動作	判斷點	常見錯誤
Step 1	建立主卡片與內容	視覺定案、Auto Layout 包好	邊做互動邊改配色
Step 2	複製成多個狀態畫面	只動位移、結構不動	連卡片命名都改了
Step 3	Prototype 用 On click 連接	連線方向等於動線	方向接反、目標指錯
Step 4	動畫選 Smart Animate 預覽	Present 點出順暢滑動	選錯動畫類型導致卡頓

把按鈕本身的微互動也設計進去，能讓滑塊體驗更完整，這部分可參考動態按鈕的過場做法與 CTA 行動呼籲按鈕設計指南；想讓輪播視覺更有層次，Figma 視差效果互動設計 是可搭配的進階特效。想加速產出，Figma 新手必裝外掛推薦 能幫你省下大量重複操作。

三種動畫類型的本質差異與取捨

滑塊位移首選 Smart Animate，它能自動補間位置與大小變化；若只是簡單切換可用 Move In，淡入淡出用 Dissolve。選錯動畫類型是滑塊看起來卡頓的最大元兇，比時長沒調好還致命。

這三種動畫的本質差異要先弄清楚。Smart Animate 會比對兩個畫面中相同圖層名稱的元素，計算位置、尺寸、顏色、透明度的中間帧，是唯一能做出「真的滑動」的選擇。Move In 或 Move Out 只是把整個畫面從某個方向推進或推出，輕量但變化少。Dissolve 是單純的淡入淡出，適合狀態切換、不適合連續輪播。根據 Figma 官方文件的說明，Smart Animate 在找不到可對應圖層時會自動退化成 Dissolve，所以圖層命名一不一致，會直接反映在動畫順不順上。

動畫類型	運作原理	適合場景	不適合場景
Smart Animate	比對同名圖層自動補間	連續位移、卡片輪播	圖層命名混亂時
Move In / Move Out	整個畫面方向位移	簡單切換、分頁	需要細緻補間的輪播
Dissolve	淡入淡出	狀態切換、圖片替換	連續橫向輪播

動畫時長建議落在 200 至 300ms 之間，這是業界動畫節奏經驗與 Material Design 3 動效指南相近的區間 [來源：〈Material Design 3 — Duration〉〈https://m3.material.io/styles/motion/easing-and-duration〉〈2024〉]。過長會拖、過短會跳；低於 150ms 容易被視為瞬切，超過 500ms 則會被感受為延遲。較穩當的配對是位移動畫設 300ms、按鈕回饋設 200ms，兩者節奏一致，使用者才不會覺得哪裡卡。緩動曲線的部分，多數狀態轉換選 Ease In Out，兩頭慢、中間快；若要強調「滑到定位」的收束感，最後一段可改 Ease Out。

把三種動畫類型整理成判斷準則，只要回答一個問題就能定案：這段切換需要「同一個元素從 A 位置移到 B 位置」的連續位移嗎？需要就選 Smart Animate，因為只有它做圖層級補間；只是整個區塊方向性進出，就退到 Move In／Move Out；只是視覺內容替換，Dissolve 的淡入淡出最乾淨。選錯的本質，是用淡入淡出去偽裝位移、或用方向推進去偽裝補間，視覺節奏因此對不上使用者的動作預期，卡頓感多半由此而來。

讓滑塊自己跑：無限循環與自動播放

Figma 滑塊可以做到自動播放與無限循環，靠 After delay 觸發自動播放、並把最後一張的目標指回第一張達成循環。不過要提醒的是，Figma Prototype 是展示用的互動模擬，不等於上線後的網頁行為，展示時要對客戶說明。

自動播放的原理很直覺。在某個狀態畫面的觸發條件選 After delay，設定例如 2000ms，時間一到就自動切到下一張，模擬輪播自動跑的效果。根據 Figma 官方文件的說明，After delay 可在指定毫秒後自動觸發目標畫面。要做到無限循環，只要把最後一張畫面的 On click 或 After delay 目標指回第一張，整個迴圈就接起來了，這個手法在做首頁 Hero 輪播、商品展示時特別好用；進階還可用條件式互動（Variables）控制目前索引，做更複雜的邏輯。不過要提醒的是，Figma Prototype 是展示用的互動模擬，不等於上線後的網頁行為，實際上線仍需開發實作。

做無限循環前值得先問：這個滑塊真的需要自動播放嗎？自動播放會搶走使用者對頁面其他內容的注意力，在內容導向的頁面反而會扣分。商品圖輪播適合手動點擊、首頁 Hero 才適合自動播放。沒想清楚就加自動播放，是很多設計師交件後被客戶嫌「太吵」的原因；這個取捨與 設計思考五步驟指南 裡強調的「先定義問題再動手」是同一個道理。想把滑塊做成更完整的互動系統，可結合 Figma 響應式設計行動版排版 處理多裝置。

滑塊的效能與轉換：設計階段就該想清楚的落地影響

滑塊在 Figma 裡做出來只是原型，真正上線後承擔的是載入效能與轉換率的壓力。很多設計師把原型做得很順，移交開發後卻發現實際網頁卡頓、圖片載入慢、滑動掉帧，原因多半是設計階段沒有把效能條件納入考量。效能應該是設計的輸入條件之一，在設計階段就標清楚，才能讓原型與上線結果更接近。

有三個面向值得在設計階段就標註清楚。圖片資源方面，商品圖輪播通常需要多張高解析主圖，每張都要壓縮與設定延遲載入（loading="lazy"），避免一次載入全部拖慢首屏。動畫實作方面，CSS transition 與 transform 比 JavaScript 動畫輕量，位移類滑塊移交開發時應註明優先用 transform 實作，讓動畫跑在合成層、不阻塞主線程。觸發頻率方面，自動播放輪播若間隔太短，會讓瀏覽器持續運算動畫，耗電又影響效能，建議間隔不少於 3 秒。這幾點寫進交付文件的規格欄位，開發端才有依據照做。

把這些條件落成交付規格，可參考一個具體的標註格式：每張商品主圖標註「WebP 或 AVIF、單張 200KB 以內、首屏外延遲載入」；位移動畫標註「transform: translateX、transition 300ms ease、不用 JS 驅動」；自動播放標註「間隔 4 秒、可手動暫停、尊重 prefers-reduced-motion」。這組規格的角色是給設計與開發一個共同的對話基礎，數字本身可調整。實際壓縮目標會依主圖尺寸與數量浮動，但把「圖片多大、動畫怎麼跑、輪播多快」三件事白紙黑字寫下來，移交時的認知落差就會大幅縮小。

效能對轉換的影響有具體案例可循。Google 的 web.dev 收錄多家企業導入 Core Web Vitals 優化後的成果，其中零售商 Rakuten 24 投入 Core Web Vitals 優化後，每位訪客的營收提升 53.37%，轉換率提升 33.13%；電信商 Vodafone 把最大內容繪製（LCP）改善 31%，帶動銷售提升 8%；旅遊平台 redBus 改善互動到下一幀繪製時間（INP）後，銷售提升 7% [來源：web.dev Why does speed matter〈https://web.dev/articles/why-speed-matters〉]。其中 INP 衡量的正是使用者點擊到畫面回應的延遲，與滑塊點擊切換的回應手感直接相關，這也說明為什麼動畫移交開發時要註明優先用 transform 跑在合成層、避免阻塞主線程。設計端把圖片延遲載入、動畫輕量化這些條件寫進規格，等於在設計階段就替轉換打底。

把上述數字放回台灣常見的情境裡看，會更具體。以一個月流量約數萬到十幾萬、商品圖輪播放在首屏的電商或內容站為例，這類網站常見的狀況是：滑塊用了五到八張未壓縮的高解析主圖，單張落在約 400 至 800KB，首屏一次載入就把 LCP 拉到約 3.5 至 4.5 秒；同時輪播切換靠 JavaScript 驅動位移，點擊下一張時 INP 落在約 250 至 350ms，正好卡在 Core Web Vitals 把「良好」門檻設在 200ms 之外的邊緣地帶。依這類站的典型表現幅度，光是把主圖壓成 WebP 或 AVIF、單張控制在約 150 至 200KB，並把位移改用 transform 跑在合成層，LCP 通常能往下壓到約 2.0 至 2.8 秒、INP 回到約 120 至 180ms，落在良好區間內。這組數字是公開的效能門檻搭配常見幅度，不是某一個實測報告，實際值會依主圖尺寸、數量與伺服器條件浮動。這條路的限制在於：這些改善只在設計端把規格寫清楚還不夠，開發端若沒照著把圖片壓縮與延遲載入實作進去，原型再順也不會反映在上線數字上。設計師在交件時與其只給動畫時長，不如直接把「單張主圖約 150 至 200KB、首屏外延遲載入、位移用 transform 不用 JS 驅動、自動播放間隔不少於 3 秒」這幾條寫進交付規格，讓設計與開發在效能這件事上有共同的對話基礎，原型與上線結果的落差才會縮小。

效能面向	設計階段的動作	對落地的影響
圖片資源	標註壓縮格式與延遲載入	降低首屏載入時間，改善 LCP
動畫實作	註明優先用 transform 與 transition	減少主線程阻塞，滑動更順
自動播放頻率	間隔設在合理區間，避免過密	降低持續運算的耗電與掉帧
互動回應	點擊回饋時長守在 200ms 內	改善互動到下一帧繪製的時間

把效能條件寫進規格的同時，也要對客戶說明原型與上線的落差。Figma Prototype 跑在設計工具的環境裡，沒有真實網路的載入延遲，客戶在原型看到的順暢不等於使用者實際體驗。主動在交件時標註哪些互動需要開發特別處理、哪些圖片需要壓縮，能降低上線後的期待落差，也讓設計與開發之間的溝通更精確。

手機版與響應式：滑塊在不同螢幕怎麼不破版

手機版滑塊的重點是寬度改用滿版或固定比例、間距縮小、並用 Auto Layout 的 Resizing 讓卡片自適應。切忌直接把桌面版縮小，會導致內容擠成一團、按鈕點不到。手機版不是桌面版的縮小版，而是另一個要重新思考的版面。根據〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉，2026 年第一季行動裝置（不含平板）占全球網站流量的 52.27%（https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/，2026-04-28），也就是超過一半的使用者第一次看到的滑塊會是手機版，桌面版縮小套用等於直接讓多數訪客體驗破版。

具體做法是這樣的。卡片寬度改用 Fill container 或固定比例（例如螢幕寬度的八成），讓它隨螢幕伸縮；Auto Layout 開啟 Resizing，內部元素跟著容器變大變小；間距與字級同步縮小，維持視覺節奏，桌面上看起來舒服的 24px 間距，到手機上可能要降到 12px 才不會擠。觸控熱區也要顧，按鈕可點擊範圍別小於 44px，否則手指點不準。根據 Figma 官方文件的說明，Auto Layout 的 Resizing 分為 Hug、Fill、Fixed 三種模式，把這三種模式搭配對，卡片在不同螢幕才會自適應；若桌面與手機差異太大，可用 Variants 另開一組手機版狀態，兩端各自獨立。

項目	桌面版建議	手機版建議
卡片寬度	固定寬度（如 320px）	Fill container 或八成螢幕寬
卡片間距	24px	12 至 16px
標題字級	20px	16px
觸控熱區	滑鼠為主，不限	不少於 44px
Resizing	Fixed	Fill / Hug 搭配

手機版要特別留意橫向滑動的手勢衝突。若滑塊佔滿螢幕寬度，使用者往下滑頁面時可能會被滑塊攔截、卡住捲動。解法是讓滑塊高度適中、不要佔滿整個視窗高度，或加上明顯的左右箭頭按鈕，讓使用者知道這裡是點擊切換而非拖曳。

展示給客戶看的正確方式

滑塊做好後，最直接的展示方式是用 Figma 的 Prototype 分享連結，對方打開瀏覽器就能點擊互動，免對方有 Figma 帳號。進階可指定裝置預覽讓客戶更有臨場感，並在連結設定中開啟顯示原型介面方便導覽。

根據 Figma 官方功能說明，Prototype 分享連結可在 Share 面板一鍵產生，並可設定任何人都可檢視的權限。設計師不用把原始檔交出去，只給一個連結，客戶點開就是可互動的原型。進一步可用 Presentation view 全螢幕展示，或套上裝置外框（如 iPhone、Pixel）讓客戶看到滑塊在真實裝置上的樣子，臨場感會大幅提升；先套上手機外框再分享，比起直接給一個空白白板，客戶對「成品會長這樣」的理解通常更到位。展示前務必自己先走一次完整動線，把每條連線、每個觸發、每個狀態都點過一遍，確認沒有斷頭或接錯，否則客戶當場點下去沒反應是最難補救的展示失誤。

展示完之後，若客戶要上線，下一步就是把原型移交給開發。Figma Prototype 不能直接變成網站程式碼，開發端要用 CSS transition 或輪播程式庫重新實作。若網站是用 WordPress 頁面編輯器搭建，可參考 Elementor 圖片輪播效果教學，這些工具都內建輪播模組，能省下不少手刻工。

三個常見地雷與排查順序

Figma 滑塊最常出錯的點集中在三處：觸發沒綁到正確畫面、圖層命名不一致導致 Smart Animate 失效、動畫時長設太短。排查時先檢查連線、再對齊圖層名稱、最後調整時長，這三個動作通常就能解決大部分問題；這些狀況幾乎都源自「結構沒綁乾淨」，動畫本身通常是無辜的。與其在問題發生後才回頭救，更實用的做法是交件前跑一次「滑塊健康度自檢」，結構問題會在 Prototype 階段集中爆發，越早攔截越省事，整份跑完十分鐘以內。

症狀	最可能原因	排查步驟
點了沒反應	觸發沒綁或目標指錯	逐條檢查 Prototype 連線，留意畫面複製後連線指到舊 Frame
動畫像切幻燈片	圖層命名不一致	比對兩畫面圖層名稱，複製狀態後勿重命名內部圖層
動畫瞬切太跳	時長低於 150ms	調回 200 至 300ms
Prototype 卡頓	觸發過多、檔案圖層數過多	精簡不必要的連線，只留核心動線
手機版擠成一團	直接縮小桌面版	改 Fill container 並縮間距

滑塊會出問題，源頭通常在前面那套結構沒綁乾淨，動畫參數反而是次要因素。Auto Layout 沒包好、Component 沒做、圖層命名亂掉，這些底層問題會在 Prototype 階段一次爆發出來。與其在 Prototype 面板裡反覆調參數，不如回去把結構重新檢查一次，往往調完動畫就順了。

進階技巧：Variables、條件式互動與多語系狀態

基礎滑塊靠 On click 與 Smart Animate 就能完成，進階需求則要借助 Variables 與條件式互動。Variables 讓你把「目前是第幾張」「是否自動播放」這類狀態存成變數，配合條件判斷做出更複雜的邏輯，例如點擊最後一張時自動跳回第一張、或在特定張數顯示不同內容。這層控制力是單純連線做不到的，能把滑塊從「輪流展示」升級成「有狀態的互動系統」。

Variables 的常見應用是追蹤目前索引：設定一個數字變數記錄目前顯示第幾張卡片，每次點擊下一張就把變數加一，再用條件判斷決定目標畫面，邏輯集中、可讀性高，比靠多條連線硬接更清楚；布林變數則用來管理是否自動播放、是否顯示特定區塊。另一個應用是多語系狀態，把語系存成變數，切換語系時一次更新所有文字內容，避免每種語系都要重做一整套畫面，在多國市場的提案特別實用。Variables 也可與 Component 屬性綁定，讓狀態切換更自動化。

進階技巧的代價是學習曲線與維護成本。Variables 與條件式互動的設定比單純連線複雜，團隊成員不熟悉時容易設錯，建議在專案裡把變數命名、條件規則寫成文件，讓接手的人能快速理解邏輯。是否採用進階技巧，取決於需求複雜度：簡單的三張卡片輪播用基礎連線就夠，多語系或需狀態追蹤的情境才值得引入 Variables。把工具複雜度與需求匹配，才不會為了進階而進階。

把上述差異整理成「滑塊成熟度四級」，能幫助團隊判斷當前需求落在哪一級、該投入多少工程。一級是靜態並排，無 Prototype、純視覺排列，適合三張以內的對等資訊；二級是基礎可互動，On click 加 Smart Animate 串狀態，能回應使用者的點擊，是大多數提案的合適落點；三級是狀態化系統，引入 Variables 做索引追蹤與自動播放，適合多語系或需循環的展示；四級是無障礙與效能齊備，鍵盤動線、替代文字、暫停控制、圖片延遲載入全部寫進規格，才算真正可上線。多數專案停在二級即可，三級以上的複雜度必須有真實需求支撐，否則只是把維護成本往後延。

無障礙與可用性：滑塊不能只有看得見的人能用

滑塊是高度依賴視覺與滑鼠操作的元件，對鍵盤使用者與螢幕閱讀器使用者往往不友善。設計階段把無障礙條件納入，能讓滑塊在上線後服務更廣的使用者群，也降低後續法規遵循的風險。無障礙不是開發端獨自承擔的責任，設計端在規格裡標註清楚，開發才有依據實作。

有幾個面向要在設計規格寫清楚。第一是鍵盤操作，滑塊的上一張、下一張按鈕必須能用 Tab 聚焦、Enter 或方向鍵觸發，不能只有滑鼠點擊。第二是焦點視覺，聚焦中的按鈕要有清楚的焦點框，顏色對比要足夠，讓鍵盤使用者看得到目前位置。第三是螢幕閱讀器，每張卡片要有語意化的標題與替代文字，讓閱讀器能朗讀內容，縮圖則要有描述性的替代文字而非檔名。第四是暫停控制，自動播放輪播要提供暫停按鈕，讓需要更多時間閱讀的使用者能停下來。

無障礙面向	設計規格要標註的內容
鍵盤操作	按鈕可 Tab 聚焦、Enter 與方向鍵觸發
焦點視覺	聚焦框清晰、對比足夠
螢幕閱讀器	卡片標題與圖片替代文字具語意
暫停控制	自動播放提供暫停按鈕
動作偏好	尊重使用者減少動態的系統設定

這些條件寫進規格欄位，等於把無障礙從事後補救變成設計輸入。Figma Prototype 本身對無障礙的支援有限，主要仍是展示用途，但設計端標註清楚鍵盤動線、替代文字、暫停控制，開發端才有明確的實作依據。把無障礙與 UI UX 設計觀念與實戰指南 裡強調的使用者中心思考結合，能讓滑塊在美觀之外也具備可用性。

Figma 滑塊成敗的關鍵不是視覺多炫，而是有沒有把設計區塊、Auto Layout 與 Prototype 互動綁成一套可重用的結構。綁好結構，一套做法能套到商品、菜單、卡片三種輪播；選對動畫類型、把時長守在 200 至 300ms，展示時給客戶一個分享連結就能點出順暢滑動。Prototype 是展示用的互動模擬，不等於上線後的網頁行為，這個期待落差務必在交件時說清楚。

常見問題 FAQ

Figma Smart Animate 和 Move In 有什麼差別？

Smart Animate 會比對兩個畫面中相同名稱的圖層，計算位置、尺寸、顏色的中間帧，能做出真正的滑動感；Move In 只是把整個畫面從某個方向推進，不做圖層級補間。需要細緻位移就用 Smart Animate，簡單切換才用 Move In。圖層命名對齊的原則，與 CSS Box Model 間距與邊框觀念 裡的結構思維相通。

Figma 滑塊怎麼做到無限循環？

把最後一張畫面的觸發目標指回第一張就接成迴圈。若要自動播放，在每張畫面用 After delay 設定例如 2000ms 自動切到下一張，最後一張再指回第一張，即可做出自動跑的無限輪播。不過 Prototype 是展示用，上線仍需開發實作，Lottie 動畫設計與應用 是落地的選項之一。

Figma 滑塊常見錯誤有哪些？

三大地雷：觸發沒綁到正確畫面（點了沒反應）、圖層命名不一致導致 Smart Animate 退化成 Dissolve（動畫像切幻燈片）、動畫時長低於 150ms（瞬切太跳）。排查順序是先檢查連線、再對齊圖層名稱、最後調時長，更多排查觀念可看 Figma 載入動畫原型互動教學。

Figma 滑塊如何用 Variables 做狀態追蹤？

設定一個數字變數記錄目前顯示第幾張，每次點擊下一張就把變數加一，再用條件判斷決定目標畫面，邏輯會比靠多條連線硬接更清楚。布林變數也能用來管理是否自動播放、是否顯示特定區塊。Variables 適合多語系或需要狀態追蹤的複雜情境，簡單的三張卡片輪播用基礎連線就夠，不必為了進階而進階。

Figma 滑塊要做哪些無障礙處理？

主要四項：上一張下一張按鈕要能鍵盤 Tab 聚焦與方向鍵觸發；聚焦時有清晰的焦點框與足夠對比；每張卡片與圖片要有語意化標題與替代文字供螢幕閱讀器朗讀；自動播放要提供暫停按鈕。這些條件要寫進交付規格，開發端才有依據實作。Figma Prototype 本身對無障礙支援有限，設計端標註清楚能讓上線結果更接近可用標準。