Introduction To Atomic Design

If you read our previous post, you should know already what a design system is and how it can benefit your business. Within this article, we will explain the modular approach used as the foundation of many design systems – atomic design.

Atomic design – what is it?

Atomic design is a methodology for creating design systems and final products. It consists of atoms, molecules, organisms, templates, and finally pages. Flashback to chemistry lectures? Hm, sort of! It’s not as complicated as it may sound though, some people like to compare this approach to Lego blocks.

Atoms are the smallest, basic, universal building blocks that can be used to build molecules at a later stage. You can think of them as HTML elements, but atoms can also include foundation elements like colour palettes, fonts, styling or animations.

Molecules, like mentioned above, are atoms put together into fundamental units – components that can work on their own.

Organisms are grouped molecules forming together a distinct section of an interface. They are complex components or sections that can be reused across the whole system.

Templates are usually a combination of molecules and organisms together forming whole pages without content – sort of like wireframes. Templates can inform about the layout and the general feel of the product in action.

Pages come together when placeholders from templates are replaced with desired images, content etc. forming high fidelity design representation.

Benefits of atomic design

Generally, the main benefits of the atomic design are the same as that of a design system. It makes elements accessible to the team and reusable across a brand's multiple products keeping them consistent and on-brand. But atomic design also helps teams to create or innovate efficiently and at pace, with the ability to focus on the user's pain points and improvement of the user experience.  The biggest advantage of the atomic design is adaptability to change – like when a client wants to make significant changes in the product — such as a typeface. Without atomic design, each component would need to be changed manually, really slowing down the progress; with it, it’s a matter of a click (well, if done correctly!)

How to get started with atomic design

You should start building your system from atoms, then progress with the UI design. However, there is no “one fits all approach”, there are no boxes to be ticked along the way. For example, if you already designed the product and only now decided to build a design system you can take a step back and review all of your components. Cut out all components, look for common patterns, define atoms, molecules, organisms and change the ones that don’t match.

Moreover, there are no strict guidelines on how elements should be organised, if you feel like a button fits under molecules, not atoms, that’s completely fine. The system needs to be functional for the people using it. This is why it’s important to speak to them and discuss their needs and vision at first.

But what is essential to keep in mind is that when we truly design with atomic, the same component is going to be reused in very different contexts. All elements should be generic (a 'list' rather than a 'contact list') and use consistent, clear naming that reflect the element and its variant/property e.g., atom/colour/blue/90 or atom/button/primary/active.

One of the great tools you can use to start building the design system is Figma, the super-powerful design and prototyping tool that we at Newicon have been using for a while now. Features that Figma offers are helpful in creating reusable elements that can be shared with the whole team within the workspace library.

Here are some of the features:

• Define global colours, text styles, layout and effects using Figma styles

• Create reusable and responsive components using auto layout and constraints

• Create components variants and swap instances with ease

In summary, treat atomic design as a mental model that helps you think of a user interface as both a cohesive whole and a collection of parts at the same time. And don't worry, there is always a place for creativity and design iterations!

Do you want to build your project with an atomic approach? Find out how Newicon can help you implement it and build a comprehensive design system - contact us today.