Semi Design

Semi Design是什么

Semi Design 由抖音前端与 UED 团队维护，定位为易于定制的现代化设计系统，面向设计师与开发者。它提供开箱即用的底层能力，帮助团队避免重复造轮子。系统已服务 10 万+用户，在字节跳动内部有广泛应用基础。

该系统以 React 组件库为核心，同时支持 SSR 场景，可在 Next.js、Gatsby 和 Remix 等框架中使用。通过 FA 架构设计，主逻辑抽象为 Foundation 包，源码清晰易读，便于迁移到其他框架。

Semi Design的主要功能

• Design to Code：从 Figma 设计稿一键生成真实代码，耗时 3-5 秒。
• 无障碍支持：遵循 W3C 标准，提供键盘交互、焦点管理和语义化支持。
• 国际化与多语言：提供多语言、多时区、RTL 支持。
• LiveCode 组件：通过在线代码编辑器即时演示 UI 组件。
• 主题定制：提供 3000+ Design Token，可深度定制品牌风格，内置飞书 Universe、抖音创作服务、剪映、火山引擎等主题。
• Web Components 兼容：所有组件在 shadow DOM 中可正常工作，适合构建 SDK 和浏览器插件。

Semi Design界面预览