Atomic design with tokens — The short version
By now, you’ve probably encountered the term “Atomic Design” when researching how to initialize, build or maintain your design system. If, by any chance, you’ve been living under a rock, and this is your first time reading about the methodology and its uses, don’t worry; this story got you covered. This article will summarize the methodology and include the addition of design tokens.
Covering the basics: What is a Design system?
By this stage, if you are a UX/UI / Product designer or any other form of digital interface designer, and you haven’t heard the term “Design system” at least once in your career, You have some more reading to do before continuing to read. This article doesn’t explain what a design system is but rather discusses the usage of the atomic design methodology. You can read more about the term in Audrey Hacq article, which I think explains this nicely.
What does AI think about atomic design?
When I entered the prompt “Atomic design methodology” to the content generative AI tool, Midjourney, these are some of the results I got. Not the result I thought I would get, but a nice mashup of the atomic nucleus representation and some design systems showcased on Dribble.
When I asked Chat gpt “What is the atomic design methodology?” I get a nice short answer, but we’re going to get even deeper than that.
Where it all began
The atomic design methodology was coined by Brad Frost back in 2013. Inspired by chemistry, Brand proposed a mental module and a hierarchical system of ordering UI elements and components.
His system took inspiration from the periodic table of HTML elements by Josh Duck.
Brad’s methodology comprises six distinct stages (with the 6th stage added about six years later when Salesforce’s Lighting design system introduced design tokens), all working together to create more deliberate and hierarchically design systems.
The six stages are Tokens, Atoms, Molecules, Organisms, Templates, and Pages.
Let’s explain briefly
- Tokens:
The smallest functional units of matter at the sub-atomic level, consistent with raw values (such as HEX, rgba, percentages, numbers, etc.). Represented by context-agnostic names or names with a shared semantic meaning to a majority group of items within a component. - Atoms:
The basic building blocks of UI elements include buttons, labels, titles, fields, etc. - Molecules:
Simple groups of UI elements combined to create a basic component that can function on its own. For example, a search bar that is comprised of a label, field, and a button. - Organisms:
A more complex UI component comprised of groups of molecules and/or atoms and/or other organisms. Organisms form specific sections of an interface, for example, a header of a page with a menu, search bar, and more. - Templates:
A repeatable layout and structure for pages, or profoundly complex components (Like the example of a table following in this article) with placeholders to switch with different pieces of content and even different components at different stages. - Pages:
The final stage of the atomic design system is the actual deliverables of a product with full components working together to make sense and create value for the end user.
What are design tokens?
Design tokens are a way of abstracting visual and functional properties of design elements into reusable, modular pieces of code. They can include a wide range of properties, such as colors, typography, spacing, breakpoints, and more.
While looking at other articles discussing the Atomic design methodology, the majority neglect to mention design tokens. Salesforce is widely considered the industry’s pioneer when it comes to design tokes. Back in a 2014 article, published by Salesforce’s VP UX, Sönke Rohde, he described how the company uses design tokens to apply design principles across multiple platforms and software.
Cater to your needs
Design tokens can be implemented in different ways, depending on the specific design system and tooling used, but typically involve creating a centralized source of truth for all design elements, which can be accessed and used by designers and developers across different products and platforms.
The following is the implementation of design tokens at XM Cyber that the frontend team and myself have created to best fit our needs. This can be implemented with fewer or more token levels.
Raw value
The most basic values within the code, such as HEX, rgba, percentages, numbers, etc.
Core token
A naming convention for the raw values. It can be directly used and inherited by all other token types, represented by context-agnostic names. Components in the system can be used with these tokens, but they will not give semantic meaning to their use and will be able to be themed— more on that below.
Examples
#00FF91 → green-40
10px → size-100
Aggregator token
A token with a shared context or semantic meaning to a majority group of values within a component, without going in-depth into the UI elements. This token allows coupling colors/spacing/other values with a shared meaning across the system. For example, set the brand’s primary and secondary colors to the primary call to action button.
Maintenance and themes:
One of the key benefits of using design tokens is that they can be easily updated and maintained, without requiring changes to the underlying code. For example, if a brand’s color palette changes, designers can simply update the design token for that color, and all instances of that color throughout the design system will be automatically updated. This can help save time and reduce errors, as designers and developers don’t have to manually update each instance of a design element.
Design tokens can also be used to create different system themes or variations of a design system. For example, a design system might have a “light” theme and a “dark” theme, which define different color palettes, typography styles, and other design properties. The light theme might have a white or light background with dark text, while the dark theme might have a black or dark background with light text. Creating different themes using design tokens can be especially useful for products or platforms that need to support different brand identities or user preferences. By defining a set of core design tokens that can be easily customized for different themes, designers, and developers can create a more flexible and adaptable design system that can be tailored to different contexts and use cases.
Countless design system built uses Atomic design methodology
For a system to work well and for a methodology to function correctly, it should have great adoption by the community it’s intended for. For a design system and for the Atomic design methodology in particular, the repeatable deliverables have similarities that follow a pattern and a role set. This supports a claim by Jakob Nielsen, which states:
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
Create more efficient, consistent, and flexible design systems
Together, design tokens and atomic design provide a powerful framework for building robust and scalable design systems. By defining a shared language and set of standards for design properties, design tokens enable consistency and efficiency in design and development. By breaking down design elements into modular components, atomic design enables flexibility and scalability in design systems, allowing designers and developers to create new elements and layouts quickly and easily.
Efficiency? Stop pushing pixels!
When designers use tokens to set shared values and properties across components to create a coherent look and feel, they save up on time. There is no need to spend time on selecting a base and hover colors for a new button, the design tokens have them defined. This allows them to focus on other things, like investing more time to enhance the overall user experience of a feature or a product. More time for research and more time to define.
I recommend reading more about the approach to saving time on repetitive design work by designing “starter kits” templates in Figma in the following article I wrote:
