Created by Brad Frost in 2013, it uses a chemistry metaphor: Atoms combine into Molecules, which form Organisms, which populate Templates, which become complete Pages with real content.
Think of it as building with Lego bricks: individual tiny plastic pegs are atoms, assembled into vehicle wheels as molecules, built into a fire truck as an organism, and set into a city street layout as a page.
How it works
Atoms are basic HTML tags and tokens like inputs and buttons. Molecules combine atoms into functional units like a search form. Organisms are complete interface sections like a header. Templates wireframe layout rules, and Pages test real production data.
When to use it
Adopt Atomic Design when building scalable UI component libraries in Figma and frontend codebases like React or Vue to maintain consistency across large product teams.
Common mistakes
Treating Atomic Design as a rigid linear conveyor belt instead of a mental model for understanding how small parts construct coherent wholes.
Frequently asked questions
Key takeaways
- Breaks interface design into five clear, composable stages.
- Connects abstract design tokens to concrete, production-ready pages.
- Enables engineering and design teams to speak the exact same component language.