# 影片主題與工具介紹

* 介紹如何使用 Figma 設計 Wireframe
* Figma 適合 UX、UI 專案，從 Wireframe 到完整視覺設計
* 與 Sketch、Adobe XD 類似，轉換成本低
* 即使沒有設計工具經驗，也容易上手

# 註冊與安裝方式

* 前往 figma.com，選擇 Try Figma for free
* 可使用 Email 或 Google 帳號註冊
* 可下載桌面版（Mac / Windows），但瀏覽器版功能相同
* 桌面版在同時開啟多個專案時較順暢

# Figma 起始畫面與檔案管理

* 登入後會看到 Start Screen 與既有設計檔
* 預設會有教學檔案可參考
* Recent 分頁顯示最近使用的檔案
* 可透過 Search 搜尋檔案
* 右上角 New File 可建立新檔案
* 建立後可立即重新命名檔案

# 介面總覽（Toolbar）

* 左上角工具列包含基本操作選項
* Figma 具備自動儲存功能
* Move Tool：選取並移動物件
* Frame Tool：建立設計畫面範圍
* Shapes Tool：建立矩形、線條、多邊形等
* Pen Tool：繪製自訂向量圖形
* Text Tool：建立文字區塊
* Hand Tool：拖曳瀏覽 Canvas
* Comment Tool：團隊協作留言

# Canvas 與縮放操作

* 中央區域為 Canvas
* 可調整 Zoom 檢視更多或更細節的畫面
* 可使用右上角 Zoom 或觸控板手勢操作

# 左側面板（Layers / Assets / Pages）

* Layers 顯示所有畫面上的物件與階層
* 每個物件都對應一個圖層
* 複雜 UI 設計時圖層管理很重要
* Assets 可建立並重複使用設計元件
* Pages 可用來管理不同版本或狀態的設計

# 右側面板（Properties）

* 未選取物件時顯示 Canvas 設定
* 選取物件後可調整尺寸、顏色、對齊、描邊等
* Design 分頁：視覺樣式設定
* Prototype 分頁：串接畫面，建立互動流程
* Code 分頁：顯示對應程式碼，方便開發者使用

# Wireframe 實作範例說明

* 以虛構線上鞋店「Sam Shoes」為例
* 同時設計 Mobile 與 Desktop Wireframe
* Wireframe 結構簡單，專注於版面與資訊配置

# 建立 Frame（畫面容器）

* Frame 相當於其他工具的 Artboard
* 使用 Frame Tool 或快捷鍵 F
* 可選擇裝置範本（Phone / Desktop 等）
* 建立 iPhone 11 Pro 作為手機版
* 建立 MacBook Pro 作為桌面版

# Layout Grid（版面格線）

* Grid 協助對齊與維持設計一致性
* 沒有 Grid 容易造成版面混亂
* Grid 可設定為 Columns 類型
* Mobile 常用設定：4 欄、Margin 24、Gutter 16
* Desktop 常用設定：12 欄、Margin 64、Gutter 16
* 可隨時開關 Grid 檢視

# Grid 操作技巧

* 點選 Frame 後可新增 Layout Grid
* Grid 類型可在設定中切換
* 點擊眼睛圖示可顯示或隱藏 Grid
* 快捷鍵 Ctrl + G 可快速切換 Grid

---
# Mobile First 設計理念

* 移除格線後開始設計，避免干擾線框思考
* 採用 Mobile First 設計流程，先處理小螢幕體驗
* 行動裝置使用者比例高，需優先最佳化
* 小螢幕較容易解決設計問題，再延伸到大螢幕
* 調整 Frame 高度，提供足夠設計空間

# 定義 Wireframe 內容區塊

* 先規劃內容骨架，避免即興設計
* 使用矩形工具標示每個內容區塊
* 內容區塊包含：Menu、Promo Area、Categories、Products、Mailing List、Footer
* 每個區塊使用不同填色與文字標籤區分
* 調整 Frame 尺寸，使內容剛好填滿

# 建立內容區塊參考圖

* 複製所有區塊到旁邊作為設計參考
* 僅保留矩形與文字標籤，簡化視覺
* 統一文字顏色，形成清楚的版面大綱

# Mobile Menu 設計

* 加入 Logo 作為品牌識別
* 若無 Logo，可使用打叉矩形作為圖片佔位符
* 加入 Hamburger Menu 圖示作為主選單入口
* 加入搜尋與購物袋圖示，符合電商需求
* 圖示大小需一致，並對齊格線
* 圖示可透過 The Noun Project 下載 SVG 使用

# Promo Area 內容設計

* 包含主標題、說明文字、CTA 按鈕與產品圖片
* 標題文字置中，字型使用 Montserrat
* 標題大小約 60px，行高與字距調整以更緊湊
* 內文使用 Poppins，Medium 權重，行高約 28px
* CTA 按鈕文字需清楚描述動作，例如 Shop
* CTA 按鈕文字與背景群組，方便移動與管理

# 文字樣式管理

* 為標題與內文建立文字樣式
* 樣式可快速套用於新文字區塊
* 提升 Wireframe 製作效率與一致性

# 元件與 Component 應用

* 將 CTA 按鈕建立為 Component
* 可在 Assets 面板重複使用
* 修改 Master Component 可同步更新所有按鈕
* 適合跨頁面或多處使用的元素

# Hero Image 視覺呈現

* 加入主打鞋款圖片作為 Promo 視覺焦點
* 旋轉圖片營造「飛行感」
* 使用多張鞋圖製造前後景深效果
* 圖片部分超出 Frame，增加動態感
* 強化產品輕量、速度感的品牌印象

---

# 分類區塊（Category Section）

* 提供女性鞋款與男性鞋款的快速入口
* 幫助使用者快速篩選想看的商品類型
* 使用矩形工具建立區塊，對齊四欄 Grid
* 背景以深色代表圖片佔位
* 在區塊上方加入白色文字作為標題
* 將文字內容改為 Women、Men
* 調整字級與字距，讓標題更適合區塊大小
* 建立新的文字樣式 Header 2
* 加入「Shop Now」行動呼籲文字
* 搭配箭頭圖示強化可點擊性
* 複製整個區塊快速建立另一個分類

# 區塊標籤與版面微調

* 暫時使用文字標籤標示每個區塊用途
* 調整標籤位置避免干擾主要內容
* 可關閉 Grid 檢視整體視覺效果

# 商品區塊（Product Section）

* 顯示新品（New Releases）與熱銷商品
* 加入區塊標題並調整為較小字級
* 使用矩形作為商品圖片佔位
* 降低不透明度避免畫面過重
* 在圖片下方加入商品名稱與價格
* 商品名稱使用半粗體強調
* 價格使用一般字重

# 商品輪播設計

* 不採用直向堆疊，避免佔用過多版面
* 使用橫向 Carousel 讓使用者滑動瀏覽
* 加入滑動指示條作為操作提示
* 指示條顯示目前瀏覽位置
* 相同設計可重複用於其他商品區塊

# 調整 Frame 高度

* 擴大 Frame 以容納更多內容
* 調整時需按住 Command（Mac）或 Ctrl（Windows）
* 避免 Frame 內物件自動位移

# 郵件訂閱區塊（Mailing List Section）

* 鼓勵使用者訂閱電子報
* 傳達新品、促銷與最新消息
* 加入標題「Never Miss a Drop」
* 使用貼近鞋類用語與目標族群溝通
* 標題樣式使用 Header 2
* 調整行高讓版面更緊湊
* 加入置中的說明文字

# 次要行動呼籲按鈕

* 使用既有按鈕樣式作為基礎
* 解除元件連結（Detach Instance）
* 改為無填色、僅描邊的按鈕樣式
* 描邊設為 2px 增加辨識度
* 按鈕文字改為「Join Mailing List」
* 建立為新的次要按鈕元件

# 互動設計思考

* 點擊訂閱按鈕後預期會開啟彈窗
* Wireframe 設計時需同步思考互動流程
* 後續應補齊這些互動畫面的設計

---

# Footer 區塊 Wireframe 設計

* Footer 位於每個頁面底部，提供對使用者有價值的連結
* 連結內容包含帳號相關、購物說明、品牌資訊與法律條款
* 使用矩形工具建立深色背景，與上方區塊區隔
* Footer 文字改為白色並左對齊
* Footer 連結字級調小至 14px，避免搶走主要內容焦點
* 建立新的文字樣式作為 Footer Links

# Footer 欄位與標題設計

* Footer 內容分成多個欄位呈現
* 每個欄位加入標題如 My Account、Help、About、Legal
* 標題顏色調整為灰色並降低不透明度以區分連結
* 調整欄位間距，使版面更平衡

# 社群媒體與版權資訊

* 新增 Follow Sam’s 標題與社群媒體圖示
* 社群圖示可從 Figma 資源或線上素材取得
* 使用 Scale Tool 縮放圖示至適當大小
* Footer 底部加入版權文字
* 版權文字字級降至 12px 並降低不透明度

# Mobile 與 Desktop Wireframe 差異概覽

* Mobile 使用 Hamburger Menu 隱藏選單
* Desktop 直接顯示完整橫向選單
* Logo 在 Desktop 上尺寸較大並置中
* 搜尋與購物袋圖示在兩者中保持一致

# Promo 區塊版型差異

