Tools and Tutorials7 minute read

Atomic Design and Sketch: A Guide to Improving Workflow

Improving workflow and maintaining consistent design standards throughout a product can be achieved using Sketch and Atomic Design.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Improving workflow and maintaining consistent design standards throughout a product can be achieved using Sketch and Atomic Design.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Octavio Cruz García
Verified Expert in Design

Octavio has been involved in projects designing user interfaces from concept to launch for the past six years.

Read More

Expertise

PREVIOUSLY AT

The KPI Institute
Share

Sketch and Atomic Design are a powerful set of tools and methodologies designers can use to create design systems that allow for standardization and a more efficient workflow.

Design Systems: A Primer

A design system is a set of reusable components and guidelines that help teams unite around a common language during the creation and life of a product.

In most cases, design systems are composed of a style guide and a component library. They can also include elements such as voice and tone as well as brand values. The point of having a design system is to create a set of standards that act as a single source of truth for a product or a brand.

Material Design is a structured UI design system

Google’s Material Design is an example of a structured UI design system. Material Design was introduced back in 2014 as a way to design and develop cohesive Android apps.

Another Atomic Design example is Mailchimp’s Voice and Tone. It describes how one’s voice is always the same but the tone changes depending on the context. Being aware of this helps empower the content and give personality to the brand.

While there are many different methods that can be used to create a design system, it’s a good idea to pick a framework that allows the team to unify around a common language and set of standards. Atomic Design is a great example of a framework that achieves these two goals.

Atomic Design: Building Design Systems

The Atomic Design methodology was introduced by Brad Frost in 2013. It is based on the idea that every design system can be defined as a series of building blocks that coexist.

Here is a quick overview of the components of an Atomic Design system:

  • Atoms. Represent the basic building blocks of a design system. An example is a button or a text style.
  • Molecules. A group of atoms working together as a unit. Molecules are tangible UI elements. For example, a button and text field can be grouped to create a search form.
  • Organisms. Atoms and molecules working together in a complex structure. A search field grouped with a navigation bar forms a header organism on a website.
  • Templates. Page-level objects placing components into a layout that defines the content structure. For example, taking a header organism and placing it on a homepage template.
  • Pages. Instances of templates that represent the final product.

The atomic design system is a framework for a complete design system

“We’re tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That’s a daunting task indeed. Thankfully, design systems are here to help.”—Brad Frost as an introduction to Atomic Design and design systems.

Using Atomic Design to create and maintain a design system will help designers work more efficiently and communicate better within their teams. There are a plethora of tools and methods for creating and maintaining design systems, but often the best tools are the ones we are most familiar with.

How to Use Atomic Design with Sketch

To develop Atomic Design systems, a great (and already familiar) tool is Sketch. It provides a canvas for us to create atoms, molecules, and organisms: the elements needed to define the core of a design system.

Creating Atoms

We begin by creating three types of atoms in Sketch: symbols, layer styles, and text styles.

Symbols. Symbols are nothing more than reusable components. They are defined once because they can be instantiated throughout a product. For example, an arrow symbol (atom) can be defined with properties like border color, size, etc. We can then reuse this symbol without having to re-create it each time.

Layer Styles. Layer styles are the reusable visual styling elements that stay consistent across every layer. For example, the fill color of the arrow previously defined.

Text Styles. Text styles, similar to layer styles, are reusable elements that ensure consistency across similar text objects. For example, defining the font size and color of an h1 element. It works in a similar way to text styles in Google Docs or Microsoft Word.

When we define symbols, layer styles, and text styles, Sketch can divide them into hierarchical categories in its symbols and text styles menus with the use of a “/” (forward slash). Following naming conventions and having a well-defined set of master categories will give files an organized structure, reducing confusion and inconsistencies.

The insert panel menu in Sketch for Atomic Design instantiation

Here are some ways to create hierarchical categories for symbols, text, and layer styles in Sketch.

We can represent symbols using the following suggested naming convention under Atoms/:

  • Assets
  • Buttons
  • Input Controls
  • Images
  • Navigation
  • Information

Atomic design methodology: Symbol atoms are easily defined in Sketch

We won’t convert layer styles into symbols so identifying them by their semantic group is sufficient. Again, using the Atoms/:

  • Fills
  • Borders
  • Shadows
  • Gradients

Atomic design components: Layer style atoms defined in Sketch

Similar to layer styles, here’s how we can create text styles under Atoms/:

  • Headings
  • Body
  • Caption
  • Labels
  • Links

