点击上方蓝字关注我们
IT 咖啡馆，探索无限可能！
恭喜你发现了这个宝藏，这里你会发现优质的开源项目、IT知识和有趣的内容。
不知道你用没用过飞书，对于飞书的UI风格你是不是喜欢呢？如果你也想要这种视觉风格，那不用发愁了。
今天我们分享的开源项目，它就是由字节跳动抖音前端与 UED 团队开源的一款UI库，如果你喜欢字节的风格，那不妨来试试看，它就是：semi-design
semi-design 是什么
Semi Design 是现代、全面、灵活的设计系统和 UI 库，由字节跳动抖音前端与 UED 团队设计、开发并维护，是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案，可用于快速搭建美观的 React 应用。
semi-design的特性包括了以下：
💪 60+高质量组件
💅 Code2Design，根据不同主题自动生成 Figma UI Kit，保持代码与设计同源
🚀 强大的 D2C （Design2Code）支持，Figma 设计稿一键转出真实代码，快速构建应用
💕 完善的无障碍支持，为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
🎨 设计系统管理工具 Semi DSM，多达2000+ Design Token，快速定制你的专属设计系统
🌍 国际化支持 20+ 语言，提供完备的多语言、多时区、RTL支持
⚙️ 稳定的质量保障，覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
🥳 支持 SSR
👏 使用 TypeScript, 良好的类型定义，基于 Foundation / Adapter 架构，源码易于阅读 / 贡献
📦 轻松兼容 web components，提供完整适配方案，更适合用于构建 SDK、浏览器插件等需要 DOM 隔离的场景
设计的不变与多变
近年来，越来越多的 SaaS 产品如 Slack，Notion，Figma，开始依靠优秀的用户体验来推动增长。对产品的评判标准，已从采购方逐渐转移到终端用户；一个产品体验的好与坏，将直接影响用户是否继续使用，B 端产品的体验设计也变得愈发重要。
Semi Design 始终致力于提升企业应用的体验。通过提炼简洁轻量，现代化的设计风格，细致打磨原子组件的交互，并在字节跳动的海量业务场景下进行迭代，沉淀了一套优质的默认基础 —— 它将保证 Semi 打造的企业应用产品，天生拥有连贯一致的「语言」，和明显优于陈旧系统的质量基线。
此外，一个好的设计系统必须是「活的」，它需要能跟随业务的增长而发展、更新。因此，Semi 从未尝试约束用户，固化所谓的「统一规范」，而是在默认基础上，充分进行模块化解耦，并开放自定义能力，方便用户进行二次裁剪与定制，搭建适用于不同形态产品的前端资产。
安装和使用
安装
安装
Semi 支持搭配 React v16、v17、v18 版本使用
# 使用 npmnpm i @douyinfe/semi-ui# 使用 yarnyarn add @douyinfe/semi-ui# 使用 pnpmpnpm add @douyinfe/semi-ui
使用组件
使用组件
在 Webpack、Rspack、create-react-app 或 Vite 项目中使用时，无需进行任何编译项配置，直接使用即可。构建时所有相关资源均会按需打包。
import React, { Component } from 'react';import { Button, Toast } from '@douyinfe/semi-ui';const SemiApp = () => {return (<Button onClick={() => Toast.warning({ content: 'welcome' })}>Hello Semi</Button>)}
推荐在项目中引入 reset.css，它可以重置浏览器自带的默认样式，避免不同UA之间的样式差异。
在 NextJs 中使用
如果仅使用默认主题, 在
transpilePackages追加 Semi 相关的 package即可 （Next.js 版本要求 >= v13.1 ）
// next.config.jsconst nextConfig = {+ transpilePackages: ['@douyinfe/semi-ui', '@douyinfe/semi-icons', '@douyinfe/semi-illustrations'],};module.exports = nextConfig;
如果需要使用定制主题包或 Next.js版本低于 v13.1，则需要配合 Semi 提供的编译插件
@douyinfe/semi-next插件使用首先安装插件
npm i @douyinfe/semi-next(如果你使用 yarn 或 pnpm，请自行更换为对等命令)在 next.config.js 中进行配置，插件会将组件默认的import CSS 语句移除。更多配置可查阅
@douyinfe/semi-next详细文档在
global.css中引入全量的 semi css（目前在 Next.js 中不支持按需引入）
// next.config.jsconst semi = require('@douyinfe/semi-next').default({/* the extension options */});module.exports = semi({// your custom Next.js configuration});/* styles/globals.css */'~@douyinfe/semi-ui/dist/css/semi.min.css';
如何在 Next.js 中使用主题包你需要更换 globals.css 中 import 语句的路径，将默认主题 CSS 产物更换为你定制的主题包中的 CSS 产物，例如当希望应用抖音创作服务平台的主题包 @semi-bot/semi-theme-doucreator 时
/* styles/globals.css */@import '~@semi-bot/semi-theme-doucreator/semi.min.css';
定制主题
Semi 提供完整的主题配置流程，既保持颜色、字体、圆角、阴影、布局等在视觉语言上的统一连贯，又能满足业务和品牌多样化的视觉需求。你可以前往 Semi 设计系统管理站点 （又称DSM） 选择或者创造一套符合你的需求的主题风格。
目前DSM支持全局、组件级别的样式定制，并在 Figma 和线上代码之间保持同步。使用 DSM，将 Semi Design 适配为 Any Design
🎨 全局样式 变量管理支持色盘、圆角、字体排版、描边、阴影的可视化编辑预览
🔁 设计变量双向同步设计变量可以在 Web 端与 Figma 插件侧双向实时同步。
🧩 深度的组件样式定制对单个组件的样式进行深度定制，例如组件的 高度 / 间距等样式定制；
Design to Code
Design to code（简称D2C） 是 Semi Design 提供的设计稿转代码功能，支持一键识别 Figma 页面中图层布局 + Semi 组件，像素级还原设计稿，转译为 JSX 和 CSS 代码，快捷预览， 无需从 0 开发。从此，你可以将 UI 还原的工作交给工具，更专注于实现业务逻辑。
简单来说想使用Semi Design的Design to Code要3步：
使用Semi Figma UI Kit
下载Semi Figma 插件
使用安装的插件来实现转码
总结
关于Semi Design之前也沸沸扬扬的传过抄袭ant design，但是ant design本身就是开源项目，如果是其之上发展和精进，那也并不是抄袭，当然这里也有很多关于知识产权的细节内容，不过多的讨论。只是但从技术角度，还是希望可以有更多好用UI库出现，最后如果你喜欢字节的风格，那可以来试试。
项目信息
项目名称：semi-design
GitHub 链接：https://github.com/DouyinFE/semi-design
Star 数：8K