* Mobile 內容垂直堆疊，圖片在上文字在下
* Desktop 使用左右配置，文字在左圖片在右
* Desktop Hero Image 尺寸更大以利用橫向空間

# Categories 區塊配置

* Mobile 每個分類區塊垂直排列
* Desktop 使用格線將畫面一分為二呈現男女分類
* Desktop 的行動文字尺寸稍微放大

# Products Carousel 差異

* Mobile 一次顯示一張商品卡片加預覽
* Desktop 同時顯示多張商品卡片
* Desktop 每張商品卡片佔用三個格線欄位

# Mailing List 區塊處理

* Mobile 與 Desktop 設計基本一致
* Desktop 可在 UI 設計階段補上裝飾性元素
* Wireframe 階段保持簡潔即可

# Footer 在 Desktop 的配置方式

* Mobile Footer 各欄位垂直堆疊
* Desktop Footer 利用橫向空間分欄顯示
* 每組 Footer 連結佔用固定欄位數

# 裝置版本設計建議

* 本範例僅示範 Mobile 與 Desktop
* 若 Tablet 互動差異大，應額外設計 Tablet Wireframe

# Figma Present Mode 使用方式

* Present Mode 可隱藏編輯介面檢視實際比例
* 用於檢查字級與間距是否合適
* 可選擇裝置框架如 iPhone 11 Pro 呈現
* 常用於向客戶展示設計

# Figma Mirror App

* 可在手機上即時查看設計畫面
* 適合檢查實際裝置上的尺寸與可讀性
* 可與桌面版同步即時預覽

# 匯出設計檔案

* 未選取物件時可匯出整個畫布
* 選取 Frame 可單獨匯出 PNG、JPG 或 PDF
* 可同時匯出多個 Frame
* PDF 適合整合多頁設計分享

# 分享與協作功能

* 透過 Share 按鈕邀請他人檢視或編輯
* 可設定不同權限如 Can View 或 Can Edit
* 可直接複製連結分享檔案
* 受邀者可直接在瀏覽器中開啟

# 即時協作體驗

* 多人可同時編輯同一個檔案
* 可即時看到其他人的游標與操作
* 避免版本混亂與檔案來回傳送

---

# Terminology
* 線框圖（Wireframe）：用於表達介面結構與資訊配置的低擬真設計稿
* 使用者體驗（User Experience, UX）：使用者在使用產品或服務時的整體感受
* 使用者介面（User Interface, UI）：產品中使用者可見且可互動的視覺介面
* 畫框（Frame）：Figma 中作為設計容器與畫布邊界的元素
* 畫板（Artboard）：其他設計工具中與 Figma Frame 對應的設計區域概念
* 版面配置格線（Layout Grid）：協助對齊與維持版面一致性的輔助系統
* 欄位（Column）：格線系統中垂直分割的單位
* 邊界（Margin）：內容與畫框邊緣之間的留白距離
* 欄間距（Gutter）：欄位與欄位之間的間距
* 行動優先設計（Mobile First Design）：先設計行動版再擴充至桌面版的設計策略
* 工具列（Toolbar）：包含主要設計工具的操作區域
* 移動工具（Move Tool）：用於選取與移動物件的基本工具
* 縮放工具（Scale Tool）：用於等比例放大或縮小物件的工具
* 形狀工具（Shape Tool）：建立矩形、圓形、多邊形等基本圖形的工具
* 鋼筆工具（Pen Tool）：用於繪製自訂向量路徑與圖形的工具
* 文字工具（Text Tool）：建立與編輯文字內容的工具
* 圖層（Layer）：代表畫布中各個物件的階層結構
* 群組（Group）：將多個物件綁定為單一可操作單位
* 元件（Component）：可重複使用且集中管理的設計元素
* 主元件（Master Component）：元件的原始來源，控制所有實例的樣式
* 元件實例（Component Instance）：從主元件衍生、可重複使用的副本
* 資產庫（Assets）：集中管理元件、樣式與可重用設計資源的區域
* 文字樣式（Text Style）：預先定義的字型、大小與行高設定
* 標題一（Header One, H1）：用於主要標題的文字層級樣式
* 內文（Body Copy）：用於段落說明的主要文字內容
* 行高（Line Height）：文字行與行之間的垂直距離
* 字距（Letter Spacing）：文字字母之間的水平間距
* 對齊（Alignment）：物件在版面中的排列方式
* 填色（Fill）：物件內部的顏色或影像屬性
* 描邊（Stroke）：物件外框線條的樣式設定
* 透明度（Opacity）：物件顯示的透明程度
* 佔位符（Placeholder）：用於暫時代表未完成內容的視覺元素
* 原型（Prototype）：模擬實際互動流程的可點擊設計
* 互動連結（Interaction）：原型中定義的點擊或切換行為
* 註解（Comment）：供協作人員溝通與回饋的標註功能
* 協作設計（Collaborative Design）：多位設計師同時編輯同一檔案的工作方式
* 自動儲存（Auto Save）：系統即時保存設計變更的功能
* 向量圖形（Vector）：可無限縮放且不失真的圖形格式
* 點陣圖（Raster）：以像素為基礎，放大會失真的影像格式
* SVG（Scalable Vector Graphics）：常用於圖示與圖形的向量檔案格式
* 行動選單（Hamburger Menu）：以三條線表示的行動裝置導覽選單
* 行銷橫幅（Hero Section）：頁面中最醒目的主要推廣區塊
* 行動呼籲（Call to Action, CTA）：引導使用者採取下一步行為的介面元素
* 電子商務（E-commerce）：透過網路進行商品交易的商業模式
* 視覺層級（Visual Hierarchy）：透過大小、顏色與位置引導閱讀順序的設計原則
* 分類區塊（Category Section）：用於引導使用者依產品類型快速瀏覽的頁面區段
* 使用者導向導航（User-Oriented Navigation）：依使用者需求設計的導覽結構
* 視覺區塊（Content Block）：頁面中依功能或內容劃分的設計單位
* 背景影像（Background Image）：作為區塊主要視覺焦點的影像
* 文字疊加（Text Overlay）：顯示於影像上方的文字內容
* 次標題（Header Two, H2）：用於次層級標題的文字樣式
* 行動提示（Affordance）：暗示使用者可進行互動的視覺線索
* 產品區塊（Product Section）：集中呈現商品資訊的版面區域
* 新品上市（New Releases）：最新推出產品的展示分類
* 熱銷商品（Top Products）：依銷量或人氣排序的商品集合
* 產品卡片（Product Card）：呈現單一商品資訊的模組化元件
* 圖像佔位符（Image Placeholder）：暫時代表產品圖片的視覺元素
* 不透明度（Opacity）：控制物件顯示濃淡程度的屬性
* 價格標示（Price Label）：顯示商品售價的文字資訊
* 旋轉木馬（Carousel）：可橫向滑動瀏覽多項內容的互動元件
* 水平捲動（Horizontal Scrolling）：使用手勢或滑鼠左右瀏覽內容的方式
* 滑動指示器（Slider Indicator）：顯示目前捲動位置的視覺提示
* 首頁版面配置（Homepage Layout）：網站首頁的整體結構設計
* 版面空間（Screen Real Estate）：螢幕可用來呈現內容的有限空間
* 訂閱區塊（Mailing List Section）：引導使用者註冊電子報的頁面區段
* 行銷文案（Marketing Copy）：用於吸引用戶行動的文字內容
* 用語在地化（Domain Language）：使用目標族群熟悉的專業或情境用語
* 彈出視窗（Modal）：覆蓋主畫面的互動視窗
* 次要行動呼籲（Secondary CTA）：輔助主要目標的次級按鈕
* 主要行動呼籲（Primary CTA）：頁面中最重要的轉換行為按鈕
* 元件分離（Detach Instance）：將元件實例解除與主元件的連動
* 描邊按鈕（Outlined Button）：以外框線條呈現的按鈕樣式
* 頁尾（Footer）：位於頁面底部的資訊與導覽區域
* 頁尾連結（Footer Links）：集中於頁尾的重要輔助導覽項目
* 帳戶管理（Account Management）：與使用者帳號相關的功能連結
* 法律資訊（Legal Information）：包含隱私權與使用條款的內容
* 社群媒體圖示（Social Media Icons）：連結至社群平台的視覺標誌
* 視覺分隔（Visual Separation）：用顏色或空間區分不同內容區塊
* 桌面版設計（Desktop Design）：針對大螢幕裝置的介面配置
* 平板設計（Tablet Design）：介於行動與桌面之間的裝置設計版本
* 響應式思維（Responsive Thinking）：考量不同裝置尺寸的設計策略
* 堆疊配置（Stacked Layout）：垂直排列內容的版面方式
* 並排配置（Side-by-Side Layout）：利用水平空間呈現多個內容區塊
* 原型展示模式（Present Mode）：隱藏設計介面、專注展示作品的模式
* 裝置模擬（Device Preview）：在特定裝置外框中檢視設計
* 即時預覽（Live Preview）：設計變更同步顯示的檢視方式
* Figma Mirror（Figma Mirror）：將設計同步顯示於實體行動裝置的應用
* 匯出功能（Export）：將設計轉換為圖檔或文件格式
* 存取權限（Access Permission）：控制使用者檢視或編輯檔案的權限
* 即時協作（Real-Time Collaboration）：多位使用者同步編輯同一設計檔
* 游標顯示（Cursor Presence）：顯示其他協作者即時位置的功能