設計一套 UI Kit 是使用 Sketch 學習元件設計、風格一致性與設計系統化的絕佳練習方式。不論是為了 App、網站或個人作品集，一份完整的 UI Kit 都可以加快日後專案速度、提升專業度。
🧰 什麼是 UI Kit？
UI Kit（User Interface Kit） 是一組可重用的 UI 元件、樣式與設計模組，用於快速建立介面畫面。它是完整設計系統的基礎，通常包含按鈕、表單欄位、標題字型、色彩規則等。
🎯 目標：用 Sketch 設計一套基礎 UI Kit
🧱 UI Kit 結構建議（模組分類）
以下是推薦的 UI Kit 結構，你可以把每類設為 Symbol 或 Group 並集中管理：
1️⃣ Color System（色彩系統）
| 類別 | 範例 |
|---|---|
| Primary | #007AFF（主色） |
| Secondary | #34C759（輔色） |
| Background | #F2F2F7, #FFFFFF |
| Border | #E5E5EA |
| Text Colors | #000000, #8E8E93 |
➡️ 使用 Shared Styles > Color Variables 建立全域顏色樣式。
2️⃣ Typography（字型樣式）
| 樣式 | 建議設定 |
|---|---|
| H1 | 32pt / Bold / SF Pro or Inter |
| H2 | 24pt / Semibold |
| H3 | 20pt / Medium |
| Body | 16pt / Regular |
| Caption | 12pt / Light or Regular |
➡️ 將每個字型樣式定義為 Text Style，方便全局更新。
3️⃣ Buttons（按鈕樣式）
| 類型 | 元件內容 |
|---|---|
| Primary | 背景色主色、白色文字 |
| Secondary | 白底邊框、主色文字 |
| Disabled | 灰底灰字 |
| IconButton | 只含 icon 的按鈕 |
➡️ 用 Symbol 製作可切換按鈕狀態（hover、active、disabled）。
4️⃣ Form Elements（表單元件）
| 元件類型 | 補充說明 |
|---|---|
| Text Input | 正常 / Focused / Error 狀態 |
| Password Input | 加 Eye icon |
| Textarea | 多行輸入 |
| Checkbox | 已勾選 / 未勾選 / Disabled |
| Radio Button | 選中 / 未選 / Disabled |
| Toggle Switch | ON / OFF 狀態 |
| Dropdown | 開啟 / 關閉狀態 |
➡️ 統一設計 Input 高度（例如 44px）、Padding、圓角。
5️⃣ Cards（資訊卡元件）
| 類型 | 建議內容 |
|---|---|
| Image Card | 圖片上方 + 標題 + 描述 + CTA 按鈕 |
| Text Card | 標題、內容文字 |
| Icon Card | 上方 icon + 下方文字 |
➡️ 為卡片設計統一的邊距（padding）、間距、陰影效果。
6️⃣ Modals / Dialogs（彈窗）
- 標題 + 內文 + 按鈕區（Cancel / OK）
- 背景遮罩
rgba(0,0,0,0.4) - 可支援插圖 / Icon / 錯誤提示色（如紅色）
7️⃣ Navigation（導覽元件）
| 元件 | 備註 |
|---|---|
| Top Navbar | 含 Logo、Menu、CTA 按鈕 |
| Tab Bar | iOS style / Web style 可選 |
| Sidebar | 適合 Dashboard UI |
8️⃣ Icons（圖示系統）
- 選擇一套風格一致的 icon set：
- Feather Icons
- Heroicons
- 或使用 SF Symbols（iOS）
➡️ 統一尺寸建議：24×24 或 16×16 px，SVG 格式最佳
📁 Sketch 中如何組織 UI Kit？
建議使用以下結構命名 Symbol：
Button/Primary
Button/Secondary
Input/Text
Input/Password
Card/Image
Card/Text
Navbar/Desktop
Modal/Alert
使用 Pages 來分開區塊（例如 Foundations, Components, Layouts），保持專案乾淨易管理。
📤 最終輸出方式
你可以將 UI Kit：
- 輸出為
.sketch模板，與團隊共用 - 匯出為 PDF 或 PNG，放入作品集
- 上傳至 Sketch Cloud 或連結 Zeplin/Abstract 作為交接用設計系統
📦 範例 UI Kit 建議練習主題
| 練習主題 | 說明 |
|---|---|
| App UI Kit | 適用 iOS / Android |
| Dashboard UI Kit | 企業內部系統、數據圖表 |
| Web UI Kit | 商業網站通用（Hero、Cards 等） |
| Portfolio UI Kit | 自己作品集專用風格 |
✅ 小結：製作 UI Kit 的好處
- 設計風格統一：配色、元件、字體不雜亂
- 快速疊畫面：設計稿速度提高 2～3 倍
- 開發交接方便：元件命名清楚、結構一致
- 增加作品集質感：呈現設計系統實力