Atomic Design
Atomic Design is a methodology for creating modular design systems by breaking interfaces down into five hierarchical levels.
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.
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.
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.
Learn this
Lessons and exercises mapped to this concept.
Common questions
- What is the difference between an organism and a template?
- An organism is a distinct, self-contained UI component like a navigation header, while a template is the page-level layout container that arranges multiple organisms together.