《開源精選》是我們分享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
