连接设计师与开发者

由抖音前端与 UED 团队维护,易于定制的现代化设计系统,帮助设计师与开发者打造高质量产品。

rspack logoNextjs
semi application demosemi application demo

已服务 10 万 + 用户

douyin logodouyin logo
larkprogram logo
bytehi logo
bytedance sso logo

Bytedance SSO

先进的开发者体验

开箱即用的底层能力支持,为开发者节省精力,避免重造

d2c icon

设计稿转代码

Semi 提供高效的 design to code 能力,3-5s,一键点击,从 Figma 设计稿生成真实代码

a11y icon

A11y 无障碍友好

Semi 遵循 W3C 标准为所有组件提供键盘交互、焦点管理和语义化支持

i18n icon

国际化与多语言

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

live code icon

Live Code 组件

LiveCode 允许你使用在线代码编辑器即时演示你的 UI 组件

auto test icon

稳定的质量保障

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

支持 SSR

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

developer friendly

易于贡献的 FA 架构

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

adapter web components

轻松兼容 web components

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

百变主题

提供高达3000+ Design Token,快速克隆或深度定制,灵活调配符合品牌调性的设计风格

semi logo

Semi Design 默认

lark logo

飞书 Universe Design 主题

douyin creator logo

抖音创作服务主题

jianying logo

剪映主题

volcengine logo

火山引擎主题

Richard Hendricks

@RichardHendricks
中国 北京官方认证richard@gmail.com首席吃货,擅长算法,特别是
视频压缩算法
官方话题大 V

私信管理

Apple 账号richard@icloud.com
Google 账号richard@gmail.com
Instagramrichard_aaa
FacebookRichard Hendricks
发信人私信内容发信时间
系统通知#Semi Design2Code# 技术分享开讲啦!根据活动规则,恭喜 13 位...2020-02-02 05:13
系统通知Semi Design 分享演示文稿2020-01-17 05:31
系统通知设计2020-01-26 11:01

Semi 设计系统管理

强大的主题编辑器,实时生效,设计工具一键同步

让设计与代码同源

使用真实组件设计,前端代码一键转

d2c demo code
figma design file demofigma design file demo

上传报告

文档中文名

*

文档英文名

文档链接

*

报告标签

结论

备注

连续上传

打造现代 Web 应用

使用 Semi 与现代操作系统、浏览器更贴近的设计语言

内容深度解读

了解我们在无障碍、主题定制、自动化方案背后的思考

a11y in semi ui

Semi Design 中的无障碍设计

「不支持 Accessibility 的前端开源 UI 组件库,就是灾难」

about semi theme

深入浅出 Semi 主题化方案

兼容多元的品牌语言和产品形态,避免无意义的重造

evolution of semi d2c

Semi Design 如何做质量保障

综合运用 Unit Test、E2E Test、Visual Test保障组件库稳定性

how we test semi ui

Semi D2C 设计转代码的演进之路

用先进的工具连接设计师与开发者

evolution of semi d2c

字节跳动开源 OpenDay 主题分享

D2C 设计稿转代码深度解读

与用户共同成长

Semi Design 重视我们的用户,加入并助力我们不断完善

Stars

0+

Fork

0+

下载

0+

贡献者

0+

特别鸣谢

chromatic logochromatic logocypress logocypress logo
user avatar
quote icon

@Mengzhou

前端, 字节跳动

user avatar

C

quote icon

@Changyi

前端, 字节跳动

user avatar

M

quote icon

@Miaomiao

设计, 字节跳动

user avatar

Y

quote icon

@Yinfeng

产品经理, 字节跳动

user avatar
quote icon

@Dingwei

前端, 字节跳动

user avatar
quote icon

@Jingyu

前端, 字节跳动

user avatar
quote icon

@Yucang

前端, 字节跳动

user avatar

G

quote icon

@Guangye

产品经理, 字节跳动

user avatar
quote icon

@Baifu

前端, 字节跳动

连接设计师与开发者

今天起,在下一个项目中使用 Semi Design

我是开发者

基于设计语言开发,能够在线调试的 React UI 组件库, 帮助开发者高效构建应用

组件文档

demo code

我是设计师

基于 Figma 构建,与组件库代码完全对齐的设计资源,使用 Semi 设计出色的中后台企业应用

Figma UIKit

figma source demo