Grouping Components in Atomic Design Systems

Ed Orozco
Ed Orozco
Jan 13 · 3 min read
The Atomic Design Taxonomy.

Organizing and classifying components in a design system is an art-form in itself. Coming up with a consistent nomenclature, finding a grouping principle for the different types and keeping track of dependencies are all challenging endeavors.

To make sense of all this chaos, I usually like to adhere to the methodology proposed by Brad Frost in his book Atomic Design. The book provides a useful framework to classify components into a nested taxonomy.

If you haven’t read it yet, I highly recommend you do. It’s actually one of my 3 favorite design books on design together with Sprint and Don’t Make Me Think.

THE PROBLEM

There is one problem though. As the design system grows, so does its complexity and that’s when things can get intricate. Sometimes it’s difficult to discern in which group a specific component should go.

Atomic Design states groups all components into:

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

However, templates and pages are not categories of components but rather the upper layers of the hierarchy that allow you to place components to build your product.

This means we have effectively 3 groups only:

  • Atoms
  • Molecule
  • Organisms

But then, the question is what goes where? Should a pop-up dialog be a molecule or an organism? And what about grids?

Confused? Read on (Gif from Giphy.com)

The book doesn’t go intro great detail about these questions so I’d like to offer an easy-to-follow guidelines.

ATOMS

Populating the atoms group it’s usually the easiest part. The rule of thumb is, if you can’t divide without it becoming useless, then it’s an atom.

Here’s a list of typical atoms:

  • Typographic styles
  • Color swatches
  • Icons
  • Radio buttons
  • Checkboxes
  • Sliders
  • Toggles
  • Profile pictures placeholders
  • Product pictures placeholders
  • Buttons
  • Links
  • Input fields (without labels)
  • Tabs
  • Pills
  • Badges
  • Tags
  • Tooltips

MOLECULES

Molecules can often be mistaken for organisms and viceversa. The rule of thumb here is, groups of atoms that work as a single component with a single function.

Here’s a list of common molecules:

  • Dropdown menus
  • Radio buttons inside regular buttons
  • Dropdown buttons
  • Date pickers
  • Search components
  • Blockquotes
  • Breadcrumbs
  • Card components
  • Collapsible group items
  • Input fields (with labels)
  • Input groups
  • Media uploaders
  • Loading components
  • Notifications
  • Pagination
  • Media objects
  • Informative pop-ups e.g. error messages
  • Boolean modals e.g. This site uses cookies: accept / cancel
  • Tiles

ORGANISMS

Now that we’ve defined the classifying principle for molecules, all you need to remember is that organisms are combinations of multiple molecules and have more than one function.

Here are some organisms:

  • Navigation bars
  • Tab bars
  • Video players
  • Music players
  • Media grids
  • Progress indicator
  • Tables
  • Carousels
  • Forms

I have been following these guidelines for a while and I’ve had great results. Hopefully they’ll be helpful to you as well when organizing and inventorying your design system.

Was this helpful to you? Do you know a better way to classify design systems? Let me know in the comments below!

Ed Orozco

Written by

Ed Orozco

Head of Strategy at WANDR. I write about Design strategy. Remote 🌎 – edorozco.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade