Design system
In user interface design, a design system is a comprehensive framework of standards, reusable components, and documentation that guides the consistent development of digital products within an organization. It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects. A design system may consist of: pattern and component libraries; style guides for font, color, spacing, component dimensions, and placement; design languages, coded components, brand languages, and documentation. Design systems aid in digital product design and development of products such as mobile applications or websites.
A design system serves as a reference to establish a common understanding between design, engineering, and product teams. This understanding ensures smooth communication and collaboration between different teams involved in designing and building a product, and ultimately results in a consistent user experience.
Notable design systems include Lightning Design System (by Salesforce), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft).
Advantages
Some of the advantages of a design system are:
- Streamlined design to production workflow.
- Creates a unified language between and within the cross-functional teams.
- Faster builds, through reusable components and shared rationale.
- Better products, through more cohesive user experiences and a consistent design language.
- Improved maintenance and scalability, through the reduction of design and technical debt.
- Stronger focus for product teams, through tackling common problems so teams can concentrate on solving user needs.
Design tokens
디자인 시스템의 스타일 가이드 요소인 색상, 글자, 간격의 스타일 속성을 변수로 정의하여 코드화한 것이다.