什么是设计系统
设计系统(Design System)是一套标准化的设计规范和可复用的组件库它包含了产品的所有视觉元素(颜色/字体/间距/阴影/圆角等)和交互组件(按钮/输入框/卡片/导航等)及其使用规则。对于昆明拥有多个产品线的企业(如云南白药集团旗下有药品/健康品/化妆品/医疗等多个APP)设计系统可以确保所有产品拥有一致的视觉形象和交互体验同时大幅提升设计和开发的协作效率。
Design Token体系
Design Token是设计系统的最基础单元它是设计决策的最小单位以变量形式存在。典型的Token体系包括：
- 颜色Token：primary-blue(#2563EB)/success-green(#16A34A)/warning-amber(#D97706)/danger-red(#DC2626)/neutral-gray系列
- 字体Token：font-size-xs(12px)/sm(14px)/base(16px)/lg(18px)/xl(20px)等
- 间距Token：space-1(4px)/space-2(8px)/space-3(12px)...space-12(48px)
- 圆角Token：radius-sm(4px)/radius-md(8px)/radius-lg(12px)/radius-full(9999px)
- 阴影Token：shadow-sm/shadow-md/shadow-lg
这些Token在Figma中定义后可以自动同步到代码库(iOS Swift/Android Kotlin/Web CSS)实现设计与开发的无缝衔接。
组件库搭建
基于Token体系逐步构建原子组件(Button/Input/Icon)→分子组件(SearchBar/FormField)→ organism组件(Card/Header/NavBar)→ Template(登录页/列表页/详情页)。每个组件都需要定义：各种状态(default/hover/pressed/disabled/loading)的视觉效果；交互行为说明；无障碍属性(aria-label/role等)；代码示例和使用禁忌。