Semi Design：字节跳动开源的现代化设计系统

Semi Design 是由抖音前端与 UED 团队维护的现代化设计系统，旨在连接设计师与开发者，帮助团队打造高质量产品。它提供了易于定制的组件库、主题系统和设计转代码能力，已服务超过 10 万用户。

核心特性

设计转代码 (D2C)

Semi 提供高效的 design to code 能力，只需 3-5 秒，一键点击即可从 Figma 设计稿生成真实代码，大幅提升开发效率。

A11y 无障碍友好

Semi 遵循 W3C 标准为所有组件提供键盘交互、焦点管理和语义化支持，确保应用对所有用户都可访问。

国际化与多语言

Semi 提供完备的多语言、多时区、RTL 支持，助你轻松打造全球化应用。

Live Code 组件

LiveCode 允许你使用在线代码编辑器即时演示你的 UI 组件，方便文档编写和团队协作。

稳定的质量保障

Semi 稳定迭代 5 年+，使用了单元测试、E2E 测试、视觉对比测试等多种方法保证组件的稳定和质量，测试覆盖率达到 90%。

SSR 支持

Semi 组件库支持 SSR 场景，可以在 Next.js、Gatsby 和 Remix 等框架中使用。

FA 架构

Semi 基于 FA（Foundation-Adapter）架构设计，主逻辑抽象为 Foundation 包，源码清晰易读，易于迁移到其他框架。

Web Components 兼容

提供完整的适配方案，所有的组件在 shadow DOM 中均可正常工作，更适合用于构建 SDK、浏览器插件等需要 DOM 隔离的场景。

百变主题

Semi 提供高达 3000+ Design Token，支持快速克隆或深度定制，灵活调配符合品牌调性的设计风格。官方提供多种预设主题：

• Semi Design 默认主题 - 官方默认设计规范
• 飞书 Universe Design 主题 - 飞书产品统一设计
• 抖音创作服务主题 - 抖音创作者平台风格
• 剪映主题 - 视频创作工具风格
• 火山引擎主题 - 企业级云服务风格

实际应用案例

Semi Design 已被字节跳动多个核心产品采用：

• 飞书项目 - 2022 年春季飞书发布的单品，支持大型团队将复杂项目拆解流程并可视化
• 抖音创作服务平台 - 抖音创作者的专属服务平台，提供多种功能助力用户高效运营
• 扣子 (Coze) - 新一代一站式 AI Bot 开发平台
• 剪映黑罐头 - 连接视频创作产业链，构建素材库

开发者体验

Semi Design 重视开发者体验，提供：

• 开箱即用的底层能力支持
• 详细的文档和丰富的示例
• 活跃的开源社区支持
• 快速的问题响应和解决效率

相关资源

• 官方文档: https://semi.design/zh-CN/start/introduction
• GitHub: https://github.com/DouyinFE/semi-design
• Figma UIKit: https://www.figma.com/community/file/1034817675495341827
• Figma Plugin: https://www.figma.com/community/plugin/1166339852662786534/semi-design

总结

Semi Design 是一个成熟、稳定、功能丰富的企业级设计系统，特别适合需要快速构建中后台应用、追求设计一致性和开发效率的团队。其设计转代码能力和完善的主题系统是其核心竞争优势。