Building design system with Atomic Methodology

In theory,

Design systems are essentially collections of rules, constraints, and principles, implemented in design and code.

Today, Design systems are major parts of some of the famous products. And we can find that every digital product is based on some kind of design system. From the past few years, they have completely evolved from a collection of design patterns to a single language defining the rules of design for multiple products across different platforms.

A well-documented design system is a complete guidebook consisting of design principles, typography, color guides and rules for the behavior of different patterns used across the product. Overall, the Design system helps in solving the inconsistencies of the complex products and ensures that the designers and developers follow a single framework for the development of the end product.

Here at NextUX, we follow the atomic design methodology to build the design systems in a more simpler and easier way.

Atomic Design

Atomic Design Methodology is developed by Brad Frost and it is completely based on the Modularity principles and has been inspired by the chemistry of the atoms, molecules, and organisms.

Atomic Design is basically divided in the,

1. Atoms,
2. Molecules,
3. Organisms
4. Templates
5. Pages.

According to the Atomic design, every software and application is basically made up of small individual atoms like buttons, input boxes, texts and they are grouped together to make different components and complex pages.

Usually, Atomic design starts at the atom level, but if you go further deeper in these atoms, then you can find that these atoms are also made up of a nucleus, electrons, and protons.

So rather starting from the atomic level, We at NextUX, start from the inside of the atom level, that is from the very basic nucleus level and build up the whole design system from there.

After getting inspired by the atomic design methodology developed by Brad Frost, we have created our own design methodology upon that and we follow that to create design systems for our clients.

To build the design system, we divide the whole product in,

1. Nucleus, protons, electrons
2. Atoms
3. Molecules
4. Organisms

In the product, we consider the nucleus as the visual feel or visual stylings like the shapes, background colors, shadows effects, border-radius, and protons as the typography, and electrons as the color guide or color pallete. And all the other components are basically made up of these nucleus, protons, and electrons.

So, to make it more clear, let’s break down a single screen in the basic elements of our design methodology.

This is the Example Image.

Let’s break it down as per our design methodology.

Red represents the ‘atoms’, blue represent the molecules, pink represents the ‘organisms’.

In the above screen, I have shown the atoms, molecules, and organisms based on the atomic design system.

And if we further break down the screen, then we can clearly see that all these components are made up of a nucleus, protons, and electrons.

We can define them as,

1. Nucleus would be the structure of the product, shapes used to group components and shadow effects on the screen.
2. Protons are the white background and the green, black, grey color.
3. Electrons are the text content present on the screen.

Like these, there are 100’s of the screen in the product which is made up of these small individual elements and together they make a complete product. I hope this would clear out the definition of the atomic design with more sense.

So, if we were to make a design system for this product, we always start from the inside of the atoms, which is, first defining the visual style, color guide, and typography of the system.

You can see our visual style, color guide, and typography for the above product,

Visual Style

Color Pallete

Typography

After setting the inside properties of the atoms, we can move further and design the atoms, molecules, and organisms.

Atoms

Atoms in the system are the smallest individual elements like buttons, input boxes, badges, links.

They can be designed by combining the visual style, color, and type. Similarly, we can create other different atoms of the system.

Below I have designed the basic atoms of the product,

Atoms

Molecules

Molecules are already functional elements that could be put anywhere on the page and work on their own. Components like toast messages, cards, badges, navigation, tabs, accordions make the molecules.

Molecules

Organisms

Truly functional parts of a page, are made from groups of atoms and molecules. Many organisms function on their own, without relying on other elements on the page. They are usually huge components, like cards, navigation, headers, data tables. Organisms can become quite sophisticated and have smaller organisms inside, just like in real life.

Organisms

So, once we have the basic atoms, molecules, and organisms, we can build and design any kind of page from the product.

Benefits of building design system with atomic design,

1. Crafting the design system based on the atomic framework helps developers to develop the basic components, reducing the amount of re-work at the time of development. Developers can easily assemble the basic components to make bigger components.
2. By building the design system according to the atomic design, It becomes easy for designers to design and manage files effectively. Also, by breaking down the whole system in the atoms, molecules, and organisms, sharing and updating the files in the future becomes hassle-free.
3. Design systems help in documenting the whole design components, and patterns in a clear way, which ultimately helps the team to be more collaborative and allows them to focus on other complexities of the product.
4. On the whole, a design system is not just for the designers, and developers, instead it is for the teams to work more closely, and in a well-documented way.

Conclusion

Atomic design is a clear and simple methodology that anyone can follow to craft design systems from the ground. Atomic design framework helps designers and developers to work more closely and helps in managing the design patterns effectively and efficiently.

Thanks for Reading.