Repolode
提交项目
DouyinFE

DouyinFE/semi-design

基于 React 的 UI 组件库与设计系统，提供 80 多个组件、Figma 设计转代码及 3000 多个设计令牌。

在 GitHub 查看官网
Star
10,470
Fork
853
未关闭 Issue
626
最近提交
前天

这是什么？

Semi UI 是一套 React 组件库，搭配设计系统使用，面向希望打通设计与开发流程的团队。库中包含 80 多个组件，均支持键盘交互、焦点管理和 ARIA 无障碍属性，同时提供国际化、时区与 RTL 支持，并兼容 SSR。

项目提供 Figma 插件实现设计转代码，可输出 JSX 配合 SCSS、Emotion 或 Tailwind，也可输出 JSON Schema DSL；反向的代码转设计功能可根据主题生成与代码保持一致的 Figma UI Kit。设计系统管理工具 Semi DSM 提供 3000 多个设计令牌，便于团队在 Semi UI 基础上定义自己的视觉体系。

库使用 TypeScript 编写，采用 Foundation/Adapter 架构，也可封装为 Web Components，适用于需要 DOM 隔离的 SDK 或浏览器插件场景。通过 npm 安装包名为 @douyinfe/semi-ui。

核心功能

  • 0180 多个 React 组件，支持键盘交互与 ARIA 无障碍属性
  • 02Figma 插件可将设计稿转换为 JSX，配合 SCSS、Emotion 或 Tailwind 使用
  • 03代码转设计，生成与代码主题一致的 Figma UI Kit
  • 043000 多个设计令牌，用于定制设计系统
  • 05提供 TypeScript 类型、SSR 兼容以及 RTL 与国际化支持

适用场景

  • 使用现成组件集快速搭建管理后台或内部 React 应用
  • 借助官方插件将 Figma 设计稿快速转换为 React 代码
  • 维护设计与代码同步的共享设计令牌体系
  • 利用 Web Components 能力开发需要 DOM 隔离的浏览器插件或 SDK 组件

快速上手

  1. 1

    使用 npm 安装该包

    npm install @douyinfe/semi-ui
  2. 2

    从该包导入组件，并在 React 应用中渲染，参见 README 示例

使用前须知

  • 它是 React 组件库，只适用于基于 React 的项目。
  • README 列出的支持范围仅为主流现代浏览器的最新两个版本。

标签

#react#ui-library#design-system#design-tokens#figma#typescript#dark-mode#design-to-code#ai-friendly#code2design

常见问题

semi-design 是什么？
基于 React 的 UI 组件库与设计系统，提供 80 多个组件、Figma 设计转代码及 3000 多个设计令牌。 Semi UI 是一套 React 组件库，搭配设计系统使用，面向希望打通设计与开发流程的团队。库中包含 80 多个组件，均支持键盘交互、焦点管理和 ARIA 无障碍属性，同时提供国际化、时区与 RTL 支持，并兼容 SSR。
semi-design 可以免费使用吗？用的什么许可证？
semi-design 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。
semi-design 还在维护吗？
活跃维护中。semi-design 最近一次提交是在 2026年11月5日。
semi-design 适合用来做什么？
使用现成组件集快速搭建管理后台或内部 React 应用 借助官方插件将 Figma 设计稿快速转换为 React 代码 维护设计与代码同步的共享设计令牌体系 利用 Web Components 能力开发需要 DOM 隔离的浏览器插件或 SDK 组件
semi-design 怎么安装和运行？
使用 npm 安装该包: npm install @douyinfe/semi-ui 从该包导入组件，并在 React 应用中渲染，参见 README 示例
在哪里获取 semi-design？
源代码和安装说明在 GitHub 上：https://github.com/DouyinFE/semi-design

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目