Sketch Tutorial

Creating with a Design System in Sketch: Part Five [Tutorial]

Building and Working with a Design System in Sketch

Marc Andrew

Published in

Design + Sketch

8 min readApr 16, 2018

🎁 Want to dramatically improve your Workflow with my Premium Design System for Sketch? You can pick up a copy of Cabana right here.

Use the offer code MEDIUM25 to receive 25% OFF.

In this fully-featured Tutorial Series I’ll be not only showing you how to create your own Design System but how to put all these elements into practice as we build out the design for an Medium styled iOS App called ‘format’.

With this Tutorial Series I’ll not only be showing you how to create a project with a Design System at the ready, but also how I constructed by own System and my thought process, and best practices behind it.

Series Navigation -

Symbols (Part 3 of 3)

Buttons

With the Button Symbols that we’ll be using when we come to start designing our lil’ iOS App (check out Part One for a quick recap), we’ll be focusing on just 2 variants; Default Button and Button with Icon.

We’ll also be putting the Resizing Constraints feature of Sketch to good use too. Sound good?

Let me show you how I created the Buttons for the format Sketch file and also for my own Design System: Cabana.

Default Button (Large)

For the Default Button (Large) I simply dropped in the 4px Shape/Fill Symbol that I’d created previously, resized it to 137x47, and then renamed the Text Layer to Button.

If you take a look at the screenshot above you will notice that we have a couple of Overrides in place already; State & Color. So the Button Symbol, minus the Text of course (which we’ll add in a moment), is primed and ready for various States and Color changes as required moving forward. How very handy indeed!

For the Text, I dropped in one the Text Symbols I’d also created previously…

Text/Button/Large/Center/White

Renamed the Layer to simply read Text, selected both Layers, and then using the Alignment options, aligned them Horizontally and Vertically together. Which also, and due to the fact that I’d set a specific measurement for the Shape Layer previously, aligned the Text perfectly using the 8pt Grid System (8pt top and bottom, 32pt left and right). Perfect!

I then selected both Layers and converted to a Symbol with the following label…

Button/Large/Default

Finally I removed the original from the Symbols page, and then, focusing on the newly created Symbol, I adjusted the Resizing Constraints in the Inspector, Pinning the Text to the Left and Right edges, and Fixing the Height.

With those Resizing Constraints in place I could now easily adjust the Height and Width of my Button at any time and the Text would always stay Centered, even when adding more Content to my Text Override. Bingo!

Button with Icon (Large)

For the Button with Icon (Large) I once more dropped in the 4px Shape/Fill Symbol that I’d created, resized it to 180x47 (again setting it up for the correct measurements using the 8pt Grid System), and renamed the Text Layer to Button.

Then for the Text, I dropped in the other Text Symbol that I’d created previously…

Text/Button/Large/Left/White

Renamed the Layer to simply read Text, and then using the Measurement Guides (holding ALT), positioned the Text Symbol so it was 8pt from the Top & Bottom, and 16pt from the Left edge of the Shape/Fill Symbol.

For the Icon, I dropped in one of the Icon Symbols that I’d created earlier.

Resized it to 32x32, changed the Color Override to White, and then positioned it 8pts from the Top, Bottom and Right edges of the Shape/Fill Symbol.

With all 3 Layers selected, I then converted to a Symbol with the following label…

Button/Large/Right Icon

I then removed the original from the Symbols page, and focusing now on the newly created Symbol, I adjusted the Resizing Constraints in the Inspector, Pinning the Text to the Left and Right edges, and Fixing the Height.

And for the Icon I Pinned it to the Right edge, and Fixed the Width & Height.

I now had a Symbol, like the Default Button before it, where I could easily adjust the Text, Width, etc… and have it conform correctly to those various changes and adjustments…

Avatar

Ok. The Avatar Symbol. Super simple this one. Give me 30 seconds and we’ll be done. Yes, really that simple!

I created an Oval (O) 32x32 and then changed its Fill to a Pattern Fill.

Selected the Layer and then converted to a Symbol with the label…

Avatar/Tiny

Yup. That’s really all there was to it.

For my own Design System; Cabana, I created 3 more sizes (Small, Medium and Large), to accommodate creating artwork for various screen sizes.

Pagination

For the Pagination Symbols that I used inside of format (the design that we will be creating together in the next few Parts), they consist of only a few elements, but as you’ll be able to discover in the following section they can prove quite versatile when Overrides are brought into the mix.

Let me show you right about now…

Firstly I created 2 8x8 Ovals, both using the Layer Styles that I showed you how to create in Part One (one using the Primary Color, and the other using the Light Grey).

I then created 2 separate Symbols for these with the following labels…

Pagination Dot/Small/Active (using the Primary Layer Style)
Pagination Dot/Small/Inactive (using the Light Grey Layer Style)

And with these freshly created Symbols, I then Fixed the Width and Height of the Shape Layers so they would not distort on Resize.

With these simple Pagination Dot Symbols now at the ready, I then dropped 4 of them onto the Symbols page, and using a combination of the Alignment options and Measurement Guides (ALT) spaced them 8pts apart.

With all 4 Layers selected I then converted to a Symbol with the following label…

Pagination/Dots/Small/4 Dots

And finally, so they would always align correctly on resize, I grouped all 4 Dots together and labelled this new group Center Align…

…then using the Resizing Constraints, Fixed the Width & Height to avoid any distortion…

Now I could simply adjust the Overrides on this one Symbol to show the various states of the Dot Navigation…

Simple, but powerful in equal measures!

Various (Cursor & Scrollbar)

And finally the last couple of Symbols that we’ll be needing for the next few Parts of this Tutorial Series…

Cursor
Scrollbar

Um. Yeah. It doesn’t get more glamorous than that!

We just need these 2 simple Symbols and then it’s a wrap for this Part.

Cursor

For this Symbol I simply dropped in the Color/Black Symbol I’d created before, resized it to 1x24, and then created a new Symbol with the label…

Various/Cursor

With this freshly created Symbol, I then Fixed the Width & Height on the Shape Layer. All done!

Scrollbar

To create the Scrollbar Symbol I simply inserted a Rectangle (R) onto the Symbols page 4x48, gave it the Light Grey Shared Style that I’d created previously, and changed the Border Radius to 2.