SemiDesign

设计系统定位

Semi Design 是由抖音前端与 UED 团队开发并维护的企业级设计系统。它面向设计师与前端开发者，提供从设计规范到工程化组件的一体化解决方案，目标在于降低产品设计与研发之间的协作成本。

该系统的核心思路不是单纯输出一套组件库，而是将设计语言、交互范式与代码实现绑定在同一套约束体系内，使设计稿与最终产品在视觉和交互层面保持较高一致性。

核心能力

1. 设计资源与规范

Semi Design 提供完整的设计变量体系，涵盖色彩、字体、间距、圆角、阴影等基础设计令牌。设计师可在 Figma 等工具中直接调用这些资源，避免从零搭建规范。

同时，系统内置了常见业务场景的交互范式，包括表单、导航、数据展示、反馈等模块。这些范式经过业务验证，可直接作为设计基线使用。

2. 组件库与工程化

前端侧提供 React 组件库，覆盖以下主要类别：

组件支持按需加载、主题定制与国际化。主题系统基于 CSS 变量构建，可通过覆盖设计令牌实现品牌换肤，无需修改组件源码。

3. 设计与代码的对应关系

Semi Design 的一个关键设计是“设计令牌驱动”。设计工具中的变量与代码中的 token 使用同一套命名规范，设计师调整颜色或间距后，开发者只需同步更新对应 token 值即可完成全局变更。这种机制减少了设计走查中常见的“像素级不一致”问题。

适用场景

该系统适合以下类型的使用者：

• 中大型团队：需要统一多产品线视觉与交互规范
• React 技术栈项目：组件库原生基于 React，生态兼容性较好
• 对主题定制有明确需求的业务：如多品牌、多租户或深色模式场景
• 设计与研发协作紧密的团队：希望通过工具化手段减少沟通损耗

获取与使用建议

访问 semi.design/zh-CN 可查看完整文档、组件示例与设计资源下载入口。建议从以下步骤开始：

1. 阅读“设计语言”章节，理解基础设计令牌与原则
2. 在真实项目中试用核心组件，评估与现有技术栈的兼容性
3. 根据业务需要配置主题变量，验证定制能力
4. 将设计资源同步给设计团队，建立统一的协作基线

对于已有成熟设计体系的团队，Semi Design 的组件层与主题层可以拆分使用，不必全量引入。