Design

Systems: A Collection of Parts (Atomic Design)

December 1, 2021
Creating and maintaining an effective design system means dramatically changing your organization’s culture, processes, and workflows. If that sounds hard to you, it’s because it is.”

Intro to Design Systems

During a lecture @ Georgia Tech, my instructor talked about “Atomic Design” and how it has become a popular way of thinking in the design industry. We spent about ten minutes or so on Brad Frost’s framework, but I decided to read his book (especially since he makes it readily available and free of cost!) to hear about how the atomic design framework came to be.

Atomic Design 101

Brad Frost’s “Atomic Design” is an analogy for how design should ideally proceed. It’s a way of thinking that allows anyone, not just designers, to quickly shift between thinking of the part and the whole; the implied hierarchy in the naming structure makes it easy (hopefully) for all types of stakeholders to understand design decisions taking place.

Frost’s framework is boiled down into 5 parts - increasing in size along with numerical value:

1) Atoms (basic building blocks) - HTML elements like labels, inputs, buttons or any other item that can’t be broken down further

2) Molecules (groups of atoms) - simple groups of UI elements functioning as a unit such as a form label or search input

3) Organisms (groups of molecules) - complex UI elements such as navigation bars

4) Templates (groups of organisms) - page-level objects that apply layout and exhibit the design’s content structure

5) Pages (groups of templates) - instances of templates with real content in place

At the time this thinking was conceived, design systems were not widely used as they are nowadays; in other words, this was design systems thinking in its infancy, of sorts. Frost talks about UI frameworks like Bootstrap, his own open-source project called Pattern Lab, and the changes that have to be made organizationally in order for design systems to truly thrive. He notably talks about the idea of “done” and the paradigm shift that must occur around that word; there is no such thing as done in this context: the point of systems such as these is for them to evolve constantly and subsequently be adopted throughout an organization’s products seamlessly.

Maintainable Design Systems

One of the highlights of the book was Frost [correctly] saying:

“Naming things is really freaking hard”

Naming things is hard at the best of times but becomes extraordinarily difficult when there are multiple people with different ways of thinking working on the same project; things get out of hand very quickly. Naming is just one of the many challenges that design systems bring to teams. Other authors have written about knowledge and access being other key indicators of success: how accessible is the system for employees and do they know how to use it? Sarah Vesselov (GitLab) discusses the importance of evangelizing design systems within the organization. I feel as though Frost takes it a little bit further and zooms out to encompass all potential users of the system with 20 key principles:

1) Make if official

2) Make it adaptable

3) Make it maintainable - the “holy grail” - changes to patterns automatically being applied to code

4) Make it cross-disciplinary

5) Make it approachable - make it usable

6) Make it visible - evangelizing the design system; many orgs have dedicated websites for their design systems nowadays

7) Make it bigger - include technical writing guidelines, design principles

8) Make it agnostic

9) Make it contextual

10) Make it last!

Thoughts on the book

While I think Georgia Tech did a good job with lecturing on the essentials of Atomic Design, I’m glad I ended up reading Frost’s book; he explained the evolution of this thinking extraordinarily well and provided needed context for designers looking to build/contribute to successful design systems. I appreciate Frost’s practical mindset; he talks about the shared cost and design justifications for design decisions in a way that makes them feel the same (this book has aged very well). While it was probably not his goal, I also appreciate the arguments he provided to counter those who may be against doing things differently. Many of these common arguments are readily available because of LinkedIn and the internet generally but Frost’s take on one of them made me laugh. He says:

“It’s ludicrous for anyone to utter the phrase, “This is how we’ve always done things” in an industry that’s only 25 years old.”

Along with many others, this book will likely age like fine wine (it already has!). This book came at a good time: designers sometimes talk in a frenzy about design-specific things and lose sight of broader goals as well as non-design stakeholders who are simply not familiar with this kind of thinking yet. During my boot camp, it was easy to become one of these people and lose sight of the fact that, at the end of the day, we are simple problem-solving in methodical and evidence-based ways.

Overall, this was a fantastic read!

Other Blog Posts

February 2025
Service Design
In Progress! Check back soon!
View Post
April 2024
The Creative Act
Rick Rubin is a legendary creative and music producer; check out the overlap between his creativity principles and the principles of UX.
View Post
April 2024
Notes from the NN/g Podcast Series
Hosted by Therese Fessenden, the NN/g podcast is both: an interview series with NN/g employees and an educational series covering foundational UX concepts.
View Notes