In 2013, front-end engineer Brad Forst used this theory in interface design to form a design system consisting of 5 levels: atoms, molecules, organizations, templates, and pages.

Why do we always talk about Atomic Design?

Solely these 4 things below: Consistent, Clear, efficient, smooth communication will save a company 30-50% or more money in software/web development.

1. Consistent
Atomic design theory is based on the above five levels. In the process of building from atom to page, it gives full play to the reusability of design elements, avoids repeated production, and embodies the consistent design principle.

2. Clear
Atomic design theory is hierarchical from abstract to the concrete, from part to whole, providing clear methodological guidance for designers to build component libraries, and helping team members better understand the value of design systems.

3. Efficient
With the continuous iteration of products, the design system completed under the guidance of atomic design theory will be more efficient and convenient to adapt to new changes. You only need to gently change the properties or combinations of certain atoms and molecules to usher in the whole The system is updated synchronously, easy to expand and maintain.

4. Smooth communication
The atomic design theory not only facilitates designers to think about the integrity and unity of the page, but also allows front-end engineers and product managers to clearly understand the logical structure of the product framework and presentation layers, reducing unnecessary communication and modification costs.

Atomic design theory is more inclined to the thinking and logic of engineers, and abides by the hierarchical structure thinking; while most designers are inclined to linear structure or natural structure thinking in the construction and use of component libraries. They prefer to quickly discover, understand, and call components. Select components based on the hierarchy, not layer by layer.

‍