# 影片簡介

* 教你如何開始練習在 Figma 設計應用程式和網站
* 提供逐步操作指引
* 專注於入門必須知道的工具與步驟

# Figma 的優勢

* 免費開始使用
* 支援多人即時協作
* 速度快，跨平台（Mac/PC/Linux/瀏覽器）
* 有行動版 App 可預覽設計

# 登入 Figma

* 前往 figma.com
* 可用 Google 帳號快速註冊/登入

# 為何要臨摹設計

* 初學者從零開始設計難度太高
* 臨摹能學習他人如何達成特效與排版
* 純粹練習用途，不涉及販售或抄襲

# 使用模板開始專案

* 登入後不用空白檔案，從模板著手
* 可透過 figmaresources.com 找免費模板
* 點擊「Copy to Figma」即可複製檔案到帳號
* 複製到草稿後即可編輯

# 介面概覽

* 左側為圖層列表

* 右側顯示選取元素的屬性

# 建立框架 (Frame)

* 使用 Frame 工具（快捷鍵 F）
* 可選擇標準裝置尺寸，如 iPhone 11 Pro Max
* 將框架放在參考設計旁邊進行臨摹

# 建立形狀與填色

* 使用矩形工具（快捷鍵 R）建立區塊


* 調整填色，可直接使用吸管工具取色


* 可快速建立背景或卡片樣式

# 調整圓角

* 屬性面板可設定 Corner Radius
* 可獨立設定四角的圓角數值
* 不想要圓角的部分可設為 0

# 建立圓形
* 使用橢圓工具（快捷鍵 O）
* 按住 Shift 畫出正圓
* 設定精確尺寸（例如 104x104）

* 使用 Option/Alt 檢視與其他元素的間距
* 拖曳時自動吸附至中心位置
* 更改顏色（例如設為白色）

# 使用 ICON

* 圖示常用於行動介面設計
* 可在 Google 搜尋「free figma icons」找到免費資源
* 開啟 Figma 圖示檔後，直接複製貼上到自己的檔案
* 調整大小時按住 Shift 保持比例
* 按住 Shift+Option/Alt 可從中心點縮放

# 貼入 IMAGES

* 圖片能豐富設計版面
* 可從 Unsplash 等免費圖庫下載圖片
* 直接複製圖片並在 Figma 貼上
* 貼到指定區域後調整位置即可

# 使用 TEXT

* 使用文字工具（快捷鍵 T）輸入標題或段落
* 可調整字體、字級、粗細（例：34px Bold）
* 拖曳文字框改變寬度，讓文字換行
* 使用 Option/Alt 測量與其他元素的距離
* 吸管工具可複製文字顏色
* 可設定文字框寬度以符合原始設計

# 建立 BUTTON

* 使用矩形工具（快捷鍵 R）建立按鈕框
* 設定尺寸（例：374x56）並置中
* 調整顏色與圓角（例：Corner Radius 8）
* 加入文字（例：SF Pro Text Semi-Bold 15px，全大寫）
* 文字置中並設定為白色
* 可快速複製按鈕或文字（Option/Alt 拖曳）

# 結論

* 從現有模板入手可快速上手
* 複製元素練習設計結構與樣式
* 不需先懂設計理論即可練習

# 下一步

* 當能熟練臨摹後，可開始自己設計喜歡的 App 介面
* 遇到問題可搜尋相關操作或效果實現方式
* 逐步熟悉 Figma 工具與設計流程
* 最終可嘗試重新設計不理想的 App（如銀行 App）

