(Re)building design systems with an atomic frame of mind
I first became fascinated in Atomic Design while studying in an online bootcamp course called Designlab. This was around a year ago, at which time I was still pondering the idea of pivoting into design full-time from my previous role in customer success.
Now having successfully transitioned into the role of product designer at that same company I previously managed clients for, the importance of atomic design principles becomes increasingly prevalent. I believe adopting an atomic approach is the most basic yet fundamental building block to designing frictionless and scalable customer solutions.
💡 What is Atomic Design?
Atomic Design first emerged in an article written by Brad Frost called the The Atomic Design Methodology published in 2013. Frost describes the idea as a mental model to creating scalable and responsive design systems. These systems are made up of components or design elements which serve as building blocks to create and iterate on a working digital product.
My Atomic Design Process
As a product designer, understanding atomic principles has not only expedited my understanding of how the industry now widely approaches development for digital products, but it has also set a foundational approach for how I tackle complex user problems. Whether I am building components from scratch or working with an existing design system, atomic design thinking empowers me to create and test solutions more efficiently.
Building an Atomic Design System
I recently started a passion project that will involve adding a new feature to Netflix’s mobile UI (full case study coming soon). To lay the foundation for my work, I began with creating a UI Kit for Netflix’s mobile app (iOS) on Figma.
This completed atomic design system can now be used as building blocks for the new feature I plan to design, while also setting appropriate constraints for my solution. (Check it out below)
Through practice recreating a design system that already exists, I was able to accomplish 3 things:
- Gain exposure to how different product teams approach design systems, including how components are used to create consistent UI patterns and user experiences.
- Explore solutions to user problems by creating potential, new features. Using design elements, I can practice problem solving given pre-set UI constraints and patterns while continuing to develop my own design process.
- Support and collaborate with the design community by sharing work as a public Figma Community UI Kit. Through this, I hope that my work can be used by other designers as the building blocks for executing new ideas without having to build UI entirely from scratch.
An Atomic Frame of Mind
For any designers who are still new to the world of components, Figma, and design systems, it can be easy to get caught up in the terminology or “science” — if you will — of Brad Frost’s atomic ideals. When it comes to implementing “atomic design” in practice, it’s important to recall that Frost’s interpretation of an atomic system is just a framework.
In reality, as long as your system is practical to build, scalable, and easy to iterate on, then you’re on the right track.
Rather than getting overwhelmed by the terminology, I want to encourage my fellow designers to adopt an atomic frame of mind. In turn, we will be empowered to:
- Design new features faster
- Iterate at scale
- Develop clean prototypes with minimal frames
- And so much more…
Below, I outline my step-by-step process for the Netflix (mobile iOS) UI Kit. I encourage you to use this as an example of how atomic design can be applied, but feel free to tweak when implementing your own process!
Step-by-step Atomic Process: Netflix UI Kit
Before jumping into component creation, my process began with defining what Brad Frost calls design “ions”. In the case of Netflix, this included brand colours and typography. For typography, I used Netflix Sans light, medium, and bold, creating a number of standard styles for all weights.
💡 Quick Tip for Figma users: Create text styles quickly in bulk using the Text Styles Generator plugin
For colours, I pulled hex codes from product screenshots taken on my phone. My colours styles include shades of Netflix’s primary red, multiple shades of grey, white, black, and a system blue and red. The system colours are used for errors and other interaction feedback within component states such as the input field.
Brad Frost uses a bottom-up approach to create UI elements, starting with the simplest and most basic components.
After ions, I created UI “atoms”. For Netflix mobile, this included logos, badges, and a global icon set. I noticed Netflix uses multiple sizes for a single icon across the app (from 16px to 28px) so I created a global set at 24px to establish some uniformity. Instances of these global icon components could then be scaled as needed within each UI molecule or organism.
After creating my set of core UI atoms, I moved onto the more complex design elements. Molecules and organisms were organized both by function and feature. For example, simple molecular components like buttons and tabs were paired together with instances of these components used within more robust organisms like the video player and title cards.
Finally, I created 9 different “template screens” which can be used as UI pattern guides for creating new Netflix features. Each screen contains various levels of components from my atomic system and replicates initial screenshots taken on my phone at the beginning of this project. By breaking down key screens on the app, I believe my UI Kit includes the most important design building blocks.
Closing Thoughts
Although the idea of Atomic Design has been around for almost a decade, it continues to hold significant importance. As a junior designer entering the field, I am eager to see how atomic principles continue to evolve in the industry at large, and look forward to expanding on Frost’s foundational principles as I iterate on my own design process.
Coming Soon
Keep an eye on my portfolio or follow me on LinkedIn to see part 2 of my Netflix case study (adding a new feature 👀).
Find my Netflix UI Kit in the Figma Community here. If you have any feedback, please send me on DM on LinkedIn.
Shoutout to Designlab for opening the door to my new career, and a special thank you to Socrates Charisis for pushing me to implement an atomic approach since day 1 of my design journey.