Sketch Tutorial
Creating with a Design System in Sketch: Part Seven [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 the following (and final) Parts of this Tutorial Series I’ll be showing you how to take the Design System (Lite) that we assembled in the previous parts of this Series, and creating an iOS Medium flavoured App 14 screens of pure design pleasure.
Series Navigation -
Onboarding (Slide One)
Ok. With your format (starter) Sketch file open (and making sure you have the Format page selected), insert a new Artboard (A), and from the Inspector choose Apple Devices, and then select iPhone 8.
From the Layer List, rename (CMD + R) the Artboard to Onboarding (Slide #1).
Draw out a Rectangle (R) to cover the Artboard, rename to Background, and then from the Inspector, choose the Duotone Layer Style that we created in Part One of this Series.
Draw out another Rectangle (R) to cover the Artboard, rename this one to Overlay, and then from the Inspector, choose the Overlay > Black Layer Style that we created previously.
Now go ahead and insert the following Text Style…
H1 > Font Family #1 > Left > White > Bold
…and edit the text to read something like the following…
Then position this new Text Layer 16pt from the Left edge, adjust the Width of the Bounding Box so it’s 16pt from the Right edge, and then position it 80pt from the Top of the Artboard.
Let’s pop in a couple of Dividers to separate our Heading, and the Description that we’ll be adding shortly.
Draw out a Rectangle 343 in Width and 2 in Height, and from the Inspector choose the Fill > White Layer Style.
Duplicate this Shape Layer (CMD + D), position it 4pt below the original, and then choose the Fill > Primary Layer Style.
Quickly group (CMD + G) these 2 Layers, rename (CMD + R) to Dividers, and then position this new group 32pt (remember that ever-awesome 8pt Grid System?) below the Title.
To finish up this section go ahead and insert the following Text Style…
Body > Font Family #2 > Left > White > Regular
…and edit the text to something like the following (or whatever your Micro-Copy brain can rustle up)…
Position this new Text Layer 16pt from the Left edge, adjust the Width of the Bounding Box so it’s 16pt from the Right edge, and then position it 32pt from the Bottom of the Dividers.
And to finish up this Screen, let’s go ahead at adding in the Navigation Dot Symbols we created previously, as well as another one of our Text Styles.
Let’s first add in a Text Layer giving the user of our imaginary App the option to skip the Onboarding process, and place it within comfortable thumb reach. Don’t get me started on those not-easily-reachable-and-highly-frustrating Skip links that some Designers seem to place at the top right of a screen. Why?!?
So go ahead and insert the following Text Style…
Body > Font Family #2 > Center > White > Bold
…and simply edit the text to read Skip.
Then, from the Symbols menu insert the following…
Pagination > Dots > Small > 4 Dots
With this Symbol selected, use the Alignment Options to Align it Horizontally on the Artboard, and then using the Measurement Guides (ALT) position it 32pt from the Bottom of the Artboard also.
Finally, select the Text Layer you just added (Skip), Align this Horizontally also, and then position it 16pt from the Top of the Navigation Dots.
And that’s officially a wrap for this Artboard/Screen.
Onboarding (Slide Two)
With this Screen, and the one after it, we only need to do a little duplication, text editing, and a little tweak of the Overrides for the Navigation Dots.
We’ll have things wrapped up for this Part of the Tutorial Series in next to no time!
Please Note: You’ll need a few images for the next couple of parts of this Tutorial, so go ahead and grab them from here.
Now go ahead and Duplicate the Onboarding (Slide #1) Artboard, and then simply rename to Onboarding (Slide #2).
And then with the Background Layer selected, change the Image Fill to one of the images supplied in the link above.
Then edit the text for both the Title & Description to something like the following…
And finally, with the Pagination Dots selected, tweak the Overrides in the Inspector, to make the 2nd Dot Active.
How cool is that for a Symbol Override at play? I know, you can thank me later ;)
PS or BPA (Blatant plug alert): There’s many, many more awesome Overrides like that in my super-powerful Design System — Cabana.
Onboarding (Slide Three)
For this screen simply go ahead and Duplicate the Onboarding (Slide #2) Artboard, and then rename to Onboarding (Slide #3).
And with the Background Layer selected, change the Image Fill to one of the images supplied in the link I showed you earlier.
Then edit the text for both the Title & Description to read something like the following…
And like I showed you before, with the Pagination Dots selected, tweak the Overrides in the Inspector, to make the 3rd Dot Active.
And, well, sorry to disappoint but that’s this Screen all done!
The power of Text Styles and Symbol Overrides at play. Hopefully you’re now coming to realise how much time can be saved when you have a Design System by your side?
Onboarding (Slide Four)
And for the final Artboard/Screen in this Part of the Series, we can go ahead and duplicate the Sign Up Artboard we created in the previous Part, and then rename to, wait for it… Onboarding (Slide #4). Cue the fanfare!!
The go ahead and edit the Title text to read something like the following…
Then at the bottom of the Artboard, remove the Already have an account? Log In text…
…insert the Pagination Dots Symbol…
Pagination > Dots > Small > 4 Dots
…and using the Alignment Options, align it Horizontally on the Artboard, and with the Measurement Guides (ALT) position it 32pt from the Bottom of the Artboard.
Then finally, tweak the Overrides in the Inspector to make the 4th Dot Active.
All done in record time folks!
Join me back here for the final Part of this Tutorial Series where we’ll be creating the last few screens of our App, once more powered by our lite, but powerful Design System.
🎁 Want to improve your Workflow with my 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 Split View in iOS 11 on iPad.
