About Semi Design
Overview
Semi Design is a modern, open-source design system maintained by the Douyin front-end and UED teams at ByteDance. It helps designers and developers create high-quality products and is trusted by more than 100,000 users.
The system provides a full React component library, design tokens, theming tools, and design-to-code workflows so the design and development sides stay aligned. Teams at ByteDance including Feishu Project, Douyin Music, Coze, and CapCut build on it.
Key Benefits
- Design to code: generates real front-end code from Figma design drafts in 3–5 seconds with one click
- Complete accessibility: follows W3C standards with keyboard interaction, focus management, and semantics on all components
- Internationalization: provides multi-language, multi-time zone, and RTL support for building global applications
- Live code components: LiveCode lets you demonstrate UI components instantly in an online code editor
- Stable quality: uses unit, E2E, and visual testing with code coverage reaching 90%
- SSR support: works inside frameworks such as Next.js, Gatsby, and Remix
How It Works
Designers draw drafts using real components and Figma-synced tokens, then transfer front-end code to developers with one click. Developers tune 2,000+ design tokens in a theme editor that stays synchronized with Figma, and components remain compatible in shadow DOM for SDK and plugin scenarios.
Use Cases
- Designers: create design drafts with real components and synced tokens inside Figma
- Front-end developers: transfer code from design drafts with a single click using D2C
- Product teams: ship global applications with multilingual and RTL support
- SDK and browser plugin builders: run all components safely in shadow DOM with DOM isolation
- Large organizations: customize brand themes through the token-based theme editor synced with Figma
Why Choose This Product
Semi Design keeps design and development on the same page by making real components, tokens, and code interchangeable. Its FA architecture extracts the main logic into a Foundation package that is easy to migrate to other frameworks, and full accessibility and theming support reduce the need to re-create brand-consistent UIs from scratch.
Key Features
Design to code
Generates real front-end code from Figma design drafts in 3–5 seconds with one click.
Complete accessibility
Follows W3C standards with keyboard interaction, focus management, and semantics on all components.
Internationalization
Provides multi-language, multi-time zone, and RTL support for global applications.
Live code editor
LiveCode lets you demonstrate UI components instantly in an online code editor.
Quality assurance
Uses unit, E2E, and visual tests to keep component code coverage at 90%.
SSR support
Runs inside SSR frameworks including Next.js, Gatsby, and Remix.
FA architecture
Extracts main logic into a Foundation package that is easy to migrate to other frameworks.
Shadow DOM support
All components work in shadow DOM for SDK and browser plugin scenarios.
Theme editor
Tweaks 2,000+ design tokens in a theme editor that syncs with Figma.
Semi Design Pricing
Pricing extracted from the product website and may change. Check the source for current details.