What is a Design System?
​
A design system serves as a source of truth that gives product and engineering teams a common visual language, and collection of reusable components.
​
​
It Can Include
The Benefits​
​
There are two primary benefits:
Consistency: enforce consistency with common values, defined styles, guidelines, and reusable components. Using consistent design patterns creates a better user experience.
​
Efficiency: streamline both the design and engineering processes, significantly decreasing the amount of time it takes to deliver new features.
​
​
An Example
​
Without a design system...​
​
Individual projects cause the team to build many custom components that do similar things.
In this example, a real estate website has at least 5 versions of a property card.
​
The Problems
Users: need to reorient themselves to each new version as they navigate the app.
​​
Designers: manually update all 5+ layouts anytime a change is needed.
​
Engineers: have 5+ versions of code to maintain when a change is needed.
With a design system...
​
The team can design and build one component (with variable properties) that can be reused throughout their apps.
​
In this example, the app has one property card displayed throughout the app.
​
The Solutions
​
Users: have a consistent experience
​
Designers: can reuse the component in all future projects saving time and effort during the design phase
​
Engineers: have one component to maintain saving time and effort during development
Summary
​
Adopting a design systems approach can help businesses deliver consistent products, faster. It'll give your app's usability a boost, make your engineering team more efficient, and give your designers more time to help explore new ideas.