By Deborah Guarneros
what is a design system?
Most people think that a design system is only a style guide or pattern libraries, but it’s much more than that. A Design System is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
A product should not only be a bunch of reusable user interface elements, but it should also have a structure, concept, and most important, an objective.
A Design System is not a deliverable, but a set of deliverables. It evolves constantly with the company or product, the tools, and the new technologies.
The fundamental purpose of a Design System is to facilitate the work between teams.
A Design System is composed of tangibles and intangibles elements :
- Tools for designers & developers: Guidelines that include fonts, colors, grids, patterns, and components among other things.
- Abstract elements such as brand values, principles, mindset, beliefs, and manifestos. These are usually the most difficult to determine and they also evolve with time.
Why is it important to have a design system implemented in your team?
To eliminate inconsistencies
Many people working on a product can result in differing solutions leading to inconsistent experiences for users. A unified design system helps teams to find solutions that are scalable, consistent and predictable.
Clarity and Efficiency
The products being made will be used by the final user and individuals in the team. With design systems, there is a faster process with less margin of error. This allows for faster decision making without needing to depend on a specific person in the company.
What is inside a design system?
#1. Purpose and shared values
Before starting anything, it’s essential to align teams around a clear set of shared goals. It helps build a vision and make sure everyone looks in the same direction. These goals evolve with time and it’s normal. We just have to make sure that changes are well communicated.
#2. Brand identity
Identity should be defined in line with the strategy and the objectives of the brand. The main deliverables are these elements:
All the elements that we talked about before help us build the components of a design system to create a consistent experience.
The components should be reusable and flexible, so they can help us solve problems in a faster and more efficient way.
It is important that when we build components we give technical and functional information. This ensures everyone on the team understands how a component is used and when to use it.
Want to learn more about design systems?
In 2014, Google wanted to organize their teams of designers and developers, so they developed “Material Design”. Material is not only for Google, it’s for everyone. If you are going to start with a design system, use some of these bases to build your own.
- Creating a Design System: A Practitioner Case Study
- Balancing UX Consistency and Developer Productivity in a Design System
And here are some of the design systems that we like more, so you can get inspired:
Uber - https://brand.uber.com/
Mailchimp - https://ux.mailchimp.com/
Shopify - https://polaris.shopify.com/
Atlassian - https://www.atlassian.design/