--- # System prepended metadata title: Aliena Cai - Figma UX tutorial for beginners - Prototype tags: [Prototype, UI/UX] --- # 什麼是 Figma 原型 * 原型是一個可互動的產品設計呈現方式 * Figma 原型可生成連結，分享給其他人互動查看 * 大型產品可能有複雜頁面與互動 * 核心互動包含頁面垂直滾動、元件水平滾動、跨頁互動、彈出互動 # 建立基本原型 ![image](https://hackmd.io/_uploads/r1saLdgEWe.png) * 在 Figma 建立新檔案，命名為 Prototype Practice * 建立 Frame，大小依手機尺寸設定 * 建立首頁 Wireframe * 頂部矩形代表 App Header * 設置深灰色填充增加對比 * T 鍵新增文字框，輸入 Header * 複製 Header 移至底部代表 Tab Bar * R 鍵建立三個矩形代表 Tab Bar Icons * R 鍵建立卡片矩形，複製形成三張卡片 # 預覽與分享原型 * 點選 Prototype 頂部右側，設定裝置為手機尺寸 * 選取整個 Frame，點擊播放圖示 * 點選 Share Prototype 可生成連結分享給他人 # 頁面垂直滾動 ![image](https://hackmd.io/_uploads/B13lwOg4Zl.png) * 調整 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 # 水平滾動操作總結 ![image](https://hackmd.io/_uploads/HkJXw_eNZx.png) * 將水平區塊建立為 Frame * 調整 Frame 尺寸 * 開啟 Clip Content * 在 Prototype 設定 Horizontal Scrolling --- # 建立跨頁互動 ![image](https://hackmd.io/_uploads/rJ-Hv_xVZl.png) * 將頁面命名為 Page One，複製頁面並調整元素創建新頁面 * 保留 Header 與 Footer，其餘元素可調整或重新建立矩形 * 在 Prototype 模式下選取圖示，拖拉連接點到另一頁以建立導航互動 * 可重複操作讓使用者點擊圖示在不同頁面之間切換 * 另一種方法：選擇圖示後點擊 Plus Icon 添加互動，設定 Navigate To 目標頁 # Overlay 效果 ![image](https://hackmd.io/_uploads/ry3IDOeNZx.png) * 建立新框架（小於手機螢幕），用矩形代表頁面 * 選取圖示，拖拉到新框架並將互動設定為 Open Overlay * 可進一步設定「Add Background Behind Overlay」及「Close When Clicking Outside」 * 可在 Overlay 頂端圖示設定 Close Overlay 以關閉模態 ![image](https://hackmd.io/_uploads/S1DPPulVWe.png) # Figma 使用技巧 ![image](https://hackmd.io/_uploads/B16Fv_lVZl.png) * 安裝 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）：元件互動的觸發順序控制