DEV Community

張旭豐
張旭豐

Posted on

設計系統核心架構與實作方法

設計系統（Design System）核心架構與實作方法報告

摘要

本報告探討設計系統的核心架構與實作方法，涵蓋設計令牌（Design Tokens）、元件庫（Component Library）、以及文件撰寫（Documentation）三大面向。

一、設計系統概述

什麼是設計系統？

設計系統是一套共享的語言、原則和工具，用於指導產品設計與開發。它包含：

  • 設計令牌：定義視覺樣式的基礎變數
  • 元件庫：可重複使用的 UI 組件
  • 指南與文件：說明如何使用這些元素的規範

核心價值

  1. 一致性：確保產品在不同平台和團隊間保持統一
  2. 效率：減少重複設計與開發工作
  3. 可擴展性：支援大規模產品的持續迭代
  4. 協作：促進設計師與開發者的溝通

二、設計令牌（Design Tokens）

定義

設計令牌是視覺設計屬性的命名儲存，例如顏色、排版、間距、陰影等。它們是設計系統的「原子」。

核心類型

類型 說明 範例
基礎令牌 原始值，不依賴其他令牌 #FF0000
語意令牌 基於基礎令牌，具有業務含義 color-error
實例令牌 特定情境下的令牌 button-primary-bg

常見類別

  1. 顏色（Colors）

    • 主色、輔助色、狀態色（成功、警告、錯誤）
    • 明度等級（light/dark mode）

  2. 排版（Typography）

    • 字體族（font-family）
    • 字級（font-size）
    • 行高（line-height）
    • 字重（font-weight）

  3. 間距（Spacing）

    • 使用統一的間距比例（如 4px 或 8px 基準）

  4. 圓角（Border Radius）

    • 小、中、大、全圓角

  5. 陰影（Shadows）

    • 不同層級的陰影效果

  6. 斷點（Breakpoints）

    • 響應式設計的螢幕寬度閾值

實作方法

1. 令牌格式

  • JSON：最常見的序列化格式
  • CSS Custom Properties：直接在 CSS 中使用
  • Tokens Studio / Style Dictionary：專業工具

2. 工具推薦

  • Style Dictionary（AWS）：將令牌轉換為多平台格式
  • Tokens Studio：Figma 插件，支援令牌同步
  • Theming Engine：React/Vue 的樣式管理庫

3. 範例（JSON） 

{
  "color": {
    "primary": {
      "base": { "value": "#1A73E8" },
      "light": { "value": "#E8F0FE" },
      "dark": { "value": "#0D47A1" }
    },
    "text": {
      "primary": { "value": "#202124" },
      "secondary": { "value": "#5F6368" }
    }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" },
    "xl": { "value": "32px" }
  }
}
Enter fullscreen mode Exit fullscreen mode

4. 最佳實踐

  • 使用語意名稱而非描述性名稱（用 color-text-primary 而非 color-blue-500）
  • 建立令牌階層：基礎 -> 語意 -> 實例
  • 支援主題切換（明/暗模式）
  • 自動化令牌從設計工具到程式碼的轉換

三、元件庫（Component Library）

定義

元件庫是可重複使用的 UI 組件集合，每個元件封裝了結構、樣式和行為。

核心原則

  1. 單一職責：每個元件專注於一個功能
  2. 組合性：元件可以嵌套和組合
  3. 可自訂：提供 props/config 來調整外觀與行為
  4. 無障礙：符合 WCAG 標準
  5. 響應式：適應不同螢幕尺寸

元件分類

1. 基礎元件（Atoms）

  • Button（按鈕）
  • Input（輸入框）
  • Icon（圖示）
  • Badge（標籤）
  • Avatar（頭像）

2. 組合元件（Molecules）

  • Search Bar（搜尋列 = Input + Icon + Button）
  • Form Field（表單欄位 = Label + Input + Error Message）
  • Card Header（卡片標頭 = Title + Actions）

3. 複雜元件（Organisms）

  • Navigation Bar（導航列）
  • Data Table（資料表格）
  • Modal（對話框）
  • Sidebar（側邊欄）

4. 頁面模板（Templates）

  • Dashboard Layout
  • Form Page
  • List Page

實作方法

1. 技術選型

  • React：Storybook + styled-components / Tailwind CSS
  • Vue：Storybook + VueUse / UnoCSS
  • Angular：Angular CDK + NgRx
  • 跨框架：Lit Web Components

2. 元件結構範例（React） 

// Button.jsx
import React from 'react';
import { token } from '@design-system/tokens';

const Button = ({ 
  variant = 'primary', 
  size = 'medium', 
  disabled = false,
  children,
  onClick 
}) => {
  const styles = {
    primary: { backgroundColor: token.color.primary.base },
    secondary: { backgroundColor: token.color.secondary.base },
    outline: { border: `1px solid ${token.color.primary.base}` }
  };

  return (
    <button
      className={`btn btn--${variant} btn--${size}`}
      style={{ ...styles[variant] }}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;
Enter fullscreen mode Exit fullscreen mode

3. 測試策略

  • 單元測試：測試元件邏輯與 props
  • 視覺測試：使用 Chromatic / BackstopJS 檢測視覺回歸
  • 無障礙測試：使用 axe-core 檢查無障礙合規性
  • 互動測試：使用 Cypress / Playwright 測試使用者流程

4. 文件化（Storybook） 

// Button.stories.jsx
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary', 'outline'] },
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    disabled: { control: 'boolean' }
  }
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = { variant: 'primary', children: 'Primary Button' };
Enter fullscreen mode Exit fullscreen mode

最佳實踐

  • 使用 Atomic Design 方法論組織元件
  • 元件應與框架解耦（考慮 Web Components）
  • 提供 API 參考文件（props、events、slots）
  • 維護 變更日誌（Changelog）
  • 定期進行 元件審視，移除過時的元件

四、文件撰寫（Documentation）

重要性

好的文件是使用設計系統的關鍵。它確保團隊正確、一致地使用元件。

文件內容

1. 設計原則

  • 設計哲學與目標
  • 視覺風格指南
  • 品牌調性說明

2. 使用指南

  • 何時使用：元件的適用場景
  • 何時不使用：避免濫用的情況
  • 最佳實踐：常見的使用模式
  • 反模式：需要避免的做法

3. API 參考

  • Props / Attributes 說明
  • Events / Callbacks
  • Slots / Content projection
  • 預設值與必填項

4. 程式碼範例

  • 基本用法
  • 進階用法
  • 常見場景的完整範例

5. 無障礙指南

  • ARIA 屬性說明
  • 鍵盤導航支援
  • 螢幕閱讀器相容性

文件工具

工具 特點
Storybook 元件視覺化文件，互動式展示
GitBook 結構化文檔平台
Docusaurus React 驅動的文件網站
Frontify 品牌與設計指南平台
Zeroheight 專為設計系統打造的文檔工具
Supernova 設計到程式碼的轉換平台

文件最佳實踐

  1. 保持更新：每次元件變更都要同步更新文件
  2. 搜尋友好：確保文件易於搜尋與瀏覽
  3. 互動式範例：提供可編輯的程式碼範例
  4. 版本控制：記錄不同版本的 API 變更
  5. 多語言支援：服務國際團隊
  6. 貢獻指南：說明如何參與文件改進

五、整體架構

設計系統架構概覽：

層級由高到低：

[文件與指南層]

  • 設計原則
  • 使用指南
  • API 參考

[元件庫層]

  • 基礎元件 (Atoms)
  • 組合元件 (Molecules)
  • 複雜元件/模板 (Organisms/Templates)

[設計令牌層]

  • 顏色
  • 排版
  • 間距
  • 陰影
  • 斷點

[工具與流程層]

  • Figma -> Style Dictionary -> 程式碼生成

六、實作步驟建議

階段 1：基礎建設

  1. 定義設計令牌（顏色、排版、間距）
  2. 建立基礎元件（Button、Input、Icon）
  3. 搭建文件站（Storybook）

階段 2：擴展元件

  1. 開發組合元件（Form Field、Card）
  2. 開發複雜元件（Modal、DataTable）
  3. 補充使用指南與範例

階段 3：成熟與治理

  1. 建立貢獻指南
  2. 實施版本控制與變更日誌
  3. 定期元件審視與清理
  4. 收集使用者回饋並持續改進

七、知名設計系統案例

設計系統 公司 特點
Material Design Google 完整的設計語言與元件
Carbon IBM 開放源碼，多框架支援
Fluent UI Microsoft 深度整合 Windows/macOS
Polaris Shopify 電商專屬設計系統
Atlassian Design Atlassian 企業級 SaaS 設計系統
Ant Design 螞蟻集團 中文生態系最廣泛採用

八、結論

設計系統的成功取決於三個核心要素的平衡：

  1. 設計令牌提供一致的視覺基礎
  2. 元件庫提供可重複使用的實作
  3. 文件撰寫確保知識傳承與正確使用

實作時應遵循「由簡入繁」的原則，從基礎令牌和核心元件開始，逐步擴展。同時，建立明確的治理機制與貢獻流程，才能讓設計系統持續發揮價值。

報告日期：2026-06-24

Top comments (0)