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

《开源精选》是我们分享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 资源也得以形成积累和传播。