Designing consistent and scalable products: Building a design system with atomic design

“How can you design for everyone without understanding the full picture?”

- https://airbnb.design/anotherlens/

As designers, our day-to-day work is challenging at some stages more than others, and even more so when we have a new project or first join a team. This is always where our initial questions start to pop up: where are the graphic inputs, the guidance? Why do I see so many inconsistencies? If you work in this industry, then you've experienced this.
 
With my current team at Modyo, known as the "lab", we wanted to solve this problem. We set out to create a design system (more on this later) that would make work easier for all of us. We wanted a design system that would allow us to have consistent, scalable products and would also benefit the company.
 
I wrote this article to share our work methodologies with other designers; I want to explain how we went from a design system to atomic design, and to show the process, its benefits and give recommendations.

From the beginning

Since the digital world took off, work productivity has accelerated, processes have become more efficient, as has the search to reduce the number of errors. The result is a greater focus on consistency.

Consistency and development of digital products are based on components. The purpose of these components are to reuse them over and over again.

Today, there are several "component sets" more commonly known as frameworks, such as Foundation or Bootstrap. Each of them share many similar, reusable components, such as forms, buttons, cards, dropdowns, etc. This saves time and reduces developer frustration.

For interface designers, style guides and component libraries in general address branding, fonts, colors, grids, components, etc. It should be noted that the main idea of a style guide is to generate consistency throughout the brand or product.

If we join the concepts together and work from a framework plus a style guide, we start to approach what a design system is.

“A design system is a systematic approach that outputs the building blocks for designing in a scalable and sustainable way”

- Shane Williams

So then, what is it?

It is a set of interconnected, reusable components with rules that make up a digital product. That is, the combined repetitive elements create an interface and the rules allow us to know how to use and share those elements.

The main idea is also to be able to generate a bridge between design and development, thus enabling coherent visual experiences across all devices and platforms.

The positive thing about having a design system is that it allows products to scale, be consistent, be efficient and enable collaborative work.

Great, isn't it?