抖音团队出品，企业应用设计系统Semi Design开源了

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是由抖音前端技术团队开源的企业产品设计系统——semi design。

 

 

Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。

特性

设计 —— 不变与多变

Semi Design 始终致力于提升企业应用的体验。通过提炼简洁轻量，现代化的设计风格，细致打磨原子组件的交互，并在字节跳动的海量业务场景下进行迭代，沉淀了一套优质的默认基础 —— 它将保证 Semi 打造的企业应用产品，天生拥有连贯一致的「语言」，和明显优于陈旧系统的质量基线。

 

主题化 —— 品牌一键定制

通过对数千个设计变量 (Design Token) 的分层和梳理，设计师和开发者可在全局、乃至组件级别，对 表现层进行深度定制 —— 即使你不了解 css，也可以通过主题编辑器(DSM)，打造符合业务和品牌多样化视觉需求的风格。开发者则可通过 npm 包一键发布并替换，轻松定制，易于管理。

 

深色模式

为了兼容更多用户群体在不同生产环境下的使用偏好，作为浅色模式的补充，Semi Design 的任意主题均自动支持深色模式，并能在应用运行时动态切换。

 

国际化 —— 多元兼容

在字节跳动全球化业务实践下，Semi Design 经过 30+ 版本迭代，已具备完善的国际化特性 —— 覆盖简/繁体中文，英语、日语、韩语、葡萄牙语等 10+ 语言，日期时间组件提供全球时区支持，全部组件可自动适配阿拉伯文 RTL 布局。

 

跨框架技术方案

Semi Design 采用了一套跨前端框架技术方案，F/A 分层设计，将每个组件的 JAVAScript 拆分为两部分：Foundation 和 Adapter，这使得我们可以通过仅重新实现适配器来跨框架重用 Foundation 代码，例如 React、Vue、Angular、Svelte 或者 WebComponent，快速打造不同平台上的通用组件库。

 

• Foundation：包含最能代表 Semi Design 组件交互的业务逻辑，包括 UI 行为触发后的各种计算、分支判断等逻辑，它并不直接操作或者引用 DOM，任意需要 DOM 操作，驱动组件渲染更新的部分会委派给 Adapter 执行。
• Adapter：是一个接口，具有 Foundation 实现 Semi Design 业务逻辑所需的所有方法，并负责 1. 组件 DOM 结构声明 2.负责所有跟 DOM 操作/更新相关的逻辑，通常会使用框架 API 进行 setState、getState、addEventListener、removeListener 等操作。适配器可以有许多实现，允许与不同框架的互操作性。

提示：目前只实现了 Adapter 的 React 版本，你可以直接通过引入 semi-ui 来使用 React 组件。

 

 

物料社区

过去一年来，字节内部各业务线团队的用户围绕 Semi 的基础组件，自主设计和开发了包含表单、多媒体、用户引导、消息通知、图表等种类繁多的 UI 物料，并发布在物料市场。Semi 的用户可基于产品需求，查找物料并复用，大幅节省开发成本；同时，优质的 UI 资源也得以形成积累和传播。

 

Design to Code

未来，Design to Code 方案将通过代码扫描，完成组件级别的识别与转译。同时，结合团队从海量业务场景中沉淀的页面模板，用户将能以极低的成本，快速完成前端页面的克隆和结构还原。

 

A11y

Semi 始终关注 Web 可访问性，当前我们从语义化标签，色盘算法可对比度、文本感知性等方面实现了一部分的无障碍支持，但我们相信这仍有不少提升的空间。我们后续会持续关注并提升组件的可操作性、可感知性，为基于鼠标的操作提供更便捷的键盘交互，提供更完善的 WAI-ARIA 支持。

多框架

高度可扩展性作为 Semi 的核心设计原则，贯穿于 Semi 的代码架构设计、API 设计、样式层抽象等各个方面。得益于 Foundation/Adapter 架构设计以及样式文件分层原则，Semi 非常易于迁移到其他前端框架。在 2.0 版本，我们基于 Typescript 对 Semi 进行了重写，期望在多框架迁移适配过程中依然能有良好的开发体验以及质量保障。

设计资源

设计师可以从 Figma 组件库 Semi Design System 获得色盘、样式库及组件。

 

兼容性

现代浏览器（Semi 暗色模式/样式文件依赖于 CSS variable，最低版本要求为 edge，ie11 及以下均不支持）

 

安装使用

1、安装 Semi

# 使用 npm npm i @douyinfe/semi-ui # 使用 yarn yarn add @douyinfe/semi-ui # 使用 pnpm pnpm add @douyinfe/semi-ui

2、模块化方式使用组件

在 Webpack、create-react-App 或 Vite 项目中使用时，无需进行任何编译项配置，直接使用即可。构建时所有相关资源均会按需打包。

import React, { Component } from 'react'; import { Button, Toast } from '@douyinfe/semi-ui'; class Demo extends React.Component { constructor() { super(); } render() { return Toast.warning({ content: 'welcome' })}>Hello Semi; } }

推荐在项目中引入 reset.css，它可以重置浏览器自带的默认样式，避免不同UA之间的样式差异。

 

3、在 Next.js 中使用

当你在 Next.js 项目中使用时，需要搭配 Semi 提供的编译插件（由于 Next.js 不允许 npm 包从 node_modules 中 import 样式文件，需要配合插件将默认的import CSS 语句移除，并且手动引入 CSS）

在项目根目录安装 @douyinfe/semi-next 。

# 使用 npm npm i @douyinfe/semi-next # 使用 yarn yarn add @douyinfe/semi-next # 使用 pnpm pnpm add @douyinfe/semi-next

Step2

在项目根目录创建 next.config.js，并进行配置。

// next.config.js const semi = require('@douyinfe/semi-next').default({ /* the extension options */ }); module.exports = semi({ // your custom Next.js configuration });

Step3

在 global.css 中引入全量的 semi css。目前在 Next.js 中不支持按需引入。

/* styles/globals.css */ @import '~@douyinfe/semi-ui/dist/css/semi.min.css';

如何在 Next.js 中使用主题包：你需要更换 Step3 中 import 语句的路径，将默认主题 CSS 产物更换为你定制的主题包中的 CSS 产物，例如主题包为 @semi-bot/semi-theme-nyx-c

/* styles/globals.css */ @import '~@semi-bot/semi-theme-nyx-c/semi.min.css';

开源协议：MIT

开源地址：https://github.com/DouyinFE/semi-design