Figma Prototype 微互動設計教學：讓你的設計原型動起來
我還記得第一次在客戶面前展示靜態 mockup 的尷尬 — 花了兩週做出精美的設計稿，客戶看完只說了一句：「所以按下去會怎樣？」從那之後，我再也沒有只做靜態設計稿了。
Figma 的 Prototype 功能讓我們能快速製作互動原型，而微互動（Micro-interaction）正是讓原型從「看起來不錯」升級到「哇這是真的嗎」的關鍵。搭配 Auto Layout 使用，效果更好。
為什麼微互動這麼重要
微互動是指那些細微的、回應使用者操作的動態效果。比如按鈕按下去的縮放、通知冒出來的動畫、開關切換的滑動。這些細節單獨看很小，但加在一起會大幅提升整體的產品質感。
Dan Saffer 在他的《Microinteractions》書中定義了微互動的四個元素：
- Trigger：觸發條件（使用者點擊、系統事件）
- Rules：互動規則（按下去會發生什麼）
- Feedback：回饋（視覺、聽覺、觸覺）
- Loops & Modes：循環與模式（重複執行、不同狀態）
在 Figma 中，我們可以透過 Prototype 功能模擬這四個元素，製作出非常接近真實產品的互動體驗。
Figma Prototype 基礎觀念
在開始之前，先搞清楚幾個核心概念：
Connection：Frame 之間的藍色箭頭，定義了從 A 畫面到 B 畫面的互動流程。
Trigger：觸發方式，包含 On Click（點擊）、On Hover（滑過）、On Drag（拖曳）、After Delay（延遲）、Mouse Enter/Leave 等。
Action：被觸發後的動作，主要有：
- Navigate To：跳轉到另一個 Frame
- Open Overlay：在當前畫面上疊加一個 Frame（適合 Modal、Dropdown）
- Swap Overlay：替換已開啟的 Overlay
- Back：返回上一個畫面
- Scroll To：捲動到指定位置
Animation：轉場動畫效果，包含 Dissolve、Move In/Out、Push、Slide In/Out，以及最強大的 Smart Animate。
Smart Animate 的魔法
Smart Animate 是 Figma Prototype 最強大的功能，沒有之一。它會自動比對兩個 Frame 中相同名稱的圖層，然後自動產生補間動畫。
舉個例子 — 製作一個 Tab 切換動畫：
- 建立兩個 Frame：「Tab 1 Active」和「Tab 2 Active」
- 兩個 Frame 中都有一個名為
indicator的底線元素 - 在 Frame 1 中，indicator 在第一個 Tab 底下
- 在 Frame 2 中，indicator 移到第二個 Tab 底下
- 建立 Connection，Animation 選 Smart Animate
- 按 Play — indicator 會自動平滑滑動到新位置
這就是 Smart Animate 的魔法：只要圖層名稱一樣，任何屬性變化（位置、大小、顏色、透明度、旋轉）都會自動產生流暢的動畫。
命名是關鍵：Smart Animate 靠圖層名稱來配對，所以務必確保兩個 Frame 中要動畫的圖層名稱完全一致。我的習慣是用前綴來標記：anim/button、anim/card。
Overlay 與 Modal 設計
Modal 彈窗是最常見的互動模式之一。在 Figma 中用 Overlay 來實作：
- 建立 Modal Frame：獨立於主畫面，包含半透明背景遮罩和 Modal 本體
- 設定 Connection：觸發按鈕 → Open Overlay → 選擇 Modal Frame
- 調整 Overlay 設定：
- Position：Centered（置中）或 Manual（手動定位）
- 勾選「Add background behind overlay」並設定半透明黑色
- 勾選「Close when clicking outside」讓點擊背景時關閉
- 加入進場動畫：Move In from Bottom + Ease Out，Duration 300ms
進階技巧：如果你的 Modal 裡有表單，可以搭配 Figma Variables 來模擬不同的表單狀態（空白、填寫中、驗證錯誤）。
拖曳互動實作
拖曳互動可以模擬滑桿、卡片切換、拖放排序等常見的行動端操作。
製作一個圖片輪播（Carousel）的步驟：
- 建立三個 Frame 代表三張卡片的狀態
- Frame 1 顯示卡片 A 在中間
- Frame 2 顯示卡片 B 在中間（卡片 A 往左移）
- Frame 3 顯示卡片 C 在中間
- 在 Frame 1 的卡片上建立 Connection：Trigger 選 On Drag → Left，Action 選 Navigate To → Frame 2，Animation 選 Smart Animate
這樣在 Preview 模式中就能用滑鼠拖曳來切換卡片了，體驗非常接近真實的手機 App。
捲動式原型設計
長頁面的捲動是最基本但也最容易被忽略的互動。在 Figma 中設定捲動：
- 建立一個較高的 Frame（如 iPhone 尺寸 390x844）
- Frame 內容超出 Frame 的高度（如實際內容有 2000px 高）
- 選取該 Frame，在 Design Panel 中勾選「Clip Content」
- 在 Prototype Panel 中設定「Overflow Scrolling」為 Vertical
進階技巧：
- 固定導覽列：將 Header 設為 Fixed Position，這樣捲動時導覽列會固定在頂部
- Sticky 效果：也可以用 Fixed Position 搭配 constraints 來實現
- 下拉更新：結合 On Drag + Smart Animate 模擬 Pull to Refresh
展示原型的專業技巧
做好原型後，展示方式也很重要。幾個建議：
- 設定 Starting Point：在 Prototype Panel 中設定 Flow 的起始畫面
- 使用 Device Frame：展示時套上手機外框，更有代入感
- 準備操作腳本：提前規劃展示流程，避免現場手忙腳亂
- 分享互動連結：用 Figma 的 Share Prototype 功能，讓利害關係人可以自己操作
- 搭配設計規範：展示時同步說明你的 設計系統，讓開發團隊知道這些互動該怎麼實作
結語
微互動不是花拳繡腿，它是連接設計意圖和使用者感受的橋樑。一個有微互動的原型，不僅能在提案時加分，更能讓開發團隊精確理解你想要的效果。
如果你想更系統性地管理這些互動元件，推薦搭配 Figma Auto Layout 和 Figma Variables 一起使用，可以大幅提升你的設計效率。