Atomic Design is a methodology for designing user interfaces that breaks down complex systems into smaller, manageable parts. It was created by Brad Frost and is based on five different levels:
Atoms: These are the smallest elements in design, such as buttons, form inputs, labels, or icons. They are the basic building blocks of the interface.
Molecules: Molecules are combinations of atoms that work together to create simple, functional components. For example, a form field that includes an input (atom) and a submit button (atom).
Organisms: Organisms are groups of molecules that combine to form more complex parts of the interface. For example, a search bar made up of a text input field, a submit button, and an icon.
Templates: Templates are the structure of pages, where organisms are arranged to create layouts. This is how the basic structure of a page or screen looks.
Pages: Pages are the final implementation of the design, showing the actual content and layout to the user. This is the real user interface that the user interacts with.
Atomic Design helps designers build scalable and reusable design systems by creating small, independent elements first and then combining them to create complete pages. It allows for easier updates and more consistent designs across different projects.
We’re not designing pages, we’re designing systems of components.—Stephen Hay