Atomic design patterns: Text style atoms defined in Sketch

A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.—Airbnb on Building a Visual Language.

Creating Molecules

Atoms define the basic part of a product’s design guidelines, but by themselves aren’t entirely useful. In order to derive some functionality, we join atoms together and create molecules.

Joining a label (atom) with an input button (atom) to create a search function is a good example of a commonly used molecule element.

An Atomic Design molecule element defined in Sketch

A word of caution as there can be a bit of gray area here. A button, at a code level, is considered an atom, but a button at a design level is considered a molecule since we are grouping a layer style and a text style atom. To avoid any confusion it’s a good idea to think only about the code level elements.

The main categories that fall under Molecules/ are:

  • Information
  • Navigation
  • Input Controls

Since molecules will start shaping our products in an interactive way, it’s a good idea to further define the above categories. In this case, we will define a set of subcategories which represents a pattern library:

  • Dropdown Lists
  • Toggles
  • Sliders
  • Tabs
  • Pagination
  • Progress Indicators
  • Date Fields
  • Text Fields
  • Checkboxes
  • Radio Buttons
  • Modules

Defining Atomic Design molecules in Sketch

Creating Organisms

Organisms are groups of atoms and molecules. They can also be a part of other organisms.

Unlike atoms and molecules, organisms do not have an abstract inclusion in the products we are designing; they are concrete, reusable components that can be easily identified with specific actions. Their structure is more complex than an atom or molecule.

If the previously defined search field is grouped with other components, like a navigation bar (molecule), and a logo (atom), an organism is created. An example is a navigation bar or a calendar.

Organisms, like molecules, can fit into the same categories and subcategories:

Here are the main categories we will create for Organisms/:

  • Information
  • Navigation
  • Input Controls

Atomic design methodology: Atomic Design organisms defined in Sketch

As with molecules, we will also create sub-categories for the organisms:

  • Dropdown Lists
  • Toggles
  • Sliders
  • Tabs
  • Pagination
  • Progress Indicators
  • Date Fields

Up to this point, most of the UI has already been designed, so now it’s as simple as calling up the instances of our components when they are needed for the design.

It’s easy to locate each of these components by their semantic groups, either by searching for them directly using the insert panel in the Sketch toolbar, where we’ll find a well-organized set of 3 main categories, or, by using a plugin like Runner for Sketch.

Atomic Design components in Sketch that follow atomic design principles

Runner for Sketch optimizes a designer’s workflow by providing a set of keyboard commands they can use instead of finding things in endless menus. For example, they can type the word insert, hit the tab key and look for the components they need.

By typing atoms, a drop-down list will show us all of the elements that fall under that category. If these design system atoms and molecules have shared categories, only atoms will be seen and all molecules will be ignored.

Runner for Sketch is a plugin to search for design components

Wrapping it up

Sketch and Atomic Design are a powerful set of tools that can be used together to improve design workflows and facilitate an effective design system framework.

Using the concept of atoms, molecules, and organisms as a component foundation, Atomic Design helps designers unify around a common language during the creation and life of a product.

Designers can use tools such as Sketch to implement Atomic Design providing for a more efficient workflow and a set of standards that are embraced by everyone on the design team including developers during the final stages of the project.

Understanding the basics

  • What is a pattern library?

    Pattern libraries are a collection of user interface design patterns. They provide a common language for people who create user interfaces. Pattern libraries do not specify requirements, they present recommended solutions to design problems.

  • What is a UI pattern?

    User interface patterns are descriptions of best practices within user interface design. They provide reusable solutions to commonly occurring problems. User interface patterns consist of the following elements: problem, context of use, principle, solution, why, examples, and implementation.

  • What are UI components?

    User interface components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others. They encapsulate a unit of user interface interaction and are used in popular frameworks such as React, Magento, and Oracle.

  • What is Atomic Design?

    Atomic Design is a design system methodology created by Brad Frost in 2013. When implemented, it helps accelerate the process of creating modular designs. Atomic Design helps designers create and maintain digital design systems, allowing teams to produce higher quality, more consistent user interfaces.

Hire a Toptal expert on this topic.
Hire Now
Octavio Cruz García

Octavio Cruz García

Verified Expert in Design

Madrid, Spain

Member since August 30, 2016

About the author

Octavio has been involved in projects designing user interfaces from concept to launch for the past six years.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

PREVIOUSLY AT

The KPI Institute

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.