Atomic design components in UI design

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.

What is atomic design?

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.

Benefits of atomic design

Designers and developers love atomic design for good reason. It’s a philosophy that improves collaboration between the two. Let’s go over why:

Promotes reusability and consistency

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

Facilitates collaboration

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.

Streamlines prototyping

You can create mockups and prototypes faster by assembling existing components. Less time spent reinventing the wheel.

Simplifies testing

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.

Creates cohesion across platforms

Teams can adapt design systems defined in atomic design for use across different platforms like web, mobile, and so on, leading to product cohesion.

Allows for scalability

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.

Elements of atomic design

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:

Atom

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.

Molecule

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.

Organism

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:

Template

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.

Page

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.

Atomic design in action with an example

Let’s take a fictional ecommerce company “GoodDesign” to illustrate how atomic designs could be used at various stages:

Step 1: Atoms

Color palette and typography

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 and icons

Buttons, icons, spacing, and composition are defined earlier in this stage to ensure a consistent, distinct, and recognizable user interface:

Step 2: Molecules

Product card

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:

Navbar

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:

Step 3: Organism

Product listing

Product listings are examples of organisms that contain molecules like product cards, filters, and navigation bars. This provides a comprehensive design framework for users:

Step 4: Template

Product listing template

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:

Step 5: Page

Product listings page

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.

Conclusion

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!