Where Design & Dev Work Together

Maintained by the Douyin front-end and UED teams, an easy-to-customize modern design system that helps designers and developers create high-quality products.

rspack logoNextjs
semi application demosemi application demo

Trusted by 100,000 + users

douyin logodouyin logo
larkprogram logo
bytehi logo
bytedance sso logo

Bytedance SSO

Smooth Dev Experience

Focus on the essentials and we’ll take care of the rest

d2c icon

Design to code

Offical provides powerful design to code capabilities, 3-5s, one-click, generate real code from Figma design draft

a11y icon

Complete accessibility support

Semi follows W3C standards to provide keyboard interaction, focus management and semantics for all components

i18n icon

Internationalization and Multilingualism

Semi provides complete multi-language, multi-time zone, RTL support to easily create global applications

live code icon

Live Code component

LiveCode allows you to instantly demonstrate your UI components using an online code editor

auto test icon

Stable quality assurance

Semi uses a variety of methods such as unit testing to ensure the stability and quality of components, and the code coverage rate reaches 90%

SSR support

Semi component library supports SSR scenarios and can be used in frameworks like Next.js、Gatsby、Remix

developer friendly

Easy-to-contribute FA architecture

Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks

adapter web components

Easily compatible with web components

Provides a complete adaptation solution. All components can work normally in shadow DOM, which is more suitable for building SDKs, browser plugins and other scenarios that require DOM isolation.

Theming

Create variations of UI Styles that suit your brand with full flexibility

semi logo

Semi Design Default

lark logo

Feishu Universe Design Theme

douyin creator logo

Douyin Creator Theme

jianying logo

CapCut Theme

volcengine logo

Volce Engine Theme

Richard Hendricks

@RichardHendricks
Beijing, ChinaDouyin certificationrichard@gmail.comChief foodie, good at algorithms, especially
Video compression algorithm
Official TopicsKOL

Private Message Management

Apple Accountrichard@icloud.com
Google Accountrichard@gmail.com
Instagramrichard_aaa
FacebookRichard Hendricks
SenderPrivate message contentTime of dispatch
System Notification#Semi Design2Code# Topic Activity is now open!2020-02-02 05:13
System NotificationSemi Design Share Presentation2020-01-17 05:31
System NotificationDesign2020-01-26 11:01

Managing Themes

Tweak 2000+ tokens with powerful theme editor, synced with Figma

Make design and code homologous

Use real components to draw design drafts and transfer front-end code with one click

d2c demo code
figma design file demofigma design file demo

Upload report

Document Chinese name

*

Document English name

Documentation link

*

Report tag

Conclusion

Note

Continuous upload

Build State of the Art Apps

Modern design vibes compile with next-gen OS and browsers

In-depth interpretation of content

Learn about our thinking behind accessibility, theme customization, automation solutions

a11y in semi ui

Accessible Design in Semi Design

"A front-end open source UI component library that does not support Accessibility is a disaster"

about semi theme

In-depth explanation of Semi theming scheme

Compatible with diverse brand languages ​​and product forms to avoid meaningless re-creation

evolution of semi d2c

How We Test Semi Design Component

Comprehensively use UnitTest, E2E Test, and Visual Test to ensure the stability of the component library

how we test semi ui

The evolution of Semi D2C design to code

Connect designers and developers with advanced tools

evolution of semi d2c

ByteDance OpenDay Tech Talk

A Deep Dive into Design to Code

Stride along with Users

Semi Design value our users, any kind of contribution is welcome

Stars

0+

Fork

0+

Downloads

0+

Contributors

0+

Special thanks

chromatic logochromatic logocypress logocypress logo
user avatar
quote icon

@Mengzhou

Developer, ByteDance

user avatar

C

quote icon

@Changyi

Developer, ByteDance

user avatar

M

quote icon

@Miaomiao

Design, ByteDance

user avatar

Y

quote icon

@Yinfeng

Product Manager, ByteDance

user avatar
quote icon

@Dingwei

Developer, ByteDance

user avatar
quote icon

@Jingyu

Developer, ByteDance

user avatar
quote icon

@Yucang

Developer, ByteDance

user avatar

G

quote icon

@Guangye

Product Manager, ByteDance

user avatar
quote icon

@Baifu

Developer, ByteDance

Where Design & Dev Work Together

Start using Semi Design on your next project today

Dev

Semi UI for React, live code demo with full documentation that speed up your workflow.

Component Documentation

demo code

Design

Fully synced design tokens and component variants, powered by Figma.

Figma UIKit

figma source demo