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

文章插图

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
【抖音团队出品，企业应用设计系统Semi Design开源了】在 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