A method for building interfaces by starting with the tiniest pieces and combining them into bigger ones — atoms (a label or input) form molecules (a search field), which form organisms (a header), then templates and full pages. It keeps large systems organized and consistent.
Synonyms
- atomic design methodology
Related terms
- design system
- component
- component library
- molecule
- organism
In plain words
- building screens from tiny parts up to whole pages
- the atoms-to-pages way of organizing components
Usage example
Using atomic design, they combined a button and an input atom into a molecule, then a full sign-up organism.
Don't confuse with…
- design systemAtomic design is a way to structure and name the parts; a design system is the whole product that may or may not use that structure.
Categories
- Design systems