Interview frequency: …
Short answer
It is a methodology for breaking down and building interfaces hierarchically from the smallest elements upward: Atoms, Molecules, Organisms, Templates, and Pages.
Explanation
Atoms are indivisible elements (colors, fonts, individual buttons, and input fields). Molecules combine two or more atoms into a functional unit, such as a search field with a Search button. Organisms combine several molecules into an independent interface section, such as a full header or interactive product card. Templates arrange organisms in a structural layout without content. Pages fill templates with real content and data to test the design.
Common mistakes
- Treating Atomic Design as a rigid linear process rather than a mental model for understanding compositional relationships.
- Creating overly complex molecules that are difficult to reuse across contexts.