If you’ve been in the design world for a minute, you’ve probably heard many experts point to atomic design as a methodology for effective design systems. It’s a process that bridges a gap between developers and designers.
If you haven’t already incorporated some form of atomic design at your company, this is your introduction to it and hopefully your inspiration to start thinking of reusable components.
Atomic design is a methodology developed by Brad Frost for creating design systems. In short, it works by breaking down interfaces into small and reusable components. Atomic design provides a structured way of building up complex UIs from basic building blocks in five distinct levels (we’ll cover those in depth later).
The name atomic design is inspired by basic concepts in chemistry, specifically the makeup of all matter. Brad Frost’s book Atomic Design acts as a methodical framework, carefully forming design systems to guarantee their robustness and consistency. The nomenclature itself is derived from the fundamentals of chemistry, particularly the complex structure present in all matter.
Designers and developers love atomic design for good reason. It’s a philosophy that improves collaboration between the two. Let’s go over why:
Atomic design breaks interfaces into reusable components that you can combine to create more complex components. By reusing these components, we can ensure consistency in style, color, and layout across all parts of the interface
With atomic design, components have clearly defined purposes and limitations. This makes it easier for designers or developers to divide and work on different areas at the same time. Teams can collaborate seamlessly. As teams combine components into more complex UI, the divisions set by atomic design prevent conflicts.
You can create mockups and prototypes faster by assembling existing components. Less time spent reinventing the wheel.
You can test atomic components in isolation without having to look for outside dependencies. This makes testing easier to conduct and issues quicker to pinpoint. Bugs can be fixed at the component level rather than having to debug the entire interface design.
Teams can adapt design systems defined in atomic design for use across different platforms like web, mobile, and so on, leading to product cohesion.
Atomic components are reusable building blocks that are independent. New components can be added without affecting existing ones. This enables interface design systems to scale without disturbing other components.
Atomic design comprises five steps that work together to form a cohesive interface design system. It is made up of atoms, molecules, organisms, templates, and pages:
Atoms in the atomic design system are the smallest and the most fundamental element that can’t be further broken down without losing functionality. Some examples of atoms are buttons, text fields, labels, icons, and images to name a few:
These simple HTML elements only have a singular purpose: to provide a foundation to build interesting and complex components.
Atoms set the ground rules in a design system. They define all the basic styles like color, font, and size across the system. Atoms that are consistently styled lead to consistency in more composite components:
In the above example, you can see atoms in action as individual UI elements. They support the foundation of the interface. Developers can easily build a library of reusable atoms that act as a foundation of the frontend system. Teams reuse atoms frequently all over when building up higher-order organisms and templates.
Molecules are simply the group of atoms coming together to function independently as a unit. For example, a signup form molecule combines two input fields, button and labeling atoms:
These simple molecular components represent recognizable pieces of an interface. They add an extra layer of functionality compared to individual atoms:
Molecules demonstrate how atoms can interact and combine into usable microcomponents. These molecular components start having defined properties like size, shape, positioning, etc.
Another great example to demonstrate a molecule would be a card element. The card that is shown in the snapshot above consists of multiple atoms such as an image, text block, icons, and a CTA button. The atoms on the card exist independently and contribute to the molecule’s overall functionality.
Organisms are relatively complex UI components that are made up of multiple molecules. Molecules and organisms share many similarities, but one major difference is that molecules represent a smaller piece whereas organisms form more elaborate sections of an interface. Some examples of organisms are signup forms, media boxes, and product lists, to name a few:
Organisms are tricky to identify as in some cases they are made up of the same molecule used repeatedly multiple times and in some cases it is made up of different molecules to form an organism. In this example, you can see the same molecule used multiple times in a large section of an interface:
Templates in atomic design help define the standard page layout across multiple pages that function similarly. In other words, templates include all the design element arrangements needed for a site’s pages. Signup templates, hero section templates, article templates, and search results templates are a few examples of templates:
Templates handle layouts for organisms like headers, sidebars, footers, and more. Additonally, they also define things like spacing, grids, and styles that unify page designs:
In the above example, you can see a standardized template made up of atoms, molecules, and organisms organized to form a template.
Pages, to put it in simple terms, are instances of templates that are in high fidelity. Some examples of pages are homepages, product pages, login pages, and blog article pages:
Pages utilize templates for layout structure along with style components like atoms, molecules, and organisms:
The above example shows a list of stocks of two different users on the RobinHood app. Based on user selection, the atoms and molecules take on different states. Defining a page is as equally important as atoms and molecules when building a design system.
Let’s take a fictional ecommerce company “GoodDesign” to illustrate how atomic designs could be used at various stages:
GoodDesign carefully selects a color palette and typography to represent its brand across various touchpoints. Each color and typeface is foundational in establishing a visual identity that represents its brand:
Buttons, icons, spacing, and composition are defined earlier in this stage to ensure a consistent, distinct, and recognizable user interface:
By combining atoms like buttons, text blocks, and product images, GoodDesign crafts beautiful product cards. This card serves as a cohesive unit, providing all the necessary details about the product:
By combining atoms like buttons, icons, and images, we get the navigation bar molecule. This element provides users with an intuitive means of navigating the website:
Product listings are examples of organisms that contain molecules like product cards, filters, and navigation bars. This provides a comprehensive design framework for users:
Templates bring together multiple organisms, molecules, and atoms. The product listing page template, for example, includes filters, a navigation bar, a header, and product cards. This standard design ensures a consistent layout throughout the ecommerce website:
Pages are templates with real data. The product listing page, for instance, pulls in a product listing template populated with atoms, molecules, and organisms in an orderly fashion:
There you have it. Now you have reusable design components to plug into your system.
Any product moves atom by atom, gradually building up to molecules, organisms, templates, and pages that work cohesively. Atomic design helps evolve complex design systems, also maximizing reusability and scalability.
Now you can organize your design systems more efficiently. Your whole team will thank you!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Linear design is a popular design trend, particularly for SaaS products, but has it peaked already? Let’s find out.
Penpot is an open source design and prototyping tool that aims to bridge the gap between designers and developers in the product workflow.
OpenAI has introduced GPTs, a way for anyone to customize ChatGPT without having to code. Here are 34 you can use in your design workflow.
Dialogs, bottom sheets, and toast notifications all provide user feedback. These seemingly simple elements play crucial roles in UI design.