构建可扩展的设计系统
跨团队与产品规模化设计系统的架构与治理。
设计系统进阶
为什么
设计系统消除冗余的 UI 工作，确保跨产品视觉一致性，将设计到代码的周期从数周缩短到数小时。没有设计系统，每个团队都会重新发明按钮、表单和调色板，导致风格漂移和维护债务。
根据 2024 Spark 设计系统调查，78% 拥有设计系统的组织报告产品交付更快。JavaScript is used by 62% of developers per the Stack Overflow 2024 survey，与设计令牌对齐的组件库将交接时间缩短 60%。
何时使用
当你有 3 个以上产品团队、共享品牌指南或组件库超过 20 个组件时，应采用设计系统。如果计划快速产品扩张，应更早开始。
如何做
1. 审计现有 UI — 截图所有页面，编目组件，识别重复项
2. 定义设计令牌 — 颜色、间距、排版、阴影、圆角作为命名值
3. 构建基础组件 — Button、Input、Card、Modal 带变体属性
4. 组合复合组件 — 从基础组件构建 Form、DataTable、Navigation
5. 编写文档 — Storybook 或 Ladle 含实时示例和属性表
6. 建立治理 — 变更 RFC 流程、版本发布、迁移指南
7. 分发 — npm 包（代码）、Figma 库（设计）、Tokens Studio 同步
示例
// tokens.ts
export const tokens = {
color: {
primary: { 500: "#6366f1", 600: "#4f46e5" },
gray: { 100: "#f1f5f9", 900: "#0f172a" },
},
spacing: { sm: "0.5rem", md: "1rem", lg: "1.5rem" },
radius: { sm: "0.375rem", md: "0.5rem", lg: "1rem" },
} as const;
// Button.tsx — 带变体的基础组件
interface ButtonProps {
variant?: "primary" | "secondary" | "ghost";
size?: "sm" | "md" | "lg";
children: React.ReactNode;
}
export function Button({ variant = "primary", size = "md", children }: ButtonProps) {
return <button className={cn(base, variants[variant], sizes[size])}>{children}</button>;
}
常见问题
- ⚠令牌漂移 — 团队用硬编码值覆盖令牌，破坏主题能力
- ⚠过度抽象 — 变体属性过多导致组件无法使用
- ⚠版本错位 — 设计团队用 Figma v3 而工程用 npm v2.1
- ⚠无法摇树优化 — 导入一个组件会将整个库拉入包中
最佳实践
- ✓使用 CSS 自定义属性实现运行时主题 — 令牌为 --color-primary-500
- ✓用 changesets 锁定版本 — 每个组件变更发布 semver 升级
- ✓基础组件保持在 150 行以内 — 将复合逻辑拆分到 hooks
- ✓发布 Figma 插件自动同步令牌到代码包
常见问题解答
设计系统和组件库有什么区别？
组件库只是代码（Button、Input）；设计系统加上令牌、文档、治理和 Figma 一致性。组件库是系统的一个产物。
如何从零开始构建设计系统？
审计现有 UI 找重复，定义颜色/间距/排版令牌，构建 5-10 个基础组件，再用 Storybook 文档化。第一天别求全。
设计令牌和 CSS 变量有什么区别？
CSS 变量是一种输出格式。令牌是真源值（JSON/Figma 中），通过 Style Dictionary 等编译为 CSS 变量、JS、Swift、Kotlin。
如何防止团队硬编码值导致令牌漂移？
CI 中用 stylelint-declaration-strict-value 强制——硬编码颜色/间距时构建失败。提供重命名 codemod，避免团队保留废弃别名。
什么时候设计系统是过度设计？
单一产品、单一团队、无主题需求时，共享组件文件夹即可。3+ 团队或 2+ 主题时正式系统才划算。