Skip to content
mikenavales.xyz

Overview

What is Atomic Design?

Section titled “What is Atomic Design?”

Atomic Design is a methodology for creating design systems with five distinct levels of components, from basic building blocks to complete pages.

Created by Brad Frost, Atomic Design draws inspiration from chemistry, breaking interfaces into fundamental building blocks and combining them to form increasingly complex structures.

The Five Levels

Section titled “The Five Levels”

1. Atoms

Section titled “1. Atoms”

The basic building blocks of matter applied to web interfaces - HTML tags like labels, inputs, buttons, and other elements that can’t be broken down further.

Examples:

  • Buttons
  • Input fields
  • Labels
  • Icons
  • Typography elements

2. Molecules

Section titled “2. Molecules”

Simple groups of atoms functioning together as a unit. Molecules take on their own properties and serve as the backbone of design systems.

Examples:

  • Search form (input + button)
  • Card header (title + icon)
  • Form field (label + input + error message)
  • Navigation item (icon + text)

3. Organisms

Section titled “3. Organisms”

Complex UI components composed of groups of molecules and/or atoms and/or other organisms. Organisms form distinct sections of an interface.

Examples:

  • Header (logo + navigation + search)
  • Product card (image + title + price + button)
  • Comment section (multiple comment molecules)
  • Footer (navigation + social links + newsletter)

4. Templates

Section titled “4. Templates”

Page-level objects that place components into a layout and articulate the design’s underlying content structure.

Examples:

  • Blog post layout
  • Product listing page structure
  • Dashboard layout
  • Authentication page template

5. Pages

Section titled “5. Pages”

Specific instances of templates showing what a UI looks like with real representative content.

Examples:

  • Home page with actual content
  • Product detail page with real product
  • User profile with real user data
  • Blog post with actual article

Benefits

Section titled “Benefits”

✅ Consistency - Reusable components ensure consistent design ✅ Scalability - Easy to build complex interfaces from simple parts ✅ Maintainability - Changes to atoms propagate throughout system ✅ Communication - Shared vocabulary between designers and developers ✅ Efficiency - Faster development with reusable components ✅ Testability - Test small components in isolation ✅ Documentation - Clear hierarchy makes documentation easier

Key Principles

Section titled “Key Principles”

Composition Over Inheritance

Section titled “Composition Over Inheritance”

Build complex components by combining simpler ones rather than creating variations through inheritance.

Single Responsibility

Section titled “Single Responsibility”

Each component should do one thing well. If a component does too much, break it down.

Reusability

Section titled “Reusability”

Design components to be reusable across different contexts and use cases.

Flexibility

Section titled “Flexibility”

Components should accept props/configuration to adapt to different scenarios.

Isolation

Section titled “Isolation”

Each component should be self-contained and not depend on its context.

When to Use Atomic Design

Section titled “When to Use Atomic Design”

Good For:

  • Large-scale applications
  • Design systems
  • Component libraries
  • Multi-product organizations
  • Teams with designers and developers

Consider Alternatives For:

  • Small projects
  • Rapid prototypes
  • Single-page marketing sites
  • Tight deadlines with small teams

Getting Started

Section titled “Getting Started”
  1. Start Small - Begin with atoms, then molecules
  2. Document Everything - Create a component library/storybook
  3. Stay Consistent - Follow naming conventions and patterns
  4. Iterate - Refine your components based on usage
  5. Review Regularly - Periodically audit for unused or redundant components

Tools and Resources

Section titled “Tools and Resources”

Component Libraries

Section titled “Component Libraries”
  • Storybook - Component development and documentation
  • React Styleguidist - React component documentation
  • Pattern Lab - Original tool by Brad Frost

Design Tools

Section titled “Design Tools”
  • Figma - Component-based design
  • Sketch - Symbol-based design
  • Adobe XD - Component states and variants

Implementation Frameworks

Section titled “Implementation Frameworks”
  • React - Component-based UI library
  • Vue - Progressive framework with components
  • Svelte - Compiled component framework
  • Web Components - Native browser components

Resources

Section titled “Resources”