
Pattern Library Template
In 2016, the design software Sketch released a major update, finally allowing to nested symbols. As I was already a convinced supporter of Brad Frost's UI principle Atomic Design, I seized the opportunity to gain experience with pattern libraries in Sketch. In 2017, I brought my learnings into a template.
Task
Enable designers to create as quickly and consistent as possible.
Target group:
UI designers
Industry:
Creative
Client:
self (non-profit)
Year:
since 2017
Services
User Experience (UX)
- Atomic Design
- Wireframes
- Digital prototyping
- Pattern library
- Lean UX
Description
As a contribution to the design community, I developed Atomic Sketch for the design software Sketch, a template for UI pattern libraries that provide common interface components in an interdependent structure.
The library follows the principles of Atomic Design, Brad Frost's proposal for user interfaces as systems of components. It binds a certain functionality to a uniform aesthetic appearance. Furthermore, it allows simple components with unique functions to be nested to form composite elements for more complex tasks. Atoms, molecules and organisms are used as descriptive metaphors for these relationships.
With the help of the template, designers can not only create a Pattern library for their own products free of charge under the Creative Commons license, but above all quickly and efficiently create their own interface designs with a high level of visual consistency.
Atomic Sketch was one of the first templates to be used for UI pattern libraries and has been downloaded more than 16,000 times since its first release.
Process Artefacts

The article on Medium
Explaining where to download and how to use the template

Canvas with UI components
Structured overview of atomic, molecular and organic UI components

Selection menu for components
Tree-structure with folder for components and their variants and states

Molecule styleguide display
Different molecule components, laid out for styleguide presentation

Overrides of nested components, images, and texts
Versatile component setup to exchange nested contents and labels

Typography menu
Sketch UI with folders for text styles