Using Sketch Libraries to build a better UI design system — Part 3

Rapid prototyping complex patterns using particle properties and low-level ‘Atom’ components

Published in

Design + Sketch

11 min readMay 17, 2019

Composing complex UI patterns with speed and consistency is a simple process when using a predefined design system of ‘particle’ properties and low-level components. By using these complex patterns –together with the properties and components they comprise — we can rapid prototype even more complex structure and page layouts, with similar efficiency.

This is part 3 in a series on using Sketch Libraries to build better design systems. In this final part I demonstrate how to compose complex UI patterns and get the most out of a UI design system built using Sketch Libraries.

Before we dive in, here’s a quick recap on how design systems can aid our design process and where we’re currently at with design systems in Sketch.

Design systems for a better design process

On a basic level, a UI Design systems defines a collection of reusable properties, which together form the foundations with which everything else is built. A design system is akin to a collection of variables or ‘tokens’, which store visual design attributes. These attributes form a theme which we can use build UI patterns of varying complexity. By working with a pre-defined theme of attributes our intention is to reduce decision making, aid reusability and collaboration, and help provide consistency between components and products they compose.

A good UI design system will consist of the bare essentials, nothing more. To quote Dan Eden:

“A system only needs to provide the parts that the product requires.”

By reducing the number of properties to only those required, we create a clear and concise system of assets that among other things help to:

Maintain consistency between components
Create a cohesive experience throughout a project
Reduce cognitive load (the need to think)
Speed up a design workflow
Improve portability of shared properties

In Sketch, Symbols and Layer Styles help us make this system of reusable properties and Libraries help us to improve the organisation and portability of our system. By using Libraries we can split properties and components between multiple files, reduce file size and make our system transferable between different documents and projects.

Where we’re at with design systems in Sketch

Here’s a quick summary of the preceding parts in this series, to get you up to speed with what we have been working on so far.

In Part 1 we built Sketch Libraries to store ‘particle’ properties. These are the most granular level assets in our system and the building blocks which make up all other components. Think colors, shapes, icons, text, borders etc.

Each particle property type is stored in its own Sketch Library

By using an independent Sketch Library for each property type, we made each property highly reusable and shareable between documents and projects. This is helpful when working on several projects which share the same system.

In Part 2 we used the property Libraries built in Part 1 to compose low-level components. You might refer to this type of component as an Element as per Subatomic Design or an Atom for those more familiar with Atomic Design.

These components are the first identifiable UI structures in a system and the least complex. They are composed entirely from particle properties.

We can use the techniques from this part to build any Element in our system —think buttons, avatars, badges, alerts— and just as we did with properties, store these elements in their own Library files. These granular properties and low-level building blocks form the ingredients we need to build even more complex components.

Part 3 (this part), is where we put this into practice and use the system we’ve built so far to compose these complex UI structures. Subatomic Design refers to components of this complexity as Patterns — complex compositions made up of both elements and particles. If you’re more familiar with Atomic Design principles you may understand these as Molecules — groups of Atoms bonded together. Or perhaps even Organisms — groups of molecules joined together to form a relatively complex, distinct section of an interface— depending ultimately on their construct and level of complexity.

Why is this stuff important?

Crafting a system of properties and low-level components (as in Part 1 and Part 2) provides the building blocks we need to rapid prototype complex components and page layouts with minimal effort and zero design debt.

Think of your design system as a box of Lego; you have everything you need to make something, you just need to decide what to create. You can arrange your Lego blocks in any combination to build whatever you want, but importantly, the blocks will always look and feel like Lego. And that’s the magic of it.

These building blocks help to keep our design consistent and create that cohesive experience we’re after. By using pre-defined Lego blocks we keep the number of unique properties per component to a minimum and so reduce the complexity of each component.

Ultimately, our system allows us to build complex structures fast, without worrying about inconsistency. As we handled all this stuff when we originally built our toolkit of Lego blocks.

By adding Sketch Libraries to the mix, we can take these blocks and use them wherever we want, linking them to any project. As Adam Morse puts it:

“I want lego blocks that work everywhere because there is serious power in leveraging solutions that are project agnostic.” — Adam Morse

Ok, now we understand the theory, let’s get to the practical stuff and compose one of these complex UI structure, to test our UI Design System and see what we can create.

Rapid prototyping a complex component with particle properties and Atoms

To put this into practice I will demonstrate building the familiar Card pattern. In this case, the Card pattern represents a good example of a complex component. It’s comprised of various Particle properties and a handful of Atom level components, which are themselves comprised of an array of Particle properties.

Card comprised of properties and low-level components

Building the card from scratch with our design system will demonstrate how we can quickly prototype complex compositions whilst avoiding unintentional inconsistency.

So how do we approach building this card?

Step 1: Identify particle properties needed to build the base

We can start by identifying the particles properties that make up component. Remember, these are the most granular levels of abstraction in our design system. Providing we’ve built a good system (which of course we have) these properties will already exist as ‘particles’, stored as symbols in Library files. They are intended to be used for this exact purpose.

Particle properties comprising the card component. Each property belongs to it’s own Library file.

I’ve identified 6 properties that comprise the entire Card.

Shape
Shadow
Border
Color
Text
Icon

Of these 6 particles, Shape, Shadow, Color and Text are all required to build the basic structure of the card. However, some of these properties, Border and Icon for example, can only be found in the Atoms we’ll use to build the card.

