Semi

一、网站概况

Semi Design（简称 Semi）是由字节跳动抖音前端与 UED 团队研发并维护的现代化设计系统，定位为“连接设计师与开发者”的桥梁。网站于 2020 年前后上线，目前已稳定迭代超过 5 年，累计服务超过 10 万用户，在 GitHub 上收获了 10k+ Stars。Semi 的核心是一套基于 React 的 UI 组件库，搭配 Figma 设计资源包、设计转代码工具（D2C）和强大的主题定制引擎，帮助团队高效打造中后台企业级产品。运营方为字节跳动，团队内部已在飞书、抖音创作服务平台、剪映、火山引擎等多个重量级产品中使用。

二、核心功能详解

React 组件库与 Live Code 调试
Semi 提供了覆盖广泛的 React UI 组件，涵盖表单、导航、数据展示、反馈等常见场景。每个组件都支持在线代码编辑器即时演示（Live Code），开发者可以直接在文档页面上修改代码并预览效果，大幅降低试错成本。

设计转代码（D2C）
这是 Semi 最具差异化的功能之一。设计师在 Figma 中完成 UI 设计后，只需一键点击，Semi 即可在 3~5 秒内将设计稿直接转换为真实的前端代码。这一能力打通了设计与开发之间的交付壁垒，有效减少沟通成本和还原偏差。

主题定制引擎（DSM）
Semi 提供了超过 3000 个 Design Token，支持深度定制品牌风格。团队可以通过主题编辑器实时调整颜色、圆角、间距等视觉变量，效果即时生效，并且能一键同步到 Figma 设计资源中。飞书、抖音、剪映等多个主题均可直接从主题商店获取。

无障碍与国际化的完整支持
所有组件遵循 W3C 无障碍标准，包含完善的键盘交互、焦点管理和语义化标签。同时支持多语言、多时区以及 RTL（从右到左）布局，适合面向海外用户的产品场景。

三、使用教程 / 操作指南

第一步：注册与接入
Semi 无需单独注册账户，开发者直接在 GitHub 上访问仓库即可。使用 npm 或 yarn 安装：npm install @douyinfe/semi-ui，然后在 React 项目中引入即可使用。

第二步：设计师接入 Figma 资源
设计师在 Figma 社区搜索“Semi Design”即可获取官方 UIKit 和图标集。安装后即可使用与代码完全对齐的设计组件进行原型设计。

第三步：使用 D2C 生成代码
在 Figma 中选中已应用 Semi 组件的设计图层，运行 Semi 插件，点击“生成代码”，3~5 秒后即可获得可直接运行的 React 代码片段。

小技巧：主题定制时，建议先在主题编辑器中克隆默认主题，基于 3000+ Design Token 逐步调优，修改后一键同步到 Figma，设计稿和代码始终保持一致。

四、内容与资源质量

Semi 的组件库覆盖面广，经过字节内部多个大型项目的实际检验。代码质量方面，采用单元测试、E2E 测试和视觉对比测试三重保障，整体测试覆盖率达到 90%。文档体系非常完善：既有面向开发者的 API 文档和代码示例，也有面向设计师的 Figma 资源使用指南。网站还设有“博客”板块，深入解读无障碍设计、主题定制、D2C 演进等技术方案，内容含金量高。版本迭代节奏稳定，5 年多来持续更新，属于典型的背靠大厂、长期维护的开源项目。

五、适用人群与场景

适用人群：使用 React 技术栈的前端开发者、中后台产品 UI/UX 设计师、产品经理，以及需要快速搭建企业级管理系统的团队。

不适用人群：使用 Vue、Angular 等其他框架的开发者（Semi 目前仅支持 React），以及只需要少量简单 UI 组件的小型项目团队（Semi 的学习和配置成本相对较高）。

典型使用场景：
– 团队从零搭建中后台管理系统，需要一套开箱即用且风格统一的组件库。
– 设计师与开发者之间因设计稿还原度问题反复沟通，希望通过 D2C 工具直接生成代码来提效。
– 企业需要打造自有品牌的设计系统，基于 Semi 的 3000+ Design Token 快速定制专属主题。

六、优缺点分析

不足与缺点：
– 仅支持 React：Vue、Angular 等技术栈的开发者无法直接使用，生态受局限。
– 学习曲线存在：FA 架构设计虽然灵活，但对于新手来说需要一定时间理解组件结构。
– 偏向字节生态：部分设计理念和默认主题偏向字节内部产品风格，外部企业个性化改造需要额外投入。

与 Ant Design 相比，Semi 在 D2C 设计转代码和主题编辑器方面更具优势，但在社区生态和第三方插件丰富度上仍有差距。