一份 Figma Design System 模板（含按鈕、卡片、輸入框、色彩 token 等）

以下是你可以依照 Figma 製作的 Design System 模板結構（Starter Kit），內容包含按鈕、卡片、輸入框、色彩 Token、字體樣式與變體組合等。這份清單可用於建立你的系統，也可以作為開發團隊的對接基礎。

🧱 一份 Figma Design System 模板範本

（你可以直接在 Figma 裡依此命名與建立）

✅ 1. 🎨 Foundation（設計基礎樣式）

🔹 Color Styles

Color / Primary / 500    → #0052CC
Color / Primary / 600    → #003F9E
Color / Gray / 100       → #F5F5F5
Color / Gray / 900       → #121212
Color / Accent / Error   → #E53935
Color / Accent / Success → #43A047

可依 Brand / UI / States 分類命名。建議也建立 Text / Primary、Background / Surface 等。

🔹 Typography Styles

Text / Heading / H1      → 32px, Bold, Inter
Text / Heading / H2      → 24px, SemiBold
Text / Body / Regular    → 16px, Regular
Text / Caption / Small   → 12px, Regular

🔹 Spacing Tokens（僅為參考命名）

Spacing / XS   → 4px
Spacing / SM   → 8px
Spacing / MD   → 16px
Spacing / LG   → 24px
Spacing / XL   → 32px

🔹 Radius / Shadow / Border

Radius / Small   → 4px
Radius / Medium  → 8px
Shadow / Card    → 0 4px 12px rgba(0,0,0,0.1)
Border / Default → 1px solid #DDD

✅ 2. 🧩 Component Library（元件庫）

🔹 Buttons（Variants 建議）

Button / [Primary | Secondary | Ghost]
    - Size: [Small | Medium | Large]
    - State: [Default | Hover | Disabled | Loading]
    - Icon: [With / Without]

Auto Layout 設定：

• Padding: L-R 16px、T-B 10px
• Icons 建議設定為獨立 Component

🔹 Inputs

Input / TextField
    - State: [Default | Focus | Error | Disabled]
    - With Label or Without
Input / TextArea
    - Auto height + Character count (可選)

加上 Error message、Helper text 與 icon slot。

🔹 Cards

Card / Product
    - Image slot
    - Title / Description
    - Price / CTA Button
Card / Info
    - Icon / Title / Content

使用 Auto Layout 組合元件，設定 Fill container 支援 RWD。

🔹 Toggles / Checkbox / Radio

Toggle / [On | Off]
Checkbox / [Checked | Unchecked | Indeterminate]
Radio / [Selected | Unselected]

Variants 方式組合，並搭配 Label Component。

🔹 Alerts / Status Components

Alert / [Info | Success | Warning | Error]
    - Icon + Text + Close Button

背景顏色、文字顏色依狀態動態變更。

✅ 3. 🧱 Layout / Grid

🔹 Layout Grid（建議設計一頁說明）

• Mobile: 4 / 8 Columns, 16px Gutter
• Desktop: 12 Columns, 24~32px Margin
• 使用 Breakpoints 做自適應排版

✅ 4. 📁 Pages 結構建議（Figma Pages）

📁 Foundations
  - Colors
  - Typography
  - Spacing / Radius / Shadows

📁 Components
  - Buttons
  - Inputs
  - Cards
  - Icons
  - Alerts

📁 Layout & Grid
  - Breakpoints 說明
  - 範例排版組合

📁 Documentation
  - 命名規則說明
  - 使用指南（給設計師或開發者）

✅ 5. 🎯 元件命名規則（利於維護與搜尋）

📥 想要現成的 Figma 檔案模板？

雖然我無法直接傳送 Figma 檔案，但我可以給你一份線上重建版的教學或引導你自己做出一份相同結構的模板。你可以也考慮下載這些免費資源來輔助建構你的系統：

🆓 免費資源推薦