Atomic Design

Break down user interface design elements into basic building blocks.

Atomic design is a design system that achieves consistency in both design and development. Using this system allows for quick style updating and code re-use. Designers save elements as technology agnostic so they may be used by any application.

Steps

Define the basic elements

Identify each user interface element at the most elementary level. The elements include basic HTML elements like labels, text fields, or error messages. Focus on one element at a time.

Assign names to all elements

Ensure the names are clearly describing the function of the element.

Preface each atom name with .atom

For example, use .atom_form_label for an input field label and .atom_form_input_text for the input field itself.

Group elements into molecules

Molecules are a set of user interface elements functioning together as a unit. Ensure each group is assigned a descriptive name.

Preface each molecule name with .molecule

For example, use .molecule_form_text_input for a group of input related atomic elements.

Create symbols

Create the elements as nested symbols in Sketch.

Resources

Description	Link
Atomic Design Methodology	Open Atomic Design Methodology