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 切換動畫：

1. 建立兩個 Frame：「Tab 1 Active」和「Tab 2 Active」
2. 兩個 Frame 中都有一個名為 indicator 的底線元素
3. 在 Frame 1 中，indicator 在第一個 Tab 底下
4. 在 Frame 2 中，indicator 移到第二個 Tab 底下
5. 建立 Connection，Animation 選 Smart Animate
6. 按 Play — indicator 會自動平滑滑動到新位置

這就是 Smart Animate 的魔法：只要圖層名稱一樣，任何屬性變化（位置、大小、顏色、透明度、旋轉）都會自動產生流暢的動畫。

命名是關鍵：Smart Animate 靠圖層名稱來配對，所以務必確保兩個 Frame 中要動畫的圖層名稱完全一致。我的習慣是用前綴來標記：anim/button、anim/card。

Overlay 與 Modal 設計

Modal 彈窗是最常見的互動模式之一。在 Figma 中用 Overlay 來實作：

1. 建立 Modal Frame：獨立於主畫面，包含半透明背景遮罩和 Modal 本體
2. 設定 Connection：觸發按鈕 → Open Overlay → 選擇 Modal Frame
3. 調整 Overlay 設定：
   • Position：Centered（置中）或 Manual（手動定位）
   • 勾選「Add background behind overlay」並設定半透明黑色
   • 勾選「Close when clicking outside」讓點擊背景時關閉
4. 加入進場動畫：Move In from Bottom + Ease Out，Duration 300ms

進階技巧：如果你的 Modal 裡有表單，可以搭配 Figma Variables 來模擬不同的表單狀態（空白、填寫中、驗證錯誤）。

拖曳互動實作

拖曳互動可以模擬滑桿、卡片切換、拖放排序等常見的行動端操作。

製作一個圖片輪播（Carousel）的步驟：

1. 建立三個 Frame 代表三張卡片的狀態
2. Frame 1 顯示卡片 A 在中間
3. Frame 2 顯示卡片 B 在中間（卡片 A 往左移）
4. Frame 3 顯示卡片 C 在中間
5. 在 Frame 1 的卡片上建立 Connection：Trigger 選 On Drag → Left，Action 選 Navigate To → Frame 2，Animation 選 Smart Animate

這樣在 Preview 模式中就能用滑鼠拖曳來切換卡片了，體驗非常接近真實的手機 App。

捲動式原型設計

長頁面的捲動是最基本但也最容易被忽略的互動。在 Figma 中設定捲動：

1. 建立一個較高的 Frame（如 iPhone 尺寸 390x844）
2. Frame 內容超出 Frame 的高度（如實際內容有 2000px 高）
3. 選取該 Frame，在 Design Panel 中勾選「Clip Content」
4. 在 Prototype Panel 中設定「Overflow Scrolling」為 Vertical

進階技巧：

• 固定導覽列：將 Header 設為 Fixed Position，這樣捲動時導覽列會固定在頂部
• Sticky 效果：也可以用 Fixed Position 搭配 constraints 來實現
• 下拉更新：結合 On Drag + Smart Animate 模擬 Pull to Refresh

展示原型的專業技巧

做好原型後，展示方式也很重要。幾個建議：

1. 設定 Starting Point：在 Prototype Panel 中設定 Flow 的起始畫面
2. 使用 Device Frame：展示時套上手機外框，更有代入感
3. 準備操作腳本：提前規劃展示流程，避免現場手忙腳亂
4. 分享互動連結：用 Figma 的 Share Prototype 功能，讓利害關係人可以自己操作
5. 搭配設計規範：展示時同步說明你的 設計系統，讓開發團隊知道這些互動該怎麼實作

結語

微互動不是花拳繡腿，它是連接設計意圖和使用者感受的橋樑。一個有微互動的原型，不僅能在提案時加分，更能讓開發團隊精確理解你想要的效果。

如果你想更系統性地管理這些互動元件，推薦搭配 Figma Auto Layout 和 Figma Variables 一起使用，可以大幅提升你的設計效率。