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.
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:
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:
But then, the question is what goes where? Should a pop-up dialog be a molecule or an organism? And what about grids?
The book doesn’t go intro great detail about these questions so I’d like to offer an easy-to-follow guidelines.
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
- Radio buttons
- Profile pictures placeholders
- Product pictures placeholders
- Input fields (without labels)
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
- Card components
- Collapsible group items
- Input fields (with labels)
- Input groups
- Media uploaders
- Loading components
- Media objects
- Informative pop-ups e.g. error messages
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
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!