Cloudberry recently hosted one of its Lunch and Learn sessions for the team. During this session, the topic of “atomic design” was presented by Associate Creative Director, Nalina Sarma. Nalina discussed this methodology and its principles and explained how the approach is an “exercise-in-reverse” when thinking about constructing design systems.
The typical approach for UX is to look from a broader perspective and drill down to specifics. Conversely, atomic design parallels chemistry in thinking small initially, and then looking to the bigger pieces. Atomic design was coined by Brad Frost and Dave Olsen, who also developed the tool, Pattern Lab, to assist in applying this process when designing web systems (1). The theory consists of five parts: atoms, molecules, organisms, templates, and, finally, pages. These components are meant to build upon each other, ultimately resulting in a sample page of what a user will see.
Atomic design is another way of thinking about design systems and, as Frost mentions, it “gives us the ability to traverse from abstract to concrete.” (2) It is a lesson in inductive reasoning, where one must think in terms of the structural components before moving to the more complex systems and solutions. The collection of these elements can then be captured in a common language that a team shares, similar to a style guide. Thinking in terms of individual components, as Anna Debenham points out, (3) especially helps front-end developers as it brings flexibility as well as simplicity to the process.