7 min read
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.
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 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
Atomic Design, a methodology introduced by Brad Frost in 2013, 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 Atomic Design:
- 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.
“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 a design system using Atomic Design, 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.
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.
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/:
- Input Controls
We won’t convert layer styles into symbols so identifying them by their semantic group is sufficient. Again, using the Atoms/:
Similar to layer styles, here’s how we can create text styles under Atoms/:
“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.
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.
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:
- 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
- Progress Indicators
- Date Fields
- Text Fields
- Radio Buttons
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/:
- Input Controls
As with molecules, we will also create sub-categories for the organisms:
- Dropdown Lists
- 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.
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 atoms and molecules have shared categories, only atoms will be seen and all molecules will be ignored.
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.
Further reading on the Toptal Design Blog:
- How To Build an Effective Design Framework
- Understanding Design Systems and Patterns
- How to Create a Sketch Style Guide, Library, and UI Kit
- Why Startups Need a Styleguide
- Zeplin Sketch Plugin – The Workflow Bridge Between Design and Engineering
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.