Atomic Design
Design Processes
Methodology emphasizing the use of design systems.
In practice
Throughout the design and development process, atomic design is a methodology that breaks down user interfaces into fundamental building blocks called atoms, molecules, organisms, templates, and pages. This approach enables designers and developers to create scalable and maintainable design systems by organizing elements hierarchically, fostering consistency and reusability across different sections of a digital product.
Questions
What is Atomic Design?
Atomic design is a way of structuring an interface as a hierarchy: atoms are the smallest elements, molecules combine them, organisms combine those, and templates and pages arrange the result.
Why do you use Atomic Design?
It gives a shared vocabulary for talking about interface pieces, and it makes reuse the default rather than an afterthought.
How do you use/apply Atomic Design?
Build from the smallest component upward, keep each level unaware of the levels above it, and assemble pages from what already exists rather than drawing them fresh.
When do you use Atomic Design?
On any product large enough that the same patterns recur, and especially where design and engineering need one shared model of the parts.
Who uses Atomic Design?
Design system teams, and any designer or front-end engineer working in components.
