Grouping components in atomic design systems

The Atomic Design Taxonomy.

[1] March 20, 2020 Update: Reader Luca Brognara made me realize input groups can easily be mistaken for groups of input fields. To prevent confusion, I’ve crossed input groups from the molecule’s classification.
My suggestion is to keep all types of input units as molecules and refer to groups of multiple inputs simply as forms.

Organizing and classifying components in a design system is an art-form in itself. Coming up with a consistent taxonomy, 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 one of my three 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 group those components to build your product.

This means we have effectively three 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?

Image from Tenor.com.

Confused? Read on (Gif from Giphy.com)

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

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 vice-versa. 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)
• I̶n̶p̶u̶t̶ ̶g̶r̶o̶u̶p̶s̶ * removed as per update [1]
• 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!