前言

由于工作内容的关系，了不起总会去翻一下前端UI框架和组件来看看。最近有翻到了一款不错的框架：Semi Design。我们一起来看看！

简介

Semi Design，是由字节跳动旗下抖音前端与 UED 团队维护的一个设计系统。

Semi Design定义了一套中后台设计与前端基础组件，帮助我们更容易地定制现代化设计系统，为设计师与开发者打造高质量产品。

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 隔离的场景

安装和使用

安装

Semi 支持搭配 React v16、v17、v18 版本使用，直接在项目中添加依赖就好了

# 使用 npm
npm i @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

# 使用 pnpm
pnpm 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>
    )
}

在 NextJs 中使用

如果仅使用默认主题, 在 transpilePackages 追加 Semi 相关的 package即可 （Next.js 版本要求 >= v13.1 ）

// next.config.js
const nextConfig = {
+ transpilePackages: ['@douyinfe/semi-ui', '@douyinfe/semi-icons', '@douyinfe/semi-illustrations'],
};

module.exports = nextConfig;

如果需要使用定制主题包或 Next.js版本低于 v13.1，相关的配置，请查看后文中官网链接里的详细介绍。

组件概览

Semi Design，能够在线调试的React UI 桌面端组件库，这就包含了日常用到的常用组件。

最后

Semi Design之前也沸沸扬扬地传过关于ant design的争议问题。

作为开发者，大家肯定都有自己的看法。但就开源本身来说，站在巨人的肩膀上发展和精进，这也是有利于框架的衍生和发展的。

从技术角度，有更多好用的UI库出现，这未尝不是一件好事。至于其他，就不在本文的讨论范围了。关于Semi Design更多内容，请查看下方链接。