# Terminology
* Figma：一款基於雲端的介面設計與協作工具
* UI（User Interface）：使用者介面，指軟體或網站與使用者互動的視覺和操作層面
* UX（User Experience）：使用者體驗，使用者與產品互動過程中的整體感受
* Frame：Figma 中的框架，用來建立畫面或容器的基本單位
* Layer：圖層，設計中元素的分層結構
* Vector：向量圖形，可無損縮放的幾何繪圖形式
* Path：路徑，由線條與節點構成的形狀基礎
* Node：節點，用於控制向量圖形的形狀轉折
* Stroke：邊框，圖形外框的線條樣式
* Fill：填色，圖形內部的顏色或漸層
* Color Picker：選色器，用於挑選顏色的工具
* Eyedropper Tool：吸管工具，用來擷取畫面中的顏色
* Gradient：漸層，兩種或多種顏色的平滑過渡效果
* Opacity：不透明度，控制元素的透明程度
* Corner Radius：圓角半徑，設定矩形角落的圓滑程度
* Independent Corners：獨立角設定，可分別調整每個角落的圓角數值
* Alignment：對齊，控制元素在畫面中的相對位置
* Spacing：間距，元素之間的距離設計
* Grid System：網格系統，用於建立一致的排版與對齊規則
* Layout Grid：版面格線，幫助設計排版的可視化參考
* Auto Layout：自動排版，Figma 中自動排列元素的功能
* Prototype：原型，模擬互動與流程的設計稿
* Interaction：互動，使用者與設計元素之間的行為觸發
* Component：元件，可重複使用的設計元素
* Instance：元件實例，從元件衍生出的具體拷貝
* Override：覆寫，在元件實例中修改特定屬性
* Constraints：約束，控制元素在父級容器調整時的自適應方式
* Responsive Design：響應式設計，根據螢幕大小調整介面布局
* Export：匯出，將設計稿輸出為圖像或程式碼資源
* Collaboration：協作，多人同時編輯設計的功能
* Version History：版本歷史，設計檔的修改紀錄
* Drafts：草稿，個人儲存設計的工作區
* Plugin：外掛，擴充 Figma 功能的工具
* Template：範本，可直接套用的設計文件
* Wireframe：線框圖，低保真介面結構圖
* Mockup：模型圖，高保真介面視覺設計稿
* High-Fidelity Design：高保真設計，接近最終產品的精緻設計稿
* Low-Fidelity Design：低保真設計，快速表達概念的簡化設計稿
* Pixel Perfect：像素精準設計，元素對齊到精確像素的設計方式
* Hierarchy：階層，元素在畫面中的視覺重要性順序
* Typography：字體設計，文字樣式與排版規劃
* White Space：留白，設計中的空白區域用來提升可讀性
* Iconography：圖示設計，符號與圖標的設計系統
* Style Guide：設計風格指南，定義品牌與介面設計規範
* Design System：設計系統，包含元件、樣式與規範的完整集合
* Accessibility：無障礙設計，確保不同能力使用者都能使用的設計
* Usability Testing：可用性測試，透過實際使用者測試驗證設計效果
* Hotspot：互動區域，原型中可點擊或觸發的指定範圍
* Handoff：交付，設計師將設計稿交給開發者的過程
* Responsive Grid：響應式格線，隨螢幕大小調整的排版系統
* Mobile Companion App：行動版應用程式，用於行動裝置預覽設計
* Cloud-Based Tool：雲端工具，可透過網路瀏覽器即時存取與協作
* Vector Network：向量網路，Figma 獨特的多向路徑繪製方式
* Boolean Operations：布林運算，用來合併、相減或交集圖形的功能
* Union：聯集，將多個圖形合併為一個整體
* Subtract：相減，從一個圖形中減去另一個圖形
* Intersect：交集，僅保留圖形相交的部分
* Exclude：差集，刪除圖形重疊區域
* Masking：遮罩，使用一個圖形限制另一個圖形的顯示區域
* Group：群組，將多個元素組合為一個單位
* Ungroup：解組，將群組拆分為獨立元素
* Z-Index：堆疊順序，決定元素在前景或背景的顯示層級
* Blend Mode：混合模式，決定圖層顏色如何與下方顯示效果融合
* Drop Shadow：投影效果，增加元素立體感的陰影效果
* Inner Shadow：內陰影，元素內部的陰影效果
* Blur：模糊效果，讓元素或背景產生柔化視覺
* Gaussian Blur：高斯模糊，均勻柔化整個元素
* Background Blur：背景模糊，僅模糊元素下方區域
* Stroke Weight：線條粗細，設定邊框的厚度
* Stroke Alignment：邊框對齊，控制邊框位置（內側、外側或置中）
* Dashed Line：虛線樣式，由間隔組成的線條
* Cap Style：端點樣式，控制線條末端形狀（圓頭、方頭等）
* Join Style：連接樣式，控制線條轉角外觀（斜接、圓角、斷角）
* Vector Handles：向量控制桿，用來調整曲線平滑度的控制點
* Bezier Curve：貝茲曲線，用數學控制點繪製平滑曲線
* Pen Tool：鋼筆工具，用來繪製自訂路徑
* Pencil Tool：鉛筆工具，自由手繪路徑功能
* Scale Tool：縮放工具，依比例放大或縮小元素
* Rotate Tool：旋轉工具，旋轉元素的功能
* Constraints & Resizing：限制與縮放設定，決定元素在父容器變動時的行為
* Smart Guides：智慧輔助線，自動顯示對齊與間距提示
* Pixel Preview：像素預覽，檢視設計在像素層級的顯示效果
* Outline Mode：線框模式，只顯示元素外框便於檢視結構
* Nudge：微調，透過鍵盤方向鍵移動元素的精細控制
* Snap to Grid：吸附格線，自動對齊至網格點
* Snap to Pixel：像素吸附，確保元素對齊到整數像素避免模糊
* Overflow Behavior：溢出行為，決定超出容器部分是否顯示或隱藏
* Clip Content：裁剪內容，限制元素顯示在容器邊界內
* Asset Panel：資產面板，管理元件與樣式的地方
* Styles：樣式，可重複使用的顏色、字體或效果設定
* Text Style：文字樣式，定義字體、大小、行距等排版設定
* Color Style：顏色樣式，定義可重複使用的顏色組合
* Effect Style：效果樣式，儲存陰影或模糊等效果設定
* Library：資源庫，共享元件與樣式的集中管理處
* Shared Components：共享元件，可跨專案使用的設計元素
* Team Projects：團隊專案，讓多人在同一個設計空間協作
* Comment Tool：評論工具，用來在設計稿中留下回饋
* Presenter Mode：展示模式，以簡報方式瀏覽設計或原型
* Flow：流程圖模式，連接多個原型畫面展示使用流程
* Animation：動畫效果，原型中的動態過渡方式
* Smart Animate：智慧動畫，偵測元素變化並自動生成過渡效果
* Easing：緩動函數，控制動畫速度的曲線公式
* Overlay：覆蓋層，在原型中顯示彈出或浮層視窗
* Device Frame：裝置外框，模擬設計在不同裝置上的外觀
* Presentation View：展示檢視，用於全螢幕檢視設計原型
* Iconography：圖示設計，使用統一風格的符號幫助介面理解
* Vector Icon：向量圖示，可無損縮放的圖示格式
* Raster Image：點陣圖，像素構成的影像格式
* Unsplash：免費高品質圖片資源網站
* Stock Image：素材圖片，可免費或付費取得用於設計
* Copy-Paste Workflow：複製貼上流程，快速將資源移入設計稿
* Hide UI：隱藏介面，專注於設計內容的檢視模式
* Resize Constraint：縮放限制，確保元素縮放時比例不變
* Shift Modifier：Shift 輔助鍵，用於保持等比縮放或建立正形狀
* Alt/Option Modifier：Alt/Option 輔助鍵，用於從中心點進行縮放或移動
* Center Alignment：置中對齊，元素相對父容器居中排列
* Double Click Drill Down：多次點擊深入，逐層選取群組或子元素
* Font Family：字型家族，一組相關字體樣式的集合
* Font Weight：字重，字體的粗細程度
* Bold Text：粗體字，字體加粗以強調內容
* Semi-Bold：半粗體，介於常規與粗體之間的字重
* Font Size：字體大小，文字顯示的高度數值
* Text Box Resizing：文字框縮放，控制文字排版的行數與寬度
* Line Break：換行，將文字分成多行顯示
* Paragraph Text：段落文字，用於長篇描述或正文
* Text Alignment：文字對齊，控制文字在框中的位置（左、中、右）
* Tracking：字距，文字之間的整體間距調整
* Leading：行距，控制文字行與行之間的距離
* Text Color：文字顏色，設定字體的顯示顏色
* Eyedropper Sampling：取樣工具，用於擷取現有顏色應用到文字或元素
* Pixel Distance Measurement：像素距離測量，用於檢查元素間的間隔
* Nudge Tool：微移工具，利用鍵盤方向鍵移動元素
* Button UI：按鈕介面，常見的互動控制元素
* Call to Action（CTA）：行動號召，按鈕上引導使用者操作的文字
* Rectangle Tool：矩形工具，用於建立按鈕或區塊
* Button States：按鈕狀態，包括預設、懸停、點擊、停用等
* Corner Radius Consistency：圓角一致性，確保按鈕風格統一
* Duplicate Shortcut：複製快捷鍵，用於快速生成元素副本
* Option/Alt-Drag：快捷拖曳複製，按住 Alt/Option 拖曳以快速複製元素
* White Text on Dark Background：深色背景上的白字設計，提高對比度
* All Caps Text：全大寫文字，用於按鈕或標題強調
* SF Pro Display：蘋果字型系列中的顯示字體
* SF Pro Text：蘋果字型系列中的文字字體，專為介面設計
* Alignment Guides：對齊輔助線，幫助元素精確排列
* Prototyping Workflow：原型設計流程，從靜態設計轉向互動設計
* Visual Consistency：視覺一致性，確保設計元素風格統一
* Spacing System：間距系統，規範設計中的固定像素間隔
* Component Reuse：元件重用，按鈕或文字區塊可作為元件重複使用
* Layer Hierarchy：圖層階層，設計中元素的堆疊順序結構
* Overlay Element：覆蓋元素，浮動在主要內容之上的設計元素
* Flat Design：扁平化設計，簡化陰影與立體效果的設計風格
* Material Design Button：Google 設計系統中的按鈕樣式
* iOS Human Interface Guidelines：蘋果官方設計規範
* Visual Mockup：視覺模型，高保真的靜態設計展示
* Design Iteration：設計迭代，逐步修改與改良設計稿
* User-Centered Design：以使用者為中心的設計方法
* Icon Set：圖示集，統一風格的多個圖示集合
* SVG（Scalable Vector Graphics）：可縮放向量圖形，常用於圖示與插畫
* PNG（Portable Network Graphics）：支援透明背景的點陣圖格式
* JPEG（Joint Photographic Experts Group）：高壓縮率圖片格式，適合照片
* Asset Export：資產匯出，將設計元素輸出為不同格式
* Slice Tool：切片工具，用來匯出特定區域的設計元素
* Rasterize：點陣化，將向量圖轉換成像素圖像
* Symbol：符號，重複使用的設計單元（類似元件概念）
* Style Override：樣式覆寫，對元件應用不同的顏色或字體
* Nested Components：巢狀元件，在元件內嵌套其他元件
* Icon Grid：圖示格線，建立圖示時的比例與留白規範
* Golden Ratio：黃金比例，用於排版和構圖的設計法則
* 8pt Grid System：8 像素網格系統，常見的 UI 間距規範
* Baseline Grid：基線網格，用於文字對齊的格線系統
* Modular Scale：模數比例，字體大小與間距的比例系統
* Visual Hierarchy：視覺階層，透過大小、顏色等方式建立主次關係
* Focal Point：視覺焦點，吸引用戶注意的設計元素
* Callout Text：標註文字，用於提示或次要說明
* Tooltip：工具提示，滑鼠懸停時顯示的說明框
* Placeholder Text：佔位文字，顯示在輸入欄位中的提示文字
* Microcopy：微文案，短小但影響操作的重要文字
* Error State：錯誤狀態，顯示系統或表單輸入錯誤的設計
* Empty State：空狀態，無內容時的設計展示
* Loading State：載入狀態，系統運作過程中的提示設計
* Success State：成功狀態，操作完成時的回饋設計
* Feedback UI：回饋介面，系統回應使用者操作的設計
* Modal Window：模態視窗，覆蓋主要內容的彈出視窗
* Toast Notification：輕量通知，短暫出現的提示訊息
* Snackbar：底部彈出式提示，常見於行動應用設計
* Navigation Bar：導覽列，用於應用程式的主要導覽
* Tab Bar：分頁列，切換不同功能頁面的設計
* Hamburger Menu：漢堡選單，隱藏式導覽按鈕（三條線圖示）
* Floating Action Button（FAB）：浮動操作按鈕，突顯主要操作
* Card UI：卡片介面，容納內容的矩形模組
* List Item：清單項目，應用中常見的資料展示單位
* Divider：分隔線，用於區分不同內容區塊
* Shadow Elevation：陰影高度，Material Design 中的立體層次效果
* Hover State：懸停狀態，滑鼠指標停留在元素上的設計
* Active State：啟用狀態，使用者正在操作中的元素狀態
* Disabled State：停用狀態，無法互動的元素狀態
* Focus Ring：焦點環，用於鍵盤操作時高亮顯示的邊框
* Gesture Control：手勢操作，用於行動裝置互動的輸入方式
* Scroll Behavior：滾動行為，內容超出容器時的移動效果
* Infinite Scroll：無限滾動，自動載入更多內容的設計
* Pagination：分頁，將大量內容拆分成多頁的設計方式
* Carousel：輪播圖，循環播放多張圖片或內容的元件
* Hero Image：主視覺大圖，頁面頂部的大型圖片
* Call to Action Banner：行動號召橫幅，吸引用戶注意並操作
* Footer：頁尾，常用於顯示次要資訊或連結
* Responsive Typography：響應式字體，根據螢幕大小自適應的文字設計
* Dark Mode：深色模式，背景為深色的顯示風格