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.
Trusted by 100,000 + users
Bytedance SSO
Smooth Dev Experience
Focus on the essentials and we’ll take care of the rest
Design to code
Offical provides powerful design to code capabilities, 3-5s, one-click, generate real code from Figma design draft
Complete accessibility support
Semi follows W3C standards to provide keyboard interaction, focus management and semantics for all components
Internationalization and Multilingualism
Semi provides complete multi-language, multi-time zone, RTL support to easily create global applications
Live Code component
LiveCode allows you to instantly demonstrate your UI components using an online code editor
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
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
Theming
Create variations of UI Styles that suit your brand with full flexibility
Semi Design Default
Feishu Universe Design Theme
Douyin Creator Theme
CapCut Theme
Volce Engine Theme
Richard Hendricks
@RichardHendricksVideo compression algorithm
Private Message Management
| Apple Account | richard@icloud.com |
|---|---|
| Google Account | richard@gmail.com |
| richard_aaa | |
| Richard Hendricks |
| Sender | Private message content | Time of dispatch |
|---|---|---|
| System Notification | #Semi Design2Code# Topic Activity is now open! | 2020-02-02 05:13 |
| System Notification | Semi Design Share Presentation | 2020-01-17 05:31 |
| System Notification | Design | 2020-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
Upload report
Document Chinese name
*
Document English name
Documentation link
*
Report tag
Conclusion
Note
Build State of the Art Apps
Modern design vibes compile with next-gen OS and browsers
飞书项目
Feishu project is a single product released by Feishu in the spring of 2022. It supports large teams to disassemble and visualize complex project processes, visually present collaboration standards, and allow members to clarify their responsibilities and easily grasp upstream and downstream information.
Douyin Creation Service Platform is an exclusive service platform for Douyin creators. It supports two login methods for users as creators and management agencies, and provides a variety of functions to help users operate efficiently.
Anyweb is a free website builder that makes it easy to create professional websites. With no programming skills required, you can set up custom websites quickly and easily with the Anyweb drag-and-drop editor.
Douyin Music is a one-stop musician service platform under Douyin. In the vast galaxy of music, warm music creators are allowed to settle in and create value for excellent music works.
Capcut connects all participants in the video creation industry chain, builds a material library (templates, props, sound effects, flower characters, special effects, etc.), and provides services such as material sharing, cooperation and exchange, and commercial realization.
In-depth interpretation of content
Learn about our thinking behind accessibility, theme customization, automation solutions
Accessible Design in Semi Design
"A front-end open source UI component library that does not support Accessibility is a disaster"
In-depth explanation of Semi theming scheme
Compatible with diverse brand languages and product forms to avoid meaningless re-creation
How We Test Semi Design Component
Comprehensively use UnitTest, E2E Test, and Visual Test to ensure the stability of the component library
The evolution of Semi D2C design to code
Connect designers and developers with advanced tools
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
The access is simple and easy to use; the Semi UI is beautiful in style and has a unified theme; the API is rich and comprehensive.
@Mengzhou
Developer, ByteDance
C
The component coverage are quite complete, covering a wide range, and the overall style is decent as well.
@Changyi
Developer, ByteDance
M
Design assets can obviously help improve efficiency.
@Miaomiao
Design, ByteDance
Y
Semi provides various referecnes. We rely on Semi's component not only to design, but also to level-up our overall delivery standards for the entire platform.
@Yinfeng
Product Manager, ByteDance
Semi is super easy-to-use, highly recommended.
@Dingwei
Developer, ByteDance
As a benchmarking industry's excellent UI library, Semi does a very good job. It has a good guarantee for the response speed of problems and the efficiency of problem solving.
@Jingyu
Developer, ByteDance
Semi Design is easy-to-use and stylish.
@Yucang
Developer, ByteDance
G
It’s fluent to communicate with front-end devs because of the uniform style.
@Guangye
Product Manager, ByteDance
The documentation is very detailed, sufficient.
@Baifu
Developer, ByteDance