Atomic Design and Its Modular Application in UX/UI Design

How to grasp the concept quickly

UX Design Essentials: Atomic design and modular thinking

The concept of atomic design is every visual designer’s dream tool box. It is a simple, modular design system for the digital screen. It uses single elements (atoms) to build entire landscapes (interactive screens).

The system is borrowed from chemistry.

In chemistry, an atom is the smallest unit* which combines with other atoms to form molecules, which then combine to form organisms.

(*Atoms break down into smaller units, but for the purpose of Atomic Design, we will not delve deeper into the structure of an atom here.)

Each atom has a specific shape formed by its properties

In UI, single atoms are unique vector shape elements, such as a square rectangle, a circle, a triangle, or a round-corner rectangle.

In UI design, we take one atom at a time and assign it a unique property, such as button, label, text field, and others.