5 Ways to Sell the Atomic Approach to Design Systems to your Colleagues

Whether you’re heading a design or engineering team, one thing is for sure — it’ll be difficult getting buy-in from colleagues when you first introduce atomic design. Here's a short guide to point your team in the right direction.

1. Evaluate your prototyping process

Without atomic design, a prototyping process typically looks like this: you make simple sketches or benefit from storyboards, and even make a mock-up of digital interfaces. You show it to your client for approval only to find out he wants some things changed. You go back and re-do your mock-up pages from scratch, which means your team has to put in double the effort and time. And while this process is iterative, it’s not as agile as it should be. This is where atomic design can help.  

With atomic design:

In atomic design, you have a list of defined atoms - the smallest entity of UI elements that you can’t break down further. You can think of them as your interface’s basic building blocks like colors, animations, fonts, and iconography. 

With a list of atoms ready, you can easily and quickly make mock-ups. All you need to do is combine the elements you need for the page and that’s it! You can then refine and customize the mockup for your final design.   

Updating the prototype also becomes easier. At any given time, only atoms, molecules, or organisms need to be changed, which doesn’t take much time.

Our experience:

Before getting started with atomic design, our clients work with a prototyping process like the one described above. To get started, we count and list all the smallest parts of a design component and label them as atoms. See how we did it for Workgrid.

2. Count the number of new existing components

Have your colleagues count the number of “new” components that already existed. More often than not, teams have a habit of recreating components that already exist, especially because it’s cumbersome to go through the entire code and find if the component already exists. As the number of design components increases, managing them becomes all the more difficult.   

With atomic design:

Since atomic design involves using predefined atoms that can be used to build nearly everything, it becomes quite easy to see the components that already exist and are part of the website. This also helps prevent the duplication of design components. 

Our experience:

It’s common for teams to have an inventory of design components. It’s even more common when teams build components that they didn’t know already existed. Calendly experienced this problem before implementing an atomic approach - read all about it.

3. How are changes to design components managed?

Frequent changes to design components are not uncommon and without an atomic design approach, making these changes can be quite troublesome. 

And once they are made, these changes need to reflect across all instances of a particular component before they can be sent off to development. All of this makes managing design components difficult.  

With atomic design:

The atomic approach helps developers better organize and structure their code, especially since there’s no duplication involved. The code is clean and consistent and since every component is broken down into atoms, it is easy to make changes and have them reflected in all instances.

Atomic design ensures you don’t compromise brand consistency. You can just take an atom, make the necessary changes and use that to make a molecule or organism that eventually becomes a part of a template while ensuring that everything stays coherent. 

The flexibility of this atomic approach means you can just change the atom that doesn’t have the desired effect without disturbing other components on the page.  

Designers can also benefit from this approach. Atoms are used to build up templates that serve as the product skeleton and articulate the underlying content structure. With a better understanding of how content and structure work together, making changes is easier. 

Our experience: 

The atomic approach allows teams to make changes to existing components without affecting brand consistency. A client like Calendly conducts several A/B tests to measure the effectiveness and success of a website page. Calendly can make slight modifications to atoms to build and test the pages they desire.

4. Evaluate the state of the website’s code

Code can get messy, especially if there’s no source of truth that includes all the components in use and their codes. So each time designers ask for a change in a component or page, developers have to figure things out themselves. And reading and understanding the code of a traditionally-made website is difficult not only at the time of creation but also later when you want to make small tweaks or refer to a component.  

Plus, without templates and patterns of previous work, it’s difficult to ensure design consistency when adding something new to your product. 

With atomic design:

One of the greatest benefits of atomic design is the greater control you get over UI components. The atomic approach leaves no room for guesswork or confusion because development teams can build pages using one source of truth. The atomic design system outlines what atoms, organisms, molecules, and templates are being used and their place on the page, making it easy to see what a certain block of code represents. 

Another advantage is it becomes easier to explain the code to someone who just joined the team.

Our experience:

The handoff from designer to developer is more seamless because development teams have the right specs to build the desired pages. Marketing teams have the power to mock-up the pages they wish to test and developers have the keys to do build them efficiently with the help of the atomic design system.

5. Are your website’s design components reusable?

Reusability is essential for three main reasons: it ensures a consistent UI/UX, speeds up development, and standardizes the codebase. To get atomic design buy-in from your colleagues, have them reevaluate the reusability of their components. Can they reuse components without any extra effort while keeping in mind brand consistency?  

With atomic design:

Atomic design makes code overall more reusable and modular. Since everything is made up of atoms, teams can essentially reuse components everywhere. The output of an atomic design approach can be thought of as a flexible puzzle. Designers can exchange atoms within the page according to what they need.  

With an atomic approach, you will find that you have fewer components than you would without it. Breaking down all components into basic atoms helps teams realize the parts of the layout that can be used. Along with that, they help teams figure out how these atoms can be mixed to form other molecules without duplication. 

This is mainly because this approach is very controlled and calculated and makes sure teams don’t end up making different versions of the same components. Similarly, they prevent the creation of duplicates with only a slight change in style. 

Our experience:

Atomic design is all about reusability - taking atoms and using them to build pages. By identifying all existing atoms from the start, marketing teams like Calendly’s can build the desired pages without needing development resources every time. Now, Calendly’s team speaks the same visual language and it’s reflected across their entire website.

Speed Up & Scale DesignOps with Atomic Design

Get a complete overview of the atomic design methodology and how it's used by creative teams to maintain brand consistency across the marketing site.

Get The Ultimate Guide to Atomic Design

Parting Thoughts

Atomic design can be beneficial for both design teams and developers and getting started is relatively straightforward. You just need to be clear on your foundational elements (atoms), and you can easily build up your website from there and make things easier for the coding team too!