Figma 是設計 App UI / UX 的熱門工具，無論是建立畫面設計（UI Layout）、製作可重複使用的元件庫（UI 組件 Library）、還是做動畫互動原型（Prototype），它都非常適合。這裡我會帶你從基礎到進階，包含：
🎯 你將學到的 3 個核心技能：
- 設計 App 畫面（UI Layout）
- 建立 UI 組件庫（Component Library）
- 製作動畫原型（Prototyping & Interaction）
🛠️ 工具準備
- ✅ Figma 網站（免費帳號即可）
- ✅ 中/英文字體（如 Noto Sans、思源黑體）
- ✅ iOS / Android UI 套件（建議使用官方 Figma 社群資源）
1️⃣ 設計 App 畫面流程（UI Layout）
✅ Step 1：設定畫布 Frame
- 選取工具
F→ 建立 iPhone 14 或 Android 畫面尺寸 - 常見尺寸參考：
- iPhone 14 Pro: 393 x 852 px
- Android 常用: 360 x 800 px
✅ Step 2：建立版型結構（Wireframe）
- 使用矩形、線條、文字簡單排版
- 建立底部導航列、App 標題列、按鈕與輸入欄位等
✅ Step 3：應用顏色與字型
- 統一設計系統：
- 色彩（主色、輔色、灰階）
- 字體（標題/內文）
- 元件間距（8pt / 4pt rule）
✅ Step 4：插入圖片與 Icons
- 可用：
- Figma 社群：搜尋 “icon”、”image placeholder”
- 插件：如 Unsplash、Iconify、Feather Icons
2️⃣ 建立 UI 組件庫（Component Library）
組件是 Figma 強大功能之一，方便統一 UI 元素、維護效率。
✅ Step 1：建立按鈕元件（Button Component）
- 畫一個矩形＋文字（e.g. “按我”）
- 選取後按
Cmd/Ctrl + Alt + K→ 變成元件 - 命名為
Button / Primary
✅ Step 2：使用 Variant 建立按鈕變體
- 例如：
- 狀態：
Primary/Secondary - 狀態：
Default/Hover/Disabled
- 狀態：
- 選取所有變體 → 點右上角「Combine as Variants」
✅ Step 3：元件組件庫集中管理
- 把元件放到單一專案文件（Component file）
- 透過「Assets」面板從其他檔案調用元件
3️⃣ 製作動畫原型（Prototype）
Figma 的原型工具可幫你：
- 建立點擊/滑動互動
- 模擬頁面切換動畫
- 快速展示 UX 流程
✅ Step 1：建立畫面 Flow
- 建立多個 Frame（e.g. 登入頁、首頁、商品頁）
- 完成設計後，點選
Prototype模式（右上角）
✅ Step 2：建立互動流程
- 點擊元件（例如按鈕）→ 拖拉箭頭連到下一頁
- 選擇觸發方式：
- On Click、On Hover、While Pressing、After Delay
- 選擇動畫效果：
- Instant、Dissolve、Smart Animate、Slide In/Out
✅ Step 3：預覽與分享
- 點右上角 ▶️ 播放按鈕可模擬操作
- 使用「Share」分享連結給團隊或客戶（可設權限）
🧱 額外：組件命名與整理建議
| 元件類別 | 命名範例 |
|---|---|
| 按鈕 | Button / Primary / Default |
| 輸入框 | Input / Email / Focused |
| 分頁標籤 | Tabs / Active |
| 圖標按鈕 | IconButton / Search |
✅ 加上 Emoji 讓資產面板更好找：如 🔘 Button / Primary
📚 推薦學習資源
📺 YouTube 中文教學
- Edison UI / UX 教學（新手友善）
- MIS 胡哥：Figma 入門至進階完整系列
- 阿章設計小教室：快速實戰專案
🎨 Figma 社群資源
- 搜尋「iOS UI kit」、「Material 3 Design」
- 插件推薦：
- Auto Layout（自動對齊與響應設計）
- Content Reel（假資料快速填充）
- Figmotion（做更進階動畫）