Sketch Tutorial
Creating with a Design System in Sketch: Part Four [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 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 2 of 3)
Button Text
Inside the format Sketch file there are just the 2 Text/Button Symbols that we’ll require for the later parts of this Tutorial Series, and I’ll just be showing you how I put together these elements. If you want a more detailed overview of how I created more of the Text/Button Symbols in my own Design System you can take a good ol’ look at one of my previous articles here.
Ok. Let me quickly show you how I created the 2 Text/Button Symbols inside of the format Sketch file.
On the Symbols page I inserted one of the Text Styles that I’d created in Part One.
H5/Font Family #1/Center/White/- -Bold to be exact.
I then edited the text to simply read Button for easy reference.
Then with the Text Layer selected, I converted to a Symbol and labelled it Text/Button/Large/Center/White
I deleted the original copy, and with the new Symbol that I’d just created, I gave it a Background Color of #000 (for obvious contrast and visibility purposes), and then made sure Include in Instances was unchecked.
Then finally, and to make my Override a little more intuitive at a later date, I simply renamed the Text Layer to Content.
Wondering how I popped those Emojis into my layer names?
You are? Well how rather handy and dandy this next little tip will be!
When editing a Layer Name simply use the shortcut CTRL + CMD + SPACEBAR to bring up the Emoji window and away you go! How much (more) fun is Sketch now? 😉
Here’s a great little article here on Emojis in Sketch if you’re now going Emoji keerraazzzyyyy…
https://www.toptal.com/designers/sketch/using-emojis-to-manage-sketch-files.
Ok. Back to those Button Text Symbols.
For the 2nd and final Symbol, I once more dropped in a previously created Text Style, this time I opted for…
H5/Font Family #1/Left/White/- -Bold
and followed the same procedure as I detailed above, with a Symbol name of…
Text/Button/Large/Left/White
Icons
Now, in my own Design System (Cabana) I created over 150 icons, so I was never caught short when I needed a specific icon for a project I was working on, and had pretty much all (icon) bases covered.
With the format Sketch file, we only require around 20 icons, and I’m going to show you how I put just one of those Icon Symbols together, and how you can then simply replicate the following steps for any more icons that you’d like to add to your own System.
With Cabana that I just mentioned and format, I’ve used the 8pt Grid System and put it to good use with my Icon Symbols.
We’ll focus on the Save Icon Symbol, which we’ll be using as the Logo Mark for our design later on.
Ok. So on my Symbols page I created a Rectangle (R) 24x24 and removed the Fill Color.
This would then act as the Bounding Box for all of my Icons moving forward, so even if there was a slight difference in the actual icon size, they’ll always be contained inside of the 24pt Bounding Box for when it comes to alignment and adhering to the 8pt Grid System in my project(s).
With this Layer selected I then created a new Symbol with the label Icon/Save.
I then removed the original from the Symbols page and focused on my newly created Symbol.
I placed my Color/Primary Symbol over the top of this, resized it to the same 24x24 and renamed the Layer to Color…
Then using the ever-awesome IconJar combined with beautiful Symbolicons Pro icon set, I simply searched for the relevant icon, set the size to around 20 (you will need to adjust the icon size in Sketch from time to time but 20 seems to be the sweet spot), changed the format to SVG…
…and then dragged this onto my newly created Symbol…
Please Note: The icon will be dragged in inside of a folder so take the Shape Layers out of the folder, delete the folder/group, and then rename the Shape Layer (ie; Save).
Once you remove a Shape Layer from inside a folder/group you will possibly see the icon dimensions no longer sat on rounded numbers, so you can simply choose Scale from the Toolbar and adjust it, in my case this was 20x20.
I then dragged the Icon below the Color Fill in the Layer List, removed the Icon’s Fill Color, and turned it into a Mask (right-clicking on the icon and selecting Mask), until I had the following…
Finally, I selected the Bounding Box Layer and using the Resizing Constraints, pinned it to all sides.
Now I had an Icon Symbol with the Fill Color Symbol nested inside of it, perfect for simple color Overrides when required. Ah bliss!
Using the same process I just showed you, I then went ahead and created the other 19 Icon Symbols to use inside of format. I had this done in no time at all (he says with a good measure of sarcasm).
In the next part I’ll be showing you how I created the last of the Symbols that we’ll be calling upon when we jump on in to the design chapters in the later stages of this Tutorial Series.
Jump across to Part Five 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 my newborn son (He’s called Charlie George)
