Atomic 2.0
Revisiting the Atomic Design Method for Design Systems
Atomic Design is a great methodology for both design and development that was pioneered by Brad Frost. I’ve found that the hierarchy of elements is often interpreted differently from person to person so I’ve tried to solve that with a new approach, I call it Atomic 2.0.
Concern #1 with Frost’s approach
Frost describes atoms as elements that cease to be functional if broken down further. He classifies buttons and form labels as atoms for this reason, but this is where the confusion starts. More complex elements, such as whole forms, can also cease to be functional if we start to strip them down yet they are classified as an organism. This leaves lots of room for interpretation as to what is an atom or not.
Recently the model was updated to include design tokens, but this doesn’t follow the chemistry metaphor.
The Solution
In Atomic 2.0, only foundational styles are atoms because they truly cannot be broken down further. Anything in the atom category can be turned into design tokens. With this approach, the atoms can only create a molecule when combined with another atom. So a form label, being a combination of a color atom and a text atom, would be considered a molecule.
When the foundational styles are atoms, it ensures that from project to project the atom types are much the same. With this approach the atoms that I’ve used are border, breakpoints, color, grids, motion, opacity, shadows, spacing, and text. Within my Figma files each element type appears on their own page, that way it’s clear as to which category the element falls under by how it is organized in the page panel, see below:
Concern #2 with Frost’s approach
Templates and pages don’t follow the chemistry metaphor. With Frost’s model, templates consist of groups of molecules and organisms with placeholder content, with the pages being specific instances of templates with real content that live outside a Design System.
The Solution
Templates are a part of this model but pages are eliminated. I’ve also given templates a name that fits into the science metaphor, referring to them as species.
In practice, this means that there are separate Figma files for the pages with real content that pull from the Design System library file the reusable atoms, molecules, cells, organisms, and species. While on the development side, this means that the Design System’s library includes the building blocks but not the final pages.
Concern #3 with Frost’s approach
I’ve seen lots of confusion around whether an element is a molecule or an organism.
The Solution
With this shift to atoms only including the foundational styles of a Design System, the other categories of the Atomic 2.0 approach have to be updated to reflect the change. I find that this removes lots of the guesswork around the elements. In this model, molecules are elements that can only be broken down into atoms, although sometimes they can contain other molecules, such as a button that contains an icon.
Cells (patterns) are a new element type that contains two or more molecules, like comment cards, which contain different molecules, or an accordion which include two or more of the drawer molecules.
Organisms (blocks) are made up of smaller elements but what truly defines them is that they are very distinct sections of a page or screen that in combination with other organisms can create a Species. Organisms include elements like FAQ sections, headers and footers.
Species aren’t only made up of organisms. For example, an accordion can be a cell that can stand alone on a page but there might also be an organism that can live on a page that includes an accordion, a heading, a description, and a background color.
Let’s look at some examples
To dive further into this approach, let’s look at some examples of elements in each category.
Atoms:
Cannot be broken down further.
They include:
- Borders
- Breakpoints
- Colors
- Grids
- Motion
- Opacity
- Shadows
- Spacing
- Text
Molecules:
Can be broken down into Atoms.
They can also contain other Molecules within them (ie. a button can include an icon within it).
They include:
- Inputs (radio, text field, checkbox)
- Form labels
- Error text
- Dividers
- Lists
- Icons
- Badges
- Tooltips
Cells:
Made up of two or more molecules.
They include:
- Form fields
- Alerts
- Product tiles
- Menus
- Time/date pickers
- User comments
- Breadcrumbs
Organisms:
Distinct sections of pages or screens that are made up of atoms, and/or molecules, and/or cells.
They include:
- Forms
- Carousels
- Banners
- Header
- Footer
- Upload modal
Species:
Templates of complete pages or screens, whereas the pages built using the library are built in another file.
They include:
- Landing pages
- Product listing page
- Product detail page
- Article page
- Event page
Still a Frost Stan
I still want to give Brad Frost the credit that he deserves, his approach has revolutionized the way that we create products and experiences today. This Atomic 2.0 method builds on his ideas and it’s the version that I have found the most success with in my teams.
Maybe it will work for your’s too.
👋
