# 什麼是 Figma 原型

* 原型是一個可互動的產品設計呈現方式
* Figma 原型可生成連結，分享給其他人互動查看
* 大型產品可能有複雜頁面與互動
* 核心互動包含頁面垂直滾動、元件水平滾動、跨頁互動、彈出互動

# 建立基本原型

* 在 Figma 建立新檔案，命名為 Prototype Practice
* 建立 Frame，大小依手機尺寸設定
* 建立首頁 Wireframe
* 頂部矩形代表 App Header
* 設置深灰色填充增加對比
* T 鍵新增文字框，輸入 Header
* 複製 Header 移至底部代表 Tab Bar
* R 鍵建立三個矩形代表 Tab Bar Icons
* R 鍵建立卡片矩形，複製形成三張卡片

# 預覽與分享原型

* 點選 Prototype 頂部右側，設定裝置為手機尺寸
* 選取整個 Frame，點擊播放圖示
* 點選 Share Prototype 可生成連結分享給他人

# 頁面垂直滾動

* 調整 Frame 延長頁面長度
* 複製卡片填滿整個頁面
* 回到 Prototype 頁面，即可垂直滾動整頁
* 設定固定位置可讓 Header 與 Footer 不隨頁面滾動
* Footer 選取後 Group Selection，選擇 Constraints 底部並勾選 Fixed Position
* Header 選取後 Group Selection，勾選 Fixed Position

# 元件水平滾動

* 調整第一張卡片變窄，複製更多卡片排列
* 選取所有上方卡片，拉出 Frame 外
* 選取所有卡片，右鍵選 Frame Selection
* 將新 Frame 拖回手機 Frame
* 調整 Frame 尺寸，勾選 Clip Content
* 在 Prototype 中開啟 Horizontal Scrolling

# 水平滾動操作總結

* 將水平區塊建立為 Frame
* 調整 Frame 尺寸
* 開啟 Clip Content
* 在 Prototype 設定 Horizontal Scrolling

---

# 建立跨頁互動

* 將頁面命名為 Page One，複製頁面並調整元素創建新頁面
* 保留 Header 與 Footer，其餘元素可調整或重新建立矩形
* 在 Prototype 模式下選取圖示，拖拉連接點到另一頁以建立導航互動
* 可重複操作讓使用者點擊圖示在不同頁面之間切換
* 另一種方法：選擇圖示後點擊 Plus Icon 添加互動，設定 Navigate To 目標頁

# Overlay 效果

* 建立新框架（小於手機螢幕），用矩形代表頁面
* 選取圖示，拖拉到新框架並將互動設定為 Open Overlay
* 可進一步設定「Add Background Behind Overlay」及「Close When Clicking Outside」
* 可在 Overlay 頂端圖示設定 Close Overlay 以關閉模態

# Figma 使用技巧

* 安裝 Figma 手機 App 並使用 Mirror，可在手機上實際操作原型
* 使用 Component 節省時間：將共用元件拖出框架建立主元件，再複製至其他頁面，修改主元件會自動更新子元件
* Shadow 使用者：開啟原型連結並分享給測試者，可即時觀看使用者操作

# 作業與練習建議

* 挑戰：建立至少五頁的最愛 App 原型
* 完成後可在評論區分享原型連結，並互相提供回饋
* 推薦觀看其他 Figma 教學系列，例如 Components 與 Auto Layout 深入教學

---

# Terminology
* 原型（Prototype）：互動式產品設計的可操作模型
* 共享鏈接（Share Link）：Figma 原型可供他人訪問的網址
* 頁面級垂直滾動（Page-Level Vertical Scroll）：整個頁面可上下滾動
* 元件級水平滾動（Component-Level Horizontal Scroll）：單一元件區域可左右滾動
* 跨頁互動（Cross-Page Interaction）：從一個頁面點擊元素跳轉至另一頁面
* 覆蓋層（Overlay）：浮層效果，可顯示在現有頁面之上
* 固定位置（Fixed Position）：元素在滾動頁面時保持固定位置
* 框架選擇（Frame Selection）：將多個元素轉換為框架
* 裁切內容（Clip Content）：限制框架內超出部分的顯示
* 元件（Component）：可重用的設計元素
* 子元件（Instance/Sub-Component）：從主元件生成的副本，自動同步更新
* 原型模式（Prototype Mode）：Figma 中設定互動效果的模式
* 互動觸發（Interaction Trigger）：開始互動的元素或操作
* 點擊（Click）：常用的互動觸發方式
* 打開覆蓋層（Open Overlay）：點擊元素後顯示覆蓋層
* 關閉覆蓋層（Close Overlay）：關閉覆蓋層的操作
* 背景遮罩（Overlay Background）：覆蓋層背後的半透明背景
* 自定義滾動（Custom Scroll）：指定區域或元件可滾動
* 手機畫面模擬（Mobile Device Frame）：依手機尺寸設計的畫布框架
* 樣板頁（Wireframe Page）：用於原型設計的低保真結構
* 文字元素（Text Element）：可輸入文字的設計元件
* 長方形元素（Rectangle Element）：基本形狀，用於表示卡片或按鈕
* 標題欄（Header）：頁面頂部的固定元素
* 導覽欄（Tab Bar）：頁面底部的固定導航元素
* 原型播放（Play Prototype）：預覽設計互動效果
* Figma Mirror：在手機上即時查看原型
* 元件互動（Component Interaction）：為元件內元素添加操作跳轉
* 複製貼上（Copy & Paste）：在頁面間或元件間複製元素
* 框架尺寸調整（Frame Resize）：更改框架大小以適配內容
* 多頁原型（Multi-Page Prototype）：包含多個頁面的互動原型
* 元件組合（Group Selection）：將多個元素組成一個單元
* 對齊工具（Alignment Tools）：調整元素在畫布中的位置
* 滑動區域（Scrollable Area）：可滾動顯示內容的區塊
* 互動連線（Prototype Connection）：將元素與目標頁面建立跳轉
* 點擊觸發（On Click）：點擊元素時觸發操作
* 拖拉點（Drag Node/Dot）：Figma 原型模式中建立連線的控制點
* 自動佈局（Auto Layout）：自動排列元素的 Figma 功能
* 交互細節（Interaction Details）：設定互動的行為與屬性
* 背景遮罩顏色（Overlay Background Color）：覆蓋層背景色設定
* 點擊外部關閉（Close When Clicking Outside）：點擊覆蓋層外部關閉效果
* 多頁導航（Multi-Page Navigation）：在不同頁面之間跳轉的設計方式
* 原型測試（Prototype Testing）：讓使用者操作原型以收集反饋
* 影子用戶（Shadow User）：實時觀察使用者操作原型的功能
* 原型優化（Prototype Optimization）：提升原型效率與互動體驗
* 卡片元素（Card Element）：顯示資訊的矩形區塊
* 滾動長度調整（Scroll Length Adjustment）：延長頁面以實現滾動
* 元件寬度限制（Frame Width Constraint）：框架寬度限制以啟用水平滾動
* 主元件（Main Component）：用於同步更新的原始元件
* 副元件更新（Instance Update）：子元件自動反映主元件變更
* 互動覆蓋層（Interactive Overlay）：可點擊的浮層效果
* 頁面命名（Page Naming）：為原型頁面命名以便管理
* 預覽模式（Preview Mode）：查看原型互動效果的模式
* 動態元素（Dynamic Element）：可隨互動變化的設計元素
* 時間軸交互（Timeline Interaction）：元件互動的觸發順序控制