在 Figma 製作 Design System（設計系統） 是設計與開發團隊提升效率與一致性的關鍵。它不只是「元件庫」，而是一套有結構、規則、與彈性的視覺語言 + 元件規範。Figma 提供強大功能：Component（元件）、Styles（樣式）、Variants（變體）、Auto Layout、Library 分享，使它成為設計系統的理想工具。
✅ 一句話定義：
Design System 是「幫助產品設計保持一致、快速建立畫面」的工具組合。
在 Figma 中，它包含：
🎨 色彩 / 字型 / 間距 → Styles
🧱 按鈕 / 卡片 / 表單 → Components
⚙️ 交互邏輯 / 狀態切換 → Variants
📦 組織分類 / 可被全團隊使用 → Libraries
🧰 在 Figma 建立 Design System 的完整流程
📍 1. 設定基本樣式（Styles）
| 類型 | 建立項目例子 |
|---|---|
| 色彩 | 主色（Primary）、文字色、背景色、灰階 |
| 字型 | 標題字型、內文、按鈕文字 |
| 間距 | Spacing token：4 / 8 / 16 / 24… |
| 圓角與陰影 | 卡片圓角 8px、按鈕陰影 |
做法：
- 選取顏色 / 字體 → 點右側「Style」→ 建立樣式並命名
- 命名方式建議使用：
Color / Primary / Default、Text / Heading / Large
📍 2. 建立元件（Components）
從最小的 UI 單元開始製作 → 再逐步合成大元件：
| 類型 | 元件範例 |
|---|---|
| 基本元件（Atoms） | 按鈕、Input 欄、Icon、Tag、Checkbox |
| 複合元件（Molecules） | 搜尋列、表單欄位組、選單列 |
| 區塊（Organisms） | Header、Footer、Card、Modal |
✅ 重點：所有元件請使用 Auto Layout，支援內容自適應。
📍 3. 為元件加入 Variants（變體）
例如按鈕可以有以下狀態：
| 屬性 | 變化 |
|---|---|
| Type（類型） | Primary / Secondary / Danger |
| State（狀態） | Default / Hover / Disabled |
| Size（大小） | Small / Medium / Large |
➤ 在元件屬性面板點選「Combine as Variants」
➤ Figma 會自動建立變體表格，方便切換與開發導出
📍 4. 建立 Icon 系統
- 所有 Icon 使用單一風格（線條、粗細、圓角統一）
- 建議建立 24px 框的 Icon component
- 命名範例：
Icon / Arrow / Right、Icon / Check / Filled
📍 5. 建立 Layout Grid（格線系統）
為不同螢幕尺寸設定排版規範
| 裝置 | 建議格線 |
|---|---|
| Mobile | 4 或 8 Columns，16px 間距 |
| Tablet | 8 Columns |
| Desktop | 12 Columns，64px margin |
設定方式：選畫板 → Layout Grid → 自訂欄位（Columns）
📍 6. 元件分組管理（命名規則）
善用 / 分類，例如：
Button / Primary / Default
Input / Textfield / Focused
Card / Product / Hover
這樣會在 Assets 面板中自動產生可折疊式元件分類。
📍 7. 開啟 Library 並共享
- 設計完成的元件檔案 →
Assets面板 → 點「Library」圖示 - 開啟
Publish，發布整個檔案為 Library - 其他設計師可以從自己的檔案 →
Assets > Libraries→ 開啟使用
💡 建議命名系統（Token 化）
| 元素 | 命名方式示例 |
|---|---|
| 顏色 | Color / Primary / 500 |
| 字體 | Text / Heading / H1 |
| 間距 | Spacing / XS / 4px |
| 陰影 | Shadow / Light / Default |
| 邊角半徑 | Radius / Small / 4px |
🧪 實作建議：一週設計系統練習任務
| 天數 | 任務 |
|---|---|
| Day 1 | 設定顏色與字體樣式 |
| Day 2 | 設計按鈕（含大小、狀態） |
| Day 3 | 製作表單欄位（含輸入、錯誤提示） |
| Day 4 | 製作 Icon Set 與 Icon Button |
| Day 5 | 組合卡片與 Modal 元件 |
| Day 6 | 建立 Layout Grid 與 Breakpoints 規範 |
| Day 7 | 將整份系統轉為 Library 並測試使用 |
🧭 Figma Design System 的好處
| 好處 | 說明 |
|---|---|
| 🎯 設計一致性 | 統一色彩、排版、UI 樣式 |
| 🚀 開發對接更清楚 | Variants 與屬性命名可對應至 React Props |
| 📦 元件可重複使用 | 提高製作速度，減少錯誤 |
| 🧩 系統擴充性佳 | 容易版本更新與管理 |
| 🔗 可與開發平台連動 | 可匯出到 Storybook、Zeroheight 等 |