使用者介面設計課程講義

UI/UX Design Figma

［Prototype］互動原型設計

Author

JinJin Wang

UI/UX Design Lead
December 17, 2025

Prototype｜互動原型設計｜解析

Prototype｜互動原型設計

在使用者介面（UI）設計流程中，「畫出畫面」只是完成了一半；真正決定使用體驗好壞的關鍵，在於 畫面之間如何互動、流程是否順暢、操作是否符合使用者直覺。

Figma Prototype 正是用來模擬這些「互動行為」的重要工具。 本單元將介紹如何在 Figma 中，將已完成的 UI 設計轉化為 可操作、可體驗的互動原型（Interactive Prototype），讓設計不再只是靜態畫面，而是能夠實際「點擊、切換、滑動、跳轉」的產品流程模擬。

透過 Prototype，設計師可以在進入實際開發前，提前檢視整體操作邏輯、發現流程問題，並與使用者、客戶或工程師進行更有效的溝通。相較於文字說明或靜態稿件，互動原型能更直觀地呈現產品概念，大幅降低溝通成本。

本單元將學習 Prototype 的核心概念、基本操作方式與常見互動類型，包含頁面跳轉、按鈕觸發、動畫過場與流程串接，並實際完成一個可展示的操作流程。此能力是 UI/UX 設計師在提案、測試與產品開發階段中不可或缺的專業技能。

Figma Prototype 的互動設計說明

Figma Prototype 的互動設計說明

Figma Prototype 是一套 手動、精準、可控性高的互動原型工具，主要用於：

  • 模擬真實操作流程
  • 驗證使用者體驗（UX）
  • 提案展示與使用者測試
🔹 Prototype 的核心概念是：「畫面之間的關係與行為」
Fitness Application Design & Prototypes (Community)

互動觸發方式（Trigger）

這是 Prototype 中最基本、也是最重要的概念。

figma
互動觸發方式（Trigger）
figma
互動觸發方式（Trigger）
觸發方式

說明

常見用途
On Click

點擊

按鈕跳頁
On Tap

觸控

App 操作
On Hover

滑鼠移入

Web hover 效果
While Hovering

停留

提示訊息
After Delay

延遲

Splash 畫面
On Drag

拖曳

滑動卡片

互動結果（Action）

觸發後，會產生的行為：

figma
互動結果（Action）
行為

說明

Navigate To

跳轉到另一頁

Open Overlay

開啟彈窗

Swap Overlay

切換彈窗

Close Overlay

捲動到指定位置

Change To

元件狀態切換（Variants）

動畫與過場（Animation）

Prototype 允許設定畫面切換的動畫：

figma
互畫與過場（Animation）
動畫類型

說明

Instant

無動畫

Dissolve

淡入淡出

Smart Animate

自動補間（最常用）

📌 Smart Animate 是 Prototype 的靈魂
→ 前後畫面結構相似，就能模擬真實 App 動畫。
Move In / Out

推入 / 推出

Slide

滑動

Figma Prototype vs Figma Make｜互動設計比較

Figma Prototype

Figma Prototype 適合：

  • ✔ 精細互動
  • ✔ UX 邏輯驗證
  • ✔ 使用者測試
  • ✔ 真實操作模擬
Figma Make

Figma Make 的互動概念與 Prototype 不同，它是：「由 AI 協助自動產生互動結構與流程」

Figma Make 的互動不是「一條一條拉線」，而是：

  • 用 自然語言描述互動需求
  • AI 幫你建立 Prototype 設定
  • 著重在「流程完整性」而非微動畫

常見 Make 互動指令範例 Prompt：

  • 「為此 App 建立基本互動流程，包含登入、首頁、設定頁的跳轉。」
  • 「讓所有 Primary Button 都連到下一頁。」
  • 「建立 Header 選單的導覽互動。」
  • 「為卡片點擊建立跳轉到詳細頁的互動。」

Make 會自動完成：

  • ✔ Page 之間的連結
  • ✔ 主要 CTA 跳轉
  • ✔ 基本 Overlay（如彈窗）
  • ✔ 流程方向與順序

Figma Prototype｜智能動畫範例

App Prototype｜專案互動範例

  1. Finance Management Mobile App UI UX Kit for Budget Tracker Financial Prototype Design

    2. 財務管理行動應用程式 UI/UX 工具包，適用於預算追蹤財務原型設計

    FinWise，您的一站式財務應用設計解決方案。 FinWise 為您提供全面的 UI 財務設計工具包、包含豐富 UX 財務工具的預算 UI 工具包，以及用於簡化財務管理的原型儀錶板。這套設計資源包涵蓋您所需的一切，從財務應用 UI 元素到預算介面，確保流暢的財務管理體驗。 FinWise 由 UX 原型工具包提供支持，提供儀錶板設計素材，幫助您輕鬆建立財務應用原型。

    figma
    Finance Management Mobile App UI UX Kit for Budget Tracker Financial Prototype Design
    Finance Management Mobile App UI UX Kit for Budget Tracker Financial Prototype Design
  2. iOS Food Delivery App Design and Prototyping (Community)

    3. iOS外送應用程式設計與原型製作

    figma
    iOS外送應用程式設計與原型製作
    iOS外送應用程式設計與原型製作
  3. Mobile App Prototype, Animation

    4. 行動應用程式原型，動畫

    figma
    Mobile App Prototype, Animation
    Mobile App Prototype, Animation
  4. Fitness Application Design & Prototypes

    5. 健身應用設計與原型

    健身追蹤應用程式是一款行動應用程序，旨在幫助用戶監測和管理他們的運動、健康指標和健康目標。它通常包含追蹤運動、計步、監測心率、提供營養資訊和設定健身目標等功能。

    figma
    Mobile App Fitness Application Design & Prototypes
    Mobile App Fitness Application Design & Prototypes
  5. Rentaxo | Rent Management System | Smartphone Prototype

    6. Rentaxo | 租金管理系統 | 智慧型手機原型

    figma
    Rentaxo | Rent Management System | Smartphone Prototype
    Rentaxo | Rent Management System | Smartphone Prototype