Now we have identified the properties which comprise the card, we can place them on an Artboard in a new Sketch file and begin building the component.

Side note: You may also consider space and size as properties comprising your component. But without a way to abstract these properties into Sketch Libraries, we’re forced to deal with these attributes on a ‘per-component’ basis.

Step 2: Add particle properties

With our Sketch Libraries enabled in Sketch Preferences, we can place the required particle property on an Artboard in any project or document.

Shapes make up the basic structure of the component. These are properties that are specific to the card component. We can start by adding a shape for the card background, in this case using an elevation instance from a particle properties Library I have set up called Shadows.

Next we can start placing symbols from the Shapes Library using Sketch Runner, an essential plugin for speeding up the process of placing symbols.

Using Sketch Runner to place card hero shape

With Runner installed, use cmd + ' to open Runner and tab to insert. If you have a recent version of Runner you can set up a shortcut to prevent the need to tab. I have Insert set to the shortcut cmd + i. Start typing the property name you’re looking for and place it on the Artboard. You’ll notice I am using a color Overrides to change the theme of the shape I have inserted. These Overrides are available because of the way the shape properties have been constructed. But more on Overrides later.

Using Sketch Runner to place progress bar shapes, then using overrides to change the color.

Place all the shapes which form the basic structure of the card on the Artboard and resize.

Text is the other property that makes up the rest of the basic Card structure. In this case I have text styles saved in another Library called AIN-Typography (AIN is the project name prefix in case you’re wondering).

First, we need to add the text content to the card, then, with text selected, head to Appearance in the Inspector panel and set the required text style from the Typography Library.

Adding text styles from Typography Library

We can do this for all instances of text that make up the basic card structure.

Now we have all the properties placed which are specific to the card component and together make up the basic structure of the component. All that’s left to do now is add the missing Elements to complete the card pattern.

Step 3: Identify Elements / Atoms needed

Begin by identifying the Atoms that make up the card pattern. Just like we did when we identified the particle properties comprising the card.

My card features 3 types of Atoms:

Button
Avatar
Label

Each Atom is available as part of my design system and grouped into a corresponding Library file. We covered this process in Part 2.

Step 4: Add Elements / Atoms using Sketch Runner

Now we know which Atoms are required, we can add them to the component using Sketch Runner. As before, cmd + ' and tab a few times to insert. Start typing the name of the Atom you’re looking for and place it on the Artboard. I’ll start with buttons. For more on buttons, check out my article on building a better system of buttons.

Adding Button Atoms from Buttons Library

Now our buttons are in place, we can do the same for the Avatar and then the labels that feature in the card pattern.

Adding an Avatar from the Avatar Library and Labels from the Labels Library

At this point our Elements/Atoms don’t exactly look the way we want them to. To theme them correctly we can make some overrides to change their appearance to something more appropriate.

Step 5: Use Symbol Overrides to change theme

Overrides allow us to change the theme of the components in the card, think Button color, Avatar image etc. Overrides are built into our component for two reasons, the first is because of the way we named our layers when we initially built the particle Libraries, and the second, is down to the way we structured our Atoms when we built them.

Let’s start by making overrides to the button color, state, icon and icon color.

Next, do the same for the Avatar component by changing the shape and image to make it better reflect a company logo.

And finally the labels. Here we’re overriding the label shape, text color, icon color and background colour. You’ll notice I forgot to update the label text!

Now all that’s left to do is organise layers into descriptive folders and turn the card into a Symbol to make it reusable. I’ve created two versions of the card, one for the default state (with less elevation on the background) and one for the hover state (with more background elevation). We can take it further still by turning the document into a Library, to make the card pattern available from within other Sketch files and from other projects.

Organising layers, and making the card pattern into a Symbol to aid reusability and creating the default state

With our card complete, we can begin to appreciate the power of building components in this way. By using a system of particle properties and Atom level components, we can quickly prototype components of any complexity without compromising on flexibility or consistency. By introducing Sketch Libraries we can make both our properties and components portable and highly reusable.

Wrapping up

By sharing this approach to building complex components, I hope you now have the tools and understanding to build scalable design systems in Sketch.

Utilising a toolkit of reusable assets vastly reduces the amount of time it takes to create consistent work and builds a solid foundation for future projects. Introducing Sketch Libraries to this workflow helps us keep small, lightweight files, reduce the complexity in our work and build project agnostic component libraries.

If this series has helped you approach your work in a more systematic fashion, think smarter about your work and be more efficient as a UI designer then I have archived what I set out to do.

This approach to design systems in Sketch can be attributed mainly to techniques borrowed from front-end development. The work of Brad Frost on Atomic Design and Dan Eden on Subatomic Design deserve particular mention, though there are many other talented folk I’ve borrowed ideas from, a handful of which I’ve listed below.

Thanks for reading!

Resources

Download the example project files used in this article. Then read the README.md file to get set up.

Looking for the first part of this article?
Looking for the second part of this article?

If you found this article helpful, please give it some claps 👏 so others who might benefit from reading it can find it easier!

I’m Harry Cresswell. I co-founded indtl.com and work as a freelance UX and product designer. I’m currently working with Angel Investment Network. I design type on my nights off and send out a newsletter on design and typography.

Find me on Twitter if you want to say hi or have any questions 👋.