EssentialWebsiteDesign Systems

Atomic Design

Brad Frost

intermediateFree3 hoursBrad Frost
Visit original resource(opens in a new tab)Opens atomicdesign.bradfrost.com

It gives you the mental model most design systems are organized around: build complex UI from small, reusable parts. Read it before or alongside building a system so the vocabulary of atoms, molecules, and organisms clicks. The whole book is free online, so there is no reason to skip it.

What you will learn

  • The atomic design methodology
  • Composing UI from reusable parts
  • A shared vocabulary for component hierarchy

How to study it

  1. Read it once, then state the single core claim in your own words without looking. If you cannot, you did not read it closely enough yet.
  2. Note one thing you will change in your own work because of it. An article that changes nothing was entertainment, not study.
  3. Revisit it once a week later; the second pass with a gap is where it sticks.

What to do next