Figma Prototype｜互動原型範例

  1. High fiedlity interactive prototypes- Part 1

    2. 高保真互動原型－第一部分

    figma
    High fiedlity interactive prototypes- Part 1
  2. High fidelity interactive prototypes- Part2

    3. 高保真互動原型－第二部分

    figma
    High fidelity interactive prototypes- Part2
  3. Hacking Prototypes

    4. 這是 Figma 直播課程「辦公時間」環節的講解文件：使用疊加層、組件和框架來破解 Figma 原型。複製此文件，即可深入了解如何設定各種原型互動。直播連結： https://www.youtube.com/watch?v=jL1nfcD7m6k

    figma
    Hacking Prototypes

Prototype｜Figma 官方案例教學及說明

Figma｜Prototype｜名詞釋義

  1. 起始動作示意。
    2. figma
    起始動作示意
  2. 觸發動作示意。
    3. figma
    觸發動作示意

Prototype｜基礎教學

範例影音

FigmaPROTOTYPE 互動原型設計｜Figma官方範例操作(109-2)
可參考範例影片，或參照以下製作步驟的逐步說明，可完成基礎的頁面連結與互動。
Figma PROTOTYPE 互動原型設計｜Figma官方範例操作(109-2)
  1. 以下說明，以 Figma官方範練習檔 為解說案例。
    2. Figma官方範例完成檔作為參照。
  2. 選擇起始頁面，可由右側選單選取（如下圖），或者可自由移動藍底箭頭圖示至想要起始的頁面，作為第一頁。
    3. figma
    選擇起始頁面
    figma
    選擇起始頁面
  3. 上方的時間顯示，以及下方的固定導覽選單，都需要利用『Constraints』(約束條件)控制固定位置，並勾選『Fix position when scrolling』（滾動時固定位置）
    4. figma
    滾動時固定位置
    figma
    滾動時固定位置
  4. 當卡片式設計，超出版面範圍，製作可左右滑動的效果，可以將可滑動的全部卡片元素，包含於同一個Frame當中，再將Frame的範圍縮小至裝置寬度，即可形成滑動效果。
    5. figma
    製作可左右滑動的效果
  5. 勾選『Clip content』可將超出裝置之部分隱藏。
    6. figma
    勾選『Clip content』可將超出裝置之部分隱藏。
  6. 點選圖片（On Click(點擊)）（On Tap（輕按）） ＞ Open Overlay（開啟重疊覆蓋），連結至滿版大圖(選擇出現於置中)。
    7. figma
    點選圖片藏，連結至滿版大圖。
  7. 點選圖片上方箭頭（On Click（Tap） ＞ Close Overlay（關閉重疊覆蓋），自動關閉圖片，返回原來頁面。
    8. figma
    自動關閉圖片，返回原來頁面。
  8. 可以先將需要重複設定相同連結的部分，設為『create Component』組件，即可設定一次，其他複製即可。
    9. figma
    將需要重複設定相同連結的部分，設為『create Component』組件
  9. 點選後（On Click（Tap） ＞ Open Overlay），出現於畫面底部（或其他部位）。
    10. figma
    出現於畫面底部（或其他部位）
    Figma Prototype

Prototype｜微動畫設計範例｜以導覽列微動畫為例

範例影音

Figma PROTOTYPE 互動原型設計｜Figma MenuTab導覽列微動畫解析(109-2)

可參考範例影片，或參照以下製作步驟的逐步說明，可完成MenuTab導覽列微動畫製作，請將之應用於期末作業中。

Figma PROTOTYPE 互動原型設計｜Figma MenuTab導覽列微動畫解析
完成效果
Figma PROTOTYPE 互動原型設計｜Figma MenuTab導覽列微動畫

HomeWork｜課後作業

Figma Prototype 互動設計

  • Mockup-Example
    • 請依據期中題目繼續往下延伸。
    • 依據情緒版完成後，繼續進行設計系統色彩樣式規範。
    • 依序完成文字樣式、按鈕等設定。
    • 完成重點頁面後，進入Figma Make完成其他頁面及互動設計。
    • 持續完成所有精稿，進行發表模擬的設計。
    • 持續完成所有精稿，進行Prototype的互動設計。