Atomic Design explained in 2 minutes

Atomic design is a design methodology created by Brad Frost that considers creating and maintaining design systems while providing an attractive way of explaining using chemistry.

Photo by Raphaël Biscaldi on Unsplash

Next, atomic design elements:

There are five distinct stages of the Atomic Design methodology, with the first three modeled after their equivalents in the Chemistry world.

Each stage builds on the previous, acting as a combination of items from the earlier stages.

Here are five distinct stages of atomic design structure. Let’s have a look at each stage.

The first one is atoms.

Atoms are the basic building blocks in this design system. All elements are individual items consisting of labels, icons, buttons, and more.

Molecules are the second stage in this methodology.

It is a combined group of atoms. For instance, a form label, search input, and button can create a search form molecule.

The third stage is Organisms.

The combined group of molecules is called organisms. This is a more significant component. It includes navigation, sidebars, and pop-ups.