Sketch Tutorial
Creating with a Design System in Sketch: Part Three [Tutorial]
Building and Working with a Design System in Sketch
🎁 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 App called format.
That’s what I want to do with this Tutorial Series. Show you not only how to create the elements that build up a Design System, but also showing you how to design a multi-screen iOS application using the System that this tutorial series has showed you how to build.
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 1 of 3)
Color Fills
Like I’ve mentioned in Parts 1 & 2, I’ll only be touching on a handful of Symbol elements in this Tutorial Series, basically the elements that will help shape our format (starter) Sketch file that we’ll be using in the latter parts of this Series to design our Medium Stylee iOS App.
Ok. So when I created my own Design System (Cabana) I took it from the top, when it came to my Symbols library. And that element that sat right there at the top was Colors.
The Color Symbols are the real bare-bones and will play a role in over 90% of the other Symbols that you create and their subsequent Overrides, so it’s always wise to create those first before everything else.
Let me show you how I created the Color/Black Symbol for the format (starter) Sketch file and the similar process I used when creating my Cabana Design System…
Well firstly, I created a Symbols page myself. Yes, I know Sketch can create this page for you auto-magically, but doing it this way just allows you a little more control when building out a Design System.
I then drew out a Rectangle (100x100) and applied the Fill/Black Shared Style that I’d created previously…
…then renamed that layer to Base.
Then with the Base layer selected, I simply created a new Symbol, and named it Color/Black.
I then removed the original from the Symbols page so I was left with just the new Symbol I’d created; Color/Black.
It was then just a simple process of duplicating that first color Symbol, selecting the Base Layer, choosing from the other Fill Shared Styles that I showed you how to create in Part One (Grey, Light Grey, Primary etc…), and then renaming the Symbol in the Layer List (ie; Color/Primary) to create a brand new Symbol. All without the mundane task of selecting Create Symbol from the Toolbar every single time.
Button States
Well for this Tutorial Series it’s just the one state that we’ll be needing for the iOS App that I’ll be showing you how to design in the later parts, but what I show you here can easily be applied to the various button states that you’d want to create when building out a full Design System.
If you want a more in-depth look into my process you can check out this article I wrote here.
Ok. Let me show you how I created the Normal Button State for the format (starter) Sketch file.
I simply drew out a Rectangle (R) 190x50px (once more, just personal preference on those dimensions), and gave it a Fill Color of White with 0% Opacity.
With the layer selected, I created a new Layer Style and labelled it Button State/Normal.
I then renamed the Layer to Base, and converted it to a Symbol with the label State/Button/Normal. I then removed the original from the Symbols page so I was left with just the new Symbol that I’d just created.
Like I mentioned we will only be using the 1 Button State for this Tutorial Series, but if you were building out a more substantial System you’d be wanting to create Symbols for Hover and Disabled States also.
Shape Fills
With the Shape Fills, the majority of the time you will be using these Symbols for Buttons within your design projects (in our case ‘format’), anything else and you’d simply opt for using a Color Fill Symbol (ie; Fill/Primary).
Using Shape Fills allows you to easily create Button fills with varying border radiuses, and here I’ll be showing you how to create 0px and 4px Border Radius variants that will be used in the format Sketch file.
Starting with the Shape/Fill/Radius — 0px variant, I created a Rectangle (R) 120x40px, and renamed the Layer to Base.
I then dropped in both the Color Fill Symbol (I opted for the Primary Color) and the State Symbol that I’d created previously.
The State/Button/Normal Symbol will of course be invisible as it was set to 0% Opacity, but you’ll still be able to grab the resizing handles and adjust it in the next step.
I resized both of the elements to the same as the Base Layer, and then aligned them over the top.
Finally, I then created a Mask on the Base Layer, shortened the layer names (ie; State & Color) of the newly added layers, and then, with all the Layers selected, converted to a Symbol with the label Shape/Fill/Radius — 0px.
I then followed the same procedure for a Button Shape (Fill) with a 4px Radius, adjusting the shape (Base) layer’s Radius accordingly.
Ok. That wraps up Part Three of this Tutorial Series. Please join me back here for Part Four, where I’ll be touching upon more of the Symbols used in the Design System.
Jump across to Part Four right here…
🎁 Want to improve your Workflow with a fully-featured Design System for Sketch? You can pick up a copy of Cabana right here.
Use the offer code MEDIUM25 to receive 25% OFF.
Thanks for reading the article,
Marc
Designer, Author, Father and Lover of the Productive Morning Playlist on Spotify
