使用 Zeplin 設計規範 Styleguide 教學

當你使用 Zeplin 建立「設計規範（Styleguide）」時，目的在於標準化整個產品的設計語言，讓設計師與開發者之間保持一致，並減少溝通成本。以下是一份完整的 Zeplin Styleguide 教學，適合 UX/UI 設計師、設計系統管理者或開發協作流程中需要標準設計規範的團隊。

📘 Zeplin Styleguide 教學指南

🔰 什麼是 Zeplin 的 Styleguide？

Zeplin 的 Styleguide 是一個可共用、可標準化的設計資源區，可儲存並展示：

• 色彩（Colors）
• 字體樣式（Text Styles）
• 元件（Components）
• Spacing、圖示、Token 等（進階）

並能將這些規範自動套用到設計稿畫板，提供開發者即時參照。

🛠️ 步驟一：建立 Styleguide

1. 登入 Zeplin
2. 點擊左側選單 ➜ 選擇「Styleguides」
3. 點擊「Create Styleguide」
4. 輸入名稱（建議為：Design System 名稱 + 平台，例如 Core Web）

你也可以選擇：

• Local Styleguide（僅此帳戶或空間可見）
• Organization Styleguide（全組織共用，適合大型團隊）

🎨 步驟二：匯入色彩與字體樣式

✅ 匯入方式一：從設計工具自動同步（推薦）

以 Figma 為例：

1. 在 Figma 中選好「文字樣式」與「顏色樣式」
2. 點擊 Figma Plugin ➜ 選擇 Zeplin Plugin ➜ 點選「Publish Styles」
3. 選擇匯入至哪個 Zeplin Styleguide

這樣 Zeplin 就會自動顯示你的：

• Primary / Secondary 顏色
• 字型大小 / Weight / Line Height
• 命名（例如：Body/Small、Title/H1）

✅ 匯入方式二：手動新增

在 Styleguide 中可以：

• 點選「Colors」➜ + ➜ 輸入 HEX 值、命名（如 Primary/Blue）
• 點選「Text Styles」➜ + ➜ 設定 Font, Size, Line Height

🧩 步驟三：新增元件 Components（模組化 UI）

1. 匯出畫板至 Zeplin 時，將元件轉為 Symbol（Sketch）、Component（Figma）
2. Zeplin 會自動偵測元件，並分類儲存至 Components 區域
3. 可在每個元件上加入：
   • 說明文（使用 Note）
   • 狀態（Hover, Active, Disabled）
   • 對應開發資源（Storybook、GitHub 連結）

📌 提示：使用 Connected Components 將設計元件連接開發元件，讓開發能直接查看元件 code。

🧠 步驟四：補充元件與 Token 的說明（進階）

Zeplin 支援設計系統 Token 管理（如 spacing, border radius, shadows）

1. 在 Styleguide ➜ 「Token」區域設定：
   • Spacing（如：8px, 16px）
   • Border Radius（如：4px 圓角）
   • Shadow 規則（如：Elevation）
2. 可加入「Variants」變化，例如：
   • Button: Primary, Secondary, Disabled
   • Input Field: Focus, Error, Filled

🤝 步驟五：與開發協作

• 開發者進入 Zeplin Project 時，自動參照 Styleguide 中定義的規範
• 若設計元件已對應 Styleguide 元件，則會有標記「🔗 Linked」
• 可以將元件與程式碼（如 Storybook）綁定，達成設計與程式一致性

✅ 教學小結

📦 實作範例（命名建議）

顏色命名範例：

Brand / Primary / #0055FF  
Text / Primary / #000000  
Background / Light / #FFFFFF

字體樣式範例：

Heading / H1 / 32px / Bold  
Body / Medium / 16px / Regular  
Caption / Small / 12px / Medium

元件命名：

Button / Primary  
Input / Text Field / Error State  
Card / Product Card / Hover