Semi Design：3000+设计Token助力高效React UI开发

快讯
, , ,
1

项目概述

semi-design 是由抖音前端团队打造的一套现代化、全面且灵活的设计系统以及 React UI 组件库。随着前端开发的复杂度提升，团队往往需要兼顾设计一致性与开发效率。semi-design 旨在打通 DesignOps 与 DevOps，帮助开发者和设计师高效协作、快速搭建高质量的 React 应用。该项目内置 3000+ 设计 Token，极大提升了主题定制和品牌化的能力，让每个团队都能轻松实现独有的视觉风格。不止于丰富强大的组件库，semi-design 还实现了一键从设计稿到代码的便捷流程，让“设计即代码”成为现实。得益于严格的可访问性标准、完整的 TypeScript 支持以及稳定的测试体系，semi-design 为现代 Web 应用提供了可靠的底层支撑，是构建大型、复杂界面应用的理想选择。

项目截图

项目统计

:bar_chart: 项目概况

:star: 9300 Stars | :fork_and_knife: 781 Forks | :eyes: 9300 Watchers | :bug: 293 Issues

:page_facing_up: 开源协议: Other | :date: 创建于: 2021-10-25 | :counterclockwise_arrows_button: 更新于: 2025-07-29

:laptop: 技术栈

该项目主要使用 TypeScript 开发，占代码库的 47.7%。此外还包含 JavaScript (41.2%)、SCSS (11.0%)、HTML (0.1%)

核心功能

Semi-Design 用现代化的方式诠释了 UI 组件库的强大与灵活，让开发者和设计师都能在一个高效的生态中尽情挥洒创意。它不仅仅是简单的 React UI 库，更是一个可定制、可拓展的完整设计体系，助你从“设计到代码”一气呵成。下面是这个项目的主要魅力所在：

  • 丰富的组件库：内置数十种常用乃至高阶的 UI 组件，涵盖按钮、输入框、表单、表格、图表等，满足几乎所有前端页面场景需求，让页面开发变得即拿即用、极速高效。
  • 超强 Design Token 支持：超过 3000 个 Design Tokens，可轻松自定义主题、配色、排版等，全方位打造属于自己的品牌风格，让设计表达不再受限。
  • 一键式设计到代码流程：支持与 Figma 深度联动，设计稿直接转生成代码，极大减少设计与开发间的沟通成本，提升团队协作效率。
  • 类型安全·TypeScript 全覆盖：全量 TypeScript 支持，让你的开发体验更丝滑，智能提示、类型检查一应俱全，维护大型项目也得心应手。
  • 灵活的定制能力：高度可配置性，无论是个性化主题还是组件功能扩展，都可以方便地按需调整，满足企业级应用和个人项目的多样需求。
  • 与 DesignOps & DevOps 无缝衔接：从设计到开发上线，链接流程每一个环节，让你的产品从“灵感”到“落地”一路畅通无阻。
  • 质量保障与可测试性：集成 Chromatic、Cypress 等可视化和自动化测试工具，确保每一个组件都稳定可靠。

更多实用又有趣的功能还在持续完善中，Semi-Design 持续注重开发者体验，助你专注于创造更出色的交互界面！

项目截图

技术架构

Semi-Design 采用现代前端技术栈，基于 TypeScript 开发，全面提升类型安全性与开发体验。作为一套高度灵活的 React UI 组件库，Semi-Design 利用 React 的组件化、声明式和高性能渲染，实现了设计系统与产品开发的无缝衔接。项目聚焦于“设计到代码一键直达”，围绕 3000+ Design Token 构建通用且可定制的设计语言，为企业级应用和中大型项目提供统一的视觉和交互规范。

核心技术选型上，Semi-Design 深度整合 DesignOps 与 DevOps 流程，通过设计资产（如 Figma 的UIKit）、Design Token 实现设计与开发一致性，提升协作效率。组件实现遵循高内聚、低耦合原则，每个组件均支持按需加载（Tree Shaking），优化包体积与性能。测试层面，借助 Chromatic 与 Cypress 保障 UI 质量与交互稳定性。

整个架构强调层次清晰与可扩展性：底层为设计 token 体系，中间层为可组合的基础和高级 UI 组件，上层则通过主题定制与国际化扩展，支持多场景、多品牌应用。Semi-Design 不仅专注于设计资源的统一与复用，还积极融入设计工程方法论，实现设计到代码的高效转化，加速产品研发与交付。

使用指南

要开始使用 Semi Design UI 库，首先确保你的开发环境已安装 Node.js 和 npm。推荐基于 React 16.8 及以上版本进行开发。

1. 安装依赖包

在你的 React 项目目录下，运行以下命令安装 Semi Design UI 组件库：

npm install @douyinfe/semi-ui @douyinfe/semi-icons

或使用 yarn：

yarn add @douyinfe/semi-ui @douyinfe/semi-icons

2. 引入样式

Semi Design 会自动按需引入 CSS，无需手动引入。但如需自定义主题，可引入全局样式并配置 Design Token。

3. 基本使用示例

在你的 React 组件中直接引入使用。例如：

import React from 'react';
import { Button } from '@douyinfe/semi-ui';

const App = () => (
  <Button type="primary">Hello Semi UI</Button>
);

export default App;

4. 自定义主题（可选）

可通过 ConfigProvider 实现全局主题定制：

import { ConfigProvider } from '@douyinfe/semi-ui';

<ConfigProvider
  theme={{
    primaryColor: '#2B6EF6'
  }}
>
  <App />
</ConfigProvider>

5. 按需引入（可选进阶）

Semi UI 默认支持按需加载，无需额外配置。但如需进一步优化打包体积，建议结合 babel-plugin-import：

npm install babel-plugin-import --save-dev

在 .babelrc 中添加配置：

{
  "plugins": [
    ["import", {
      "libraryName": "@douyinfe/semi-ui",
      "libraryDirectory": "lib/es/components"
    }]
  ]
}

这样你就可以快速在项目中使用 Semi Design 提供的丰富组件，助力高效构建现代化 React 应用。更多高级用法和自定义方案可参考官方文档。

总结评价

semi-design 是由字节跳动团队开源的一款现代化 React UI 组件库，兼具设计系统和丰富代码实现。项目以 9000+ stars 和活跃的维护反映出较高的社区关注度。其支持 3000+ Design Tokens，可快速定制主题，便于团队统一设计风格。此外，semi-design 提供与 Figma 等设计工具的良好集成，支持一键从设计稿到代码，对于提升 DesignOps 与 DevOps 协作效率有实际帮助。代码质量较高，测试完善，适合中大型企业或有定制化需求的项目使用。然而，相较于更成熟的国际 UI 库，生态和第三方资源尚有提升空间。建议对国产 UI 一体化落地、设计开发协同有要求的团队重点关注，同时期待其生态进一步扩展和社区持续活跃。

项目截图

项目截图

项目截图
项目截图1280×622 69.1 KB