《開源精選》是我們分享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 <Button onClick={() => Toast.warning({ content: 'welcome' })}>Hello Semi</Button>;
}
} 推薦在項目中引入 reset.css，它可以重置浏覽器自帶的預設樣式，避免不同UA之間的樣式差異。
3、在 Next.js 中使用
當你在 Next.js 項目中使用時，需要搭配 Semi 提供的編譯插件（由于 Next.js 不允許 npm 包從 node_modules 中 import 樣式檔案，需要配合插件将預設的import CSS 語句移除，并且手動引入 CSS）
Step1
在項目根目錄安裝 @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'; —END—
開源協定：MIT
開源位址：https://github.com/DouyinFE/semi-design