Back to Details

design-system-management

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design System Management

设计系统管理

Help build, maintain, and evolve design systems.
助力设计系统的构建、维护与演进。

Components of a Design System

设计系统的组成部分

Design Tokens

设计令牌

Atomic values that define the visual language:
  • Colors (brand, semantic, neutral)
  • Typography (scale, weights, line heights)
  • Spacing (scale, component padding)
  • Borders (radius, width)
  • Shadows (elevation levels)
  • Motion (durations, easings)
定义视觉语言的原子级值：
  • 颜色（品牌色、语义色、中性色）
  • 排版（字号层级、字重、行高）
  • 间距（间距层级、组件内边距）
  • 边框（圆角、宽度）
  • 阴影（层级高度）
  • 动效（时长、缓动曲线）

Components

组件

Reusable UI elements with defined:
  • Variants (primary, secondary, ghost)
  • States (default, hover, active, disabled, loading, error)
  • Sizes (sm, md, lg)
  • Behavior (interactions, animations)
  • Accessibility (ARIA, keyboard)
具备明确定义的可复用UI元素：
  • 变体（主要、次要、幽灵态）
  • 状态（默认、悬停、激活、禁用、加载、错误）
  • 尺寸（sm、md、lg）
  • 行为（交互、动画）
  • 无障碍性（ARIA、键盘操作）

Patterns

模式

Common UI solutions combining components:
  • Forms (input groups, validation, submission)
  • Navigation (sidebar, tabs, breadcrumbs)
  • Data display (tables, cards, lists)
  • Feedback (toasts, modals, inline messages)
组合组件而成的通用UI解决方案：
  • 表单（输入组、校验、提交）
  • 导航（侧边栏、标签页、面包屑）
  • 数据展示（表格、卡片、列表）
  • 反馈提示（消息提示框、模态框、行内消息）

Principles

设计原则

  1. Consistency over creativity — The system exists so teams don't reinvent the wheel
  2. Flexibility within constraints — Components should be composable, not rigid
  3. Document everything — If it's not documented, it doesn't exist
  4. Version and migrate — Breaking changes need migration paths
  1. 一致性优先于创意 — 设计系统的存在是为了避免团队重复造轮子
  2. 约束下的灵活性 — 组件应具备可组合性，而非僵化
  3. 万物皆需文档 — 未文档化的内容等同于不存在
  4. 版本化与迁移 — 破坏性变更需提供迁移路径