Atomic Design Principles and Do’s

There has been plenty of discussion on design systems over the last year as they have progressed both in terms of technical ability and of course popularity.

In short, a design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems are a method to translate a consistent experience and visual language across a product when working on different touch-points. Think of your assets as a box of lego, not only are the pieces readily available but there are infinite possibilities in how to assemble them.

Let’s be clear that design systems are no style guide though, it’s essential to not only understand the pieces of your design system but the context of their use and the ‘why’ behind them…

Enter, Atomic Design

Just like you can think of a design system as a set of Lego as your assets you can equally consider your design system as Atomic. The Atomic Design Systems methodology considers all the details that go into creating and maintaining robust design systems whilst providing a pretty coherent way of explaining itself using chemistry. Let’s get into it.

Atoms: In chemistry atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. When we relate this to our design systems the atoms are very much the basic assets of our product. They are the foundational building blocks that comprise all our user interfaces such as type, labels, colours and spacing.

Molecules: Molecules are a group of atoms pieced together to take on new properties or to complete a function. In design systems, we can think of our molecules as our building blocks or ‘atoms’ that we are piecing together to form a functional element. Perhaps we are putting together an image header with a title label for a profile molecule or doing something more complex such as constructing a checkout function using atoms to form the molecule.

Organisms: Both atoms and molecules are simple functional forms in our design systems that can be reused across a product. Organisms are slightly more complex and form bigger chunks of our product. We can think of these organisms in our design systems as groups of molecules. Where atoms make up a molecule to form a search feature it can be combined with another molecule that forms the page navigation to make an organism — a complete page navigation with a search feature. These will be used as a distinct pattern across a product.

Templates & touchpoints: Now we have covered the basic structure of a design system through atoms, molecules and organisms it’s time to see how we can use them to create a consistent product. Organisms can be used to make up different templates of larger layouts which can contain multiple features. These templates are then used to make up the majority of a products touch points.

Atomic design is one such method to describe and practice design systems whilst they are becoming essential in today’s world of rapid growth and need for holistic products. These design systems allow teams to build better products faster which are understood by users as the language is consistent across each and every touch point.

With a more consistent experience, we can work harder to focus on the most important parts of our products experience.

If you’ve been in the frontend dev community for a while you have probably heard of a little thing called Atomic Design. Coined by Brad Frost, Atomic Design is a methodology that involves breaking a website layout down into its basic components, which are then reused throughout the site .

There are many benefits to using Atomic Design. I will go through 10 important ones in this article.

1. You can mix and match components

By breaking down components into basic atoms it’s easy to see what parts of the site can be reused, and how they can be mixed and matched to form other molecules and even organisms.

2. Creating a style guide is simple

If a site is created according to Atomic Design principles from the get-go, all the atoms and molecules that are created before the site is built can serve as a basic style guide. Even for sites that haven’t been built atomically, it isn’t difficult to extrapolate the basic components and put them together to construct more pages. Bear in mind, though, it is always best to create a site atomically from the beginning, rather than trying to introduce Atomic Design principles to a site later on.

3. Easy to understand layout

The code of an atomically designed website is typically much easier to read than one created a more traditional way. This is true not only during the time of creation, but in the future when a site is being looked back on for reference or small tweaks.

Because of the documentation around what atoms molecules and organisms are being used and where, it’s easy to see what each part of the code represents. Another bonus of this is that it makes it easier to explain the codebase to a new developer.

4. Code is more consistent

With Atomic Design, you use predefined atoms to create the site layout, it is easy to see which components are being used for different parts of the site. This reduces the likelihood of writing duplicate code.

For example, if someone creates a site without using Atomic Design and they require, say, a red button, they would have to look through the whole site to try and find an existing one. If this did exist, they would need to copy and paste that code to the new instance. If there were no red buttons, they’d need to create a new one. With Atomic Design however, it is easy to go back through the list of atoms and find that exact red button.

This becomes a much easier process when the Pattern Lab library is involved. Pattern Lab is a collection of tools that make Atomic Design easier. In our example, it would provide a search bar for atoms, making it easy to search for and find that exact red button.

5. No focus on pixel-perfect designs

As the idea behind Atomic Design is to use atoms as the building blocks for site creation, it is less likely that a web developer will create many atoms for a similar thing. Instead, they can simply look through the list of existing atoms, and tweak them to create new atoms if required.

A great example of this would be for titles on a site. Let’s say a creator has a list of titles used for the site, all in black: a main header, sub-header and paragraph title. They haven’t worked in the site in a while and need to come back to the site to add a new blue title. They could take a look at the titles that already exist and customise one of them to get the result they desire.

6. Quicker prototyping

Having a list of atoms before site creation begins means you can mock up pages quickly and easily — all that is required is to pick and combine the required elements for the page. The mockup can then be customised and refined for the final site.

7. Easier to update and remove parts of the site

As only one atom, molecule or organism is being changed at any one time, it is easy to ensure that any updates to a component are carried across to all other instances across the site. Similarly, unwanted components can easily be removed.

8. More modular file structure

Although Atomic Design is very prevalent when it comes to markup (HTML), I believe these techniques can also be used for CSS, JavaScript, or any other languages used to create a site to make overall code more modular and reusable.

I myself use atomic CSS for websites I create and have found great benefits to this approach. However, I believe with the arrival of things like HTML components it would make sense to separate CSS and JavaScript specific to an atom into its own folder along with the HTML, so if anything needs updating or deleting, you know exactly where to go and what to change.

9. Fewer components overall

If a creator has a list of atoms, molecules and organisms presented to them before site creation begins, they are more likely to use what already exists than create new components for small variations.

If a title with a font size of 4.5em is required for a design but there is already a 4em size title in existence from the list of atoms, it is more likely a creator will pick the 4em one than create a completely new title. This will result in fewer atoms being used overall, making for a cleaner and leaner website.

10. Explore Pattern Lab

This isn’t really a benefit so much of Atomic Design but a great tool created by Brad Frost and Dave Olsen to help with the process. It is essentially a static site generator that uses mustache for templates and a JavaScript viewer for interactivity. It’s created with mobile-first design in mind with options to resize pages, add comments to sections of the site and code snippets.

The original version is written in PHP, but there are two Node versions: one for gulp and the other for Grunt. I highly recommend messing about with the demo on the Pattern Lab site to give you a better understanding of how it works and Atomic Design in general.