What do companies like Atlassian, Airbnb and Trello have in common? All three, and many others, have adopted the Design System methodology to manage the visual side of their projects. But what exactly is a Design System?
Components of a Design System
A Design System is a set of rules, limitations and principles to apply when developing a project. It’s a voice and a style and has elements, but it’s more than that. A Design System lays out how to use those elements in order to keep a product consistent.
Between Design Atoms and Molecules
The five stages of Atomic Design are:
1. Atoms: the minimum units from which we can create interfaces, including basic HTML elements like inputs, tags and buttons. They have unique features that differentiate them from the rest. If we take a general look at atoms, we can quickly understand what the style of the system is.
2. Molecules: a combination of different atoms in order to create a basic reusable element, like a tag with an input and a button.
3. Organisms: groups of molecules and atoms that form the distinct sections of an interface.
4. Templates: they articulate the organisms in the page structure and display all the necessary page components that are functioning together.
5. Pages: they are specific instances of templates, with the real representative content in place.
Benefits of a Design System
In one of the projects developed at intive-FDV, we are currently creating a Design System. This project has been going on for some time now, involving several teams that are working on different parts of the product development, something that has caused many inconsistencies.
Precisely, the purpose of a Design System is to put everything in place. The ultimate aim is to reuse the components and, as a direct consequence, increase efficiency. Given that elements are standardized and scalable, the product’s consistency can be maintained and we can keep growing over time.
One of the first things we noticed when reviewing the application was inconsistency in the use of colors and font faces. For example, there was a complete discrepancy among sections, which made the application less visual-friendly. Buttons were yet another pain point in our system. This revision helped us establish priorities: we were able to determine which elements to include in our Style Guide and estimate the effort and impact this would have on development. In constant collaboration with the development team, we are now beginning to define standards and patterns for each one of the elements in our system, which helps us to not only validate efforts but also establish priorities.
One of the main reasons why Design Systems are so popular is the number of benefits they bring to projects. Having a single source of truth that designers as well as developers can take as reference helps us stay aligned, enabling collaboration and scalability and avoiding consistency problems. In addition, this has a direct impact on efficiency and reduces workloads. All of this is too good to miss, don’t you think?