Semi Design

Overview

Semi Design is an enterprise-level design system and React component library created by ByteDance Douyin FE. Designed to bridge the gap between product designers and developers, it offers robust theme customization, Figma tokens integration, and internationalization.

Key Features

• 60+ High-Quality Components: Comprehensive coverage of data tables, navigation, feedback, and typography.
• Semi DSM (Design System Management): Instant visual theme builder and bi-directional Figma sync.
• Global Internationalization: Complete support for RTL layouts, timezones, and multi-language translation packs.
• Accessible & Tested: Battle-tested across hundreds of internal and external ByteDance products.

Installation & Quick Start

npm install @douyinfe/semi-ui

import { Button } from '@douyinfe/semi-ui';

export default function App() {
  return <Button theme="solid" type="primary">Get Started</Button>;
}

Why Choose Semi Design?

• Best for: Enterprise web applications, multinational portals, and teams requiring close collaboration between Figma and code.
• Not suitable for: Micro-frontend apps where bundle size must remain under 10KB.