Design System

1. What is Design System?

  • A system composed of design principles, reusable UI patterns and components, and code

  • Rather than simply being a UI kit, it's a comprehensive concept that includes design principles, style guides, components, patterns, and guidelines for design and development processes

2. If a Design System is Built, Developers Can

  • Consistently apply styles like colors, fonts, and spacing through design tokens (JSON, YAML, etc.) included in the design system

  • Use CSS preprocessors or CSS-in-JS libraries (Styled-components, Emotion, etc.) to create components and apply them to the design system's component library

  • Implement desktop UI using the component library provided by the design system, and apply responsive layouts using CSS media queries

  • Write platform-specific code considering platform characteristics by referring to the design system's cross-platform principles

  • Collaborate closely with designers to implement applications that provide consistent user experiences according to the guidelines defined in the design system

3. Benefits of Design System

  • Promotes smooth collaboration between teams

  • Provides consistent user experiences

  • Efficient design and development processes

  • Strengthens brand recognition

Last updated