Sketch Tutorial
Creating with a Design System in Sketch: Part Six [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. Oh yes indeed!
Like I mentioned earlier in this Tutorial Series, there are countless Tuts (with more popping up each day) that show you the ins and outs of a Design System but not how to construct something with them, or show you how much a System can improve your design workflow.
Now if you’re more of a seasoned designer and just wanted to check out the previous Design System parts then you can probably body goodbye and get back to your usual thang, but if you want to improve on your design skills and learn a little more on how to construct something from a Design System then please stick around for the final parts of the Tutorial Series.
Series Navigation -
Oh. Before we start…
…make sure you’ve downloaded the tutorial package that’s required to follow along with the remaining parts of this Tutorial Series…
*This includes the required Google Fonts.
Launch
With the format (starter) Sketch file open (and making sure you have the Format page selected), press (A) to insert a new Artboard, and from the Inspector choose Apple Devices, and then select iPhone 8.
From the Layer List, rename (CMD + R) the Artboard to Launch.
Draw out a Rectangle (R) to cover the Artboard, rename to Background, and then from the Inspector, choose the Fill > Primary Layer Style.
From the Symbols menu, select Icon > Save and insert it onto the Artboard.
With the Icon still selected, change its Override to Color/White in the Inspector.
And then using the Scale tool, increase its Width & Height to 56px.
And for the final element of this Artboard/Screen let’s insert one of the Text Styles that we created previously…
H1 > Font Family #1 > Center > White > Bold
And then edit the text to read something like the following…
We’re going all Lowercase for this bad-boy right here. Uppercase has been shown the door!
Adhering to the 8 Point Grid System, position the Text Layer 8pts below the Icon, and then with both Layers selected, select Align Horizontally from the Inspector to tighten up the alignment…
…then group them (CMD + G) and simply rename (CMD + R) to Logo.
Finally, and with the new Group still selected, Align Vertically and Horizontally on the Artboard.
One lil’ ol’ Launch screen wrapped up!
Welcome
Firstly create a new Artboard (A), select iPhone 8, and rename (CMD + R) to Welcome.
Once more, from your Symbols Library, drop in the Icon > Save Symbol, change its Color Override to Black, and then using the Scale tool increase its size to 72x72px.
Duplicate this icon (CMD + D), change its Color Override to Primary, place it behind the original (ALT + CMD + ↓), and then shift it slightly on its X & Y axis.
Then group the 2 elements (CMD + G), rename (CMD + R) to Logo, and position the new group (once more sticking to the ever faithful 8 Point Grid System), 16pts from the Left, and 80pts from the Top edges of the Artboard.
Then insert the following Text Style…
H1 > Font Family #1 > Left > Black > Bold
…and edit the text to read something like the following…
Then position the new Text Layer 16pt below the Logo, 16pt from the Left edge, and adjust the Width of the Bounding Box so it’s 16pt from the Right edge of the Artboard.
Why the adjustment on the Right edge you may ask? Well with it set to 16pt you know that whatever you put into that container will always adhere to those 16pt boundaries. So for example if you have text that runs butt-up to the right edge of the bounding box, it will still be 16pt from the right edge no matter what.
Happy visual balance is retained. Breath and now relax!
Ok. Let’s pop in another of our ready-made Text Styles.
Insert the following…
Body > Font Family #2 > Left > Grey > Regular
…and then edit the text to read something like the following…
Position this new Text Layer 24pt below the Title, and like I showed just earlier, 16pt from the Left edge and adjusting the bounding box if necessary, 16pt from the Right edge.
Ok. Let’s call upon, once more, one of the Nested Symbols that we created in a previous Part of the Series.
Specifically the following…
Button > Large > Right Icon
Drop one of those onto the Artboard, and let’s tweak away at a few of its Overrides. Bring on the fun I say!
With the Button Symbol selected, make the following adjustments in the Overrides panel…
- Content — CREATE AN ACCOUNT
- Icon — Arrow Right & White
- Button — Radius 0px
Then simply resize the Width of the Button so the text is visible to 343, which will be perfect for when it comes to aligning the element 16pt from the Left & Right edges. Always thinking ahead me!
Then increase the Height slightly to 56.
Hope you’re noticing everything is staying nicely aligned inside of our Symbol with those handy Sketch Resizing Constraints in play? Awesome, I never doubted you for a second.
Finally, position the Button 16pt from the Left edge, and 48pt below the Text block.
And to finish up this Screen, insert one more Text Style…
Body > Font Family #2 > Left > Primary > Bold
…and edit the text to read something like the following…
Position this Text Layer 16pt below the Button, and 16pt from the Left & Right edges of the Artboard.
All done over here!
Sign Up
Create a new Artboard (A), select iPhone 8, and rename (CMD + R) to Sign Up.
Insert the following Text Style…
H1 > Font Family #1 > Left > Black > Bold
…and adjust the text to read something like the following…
Position the new Text Layer 80pt from the Top edge, and like I showed you previously, 16pt from the Left edge and adjusting the bounding box if necessary, 16pt from the Right edge.
Let’s get our Sign Up Form into place shall we?
Firstly, insert the following Text Style…
Body > Font Family #2 > Left > Grey > Regular
and edit the text to read Email.
Then below the Text Layer, draw out a Rectangle 343 in Width and 2 in Height, and from the Inspector choose the Fill > Black Layer Style.
Position this new Shape Layer 8pt below the Text Layer (It’s 8 Point Grid System all the way remember).
Then group the 2 elements (CMD + G) and rename (CMD + R) to Email Address.
Following similar steps to what I just showed you, insert the elements to create a Password field, but this time insert the Icon > Eye Symbol, and position it to the right of the Form Field until you have something like the following…
Then, once you’ve grouped and renamed everything, position this new group 24pt below the Email Field.
To finish up the Form, simply insert the following Symbol…
Button > Large > Default
…and make the following adjustments in the Overrides panel…
- Content — SIGN UP
- Button — Radius 0px
Then simply resize the Width of the Button to 343 and increase the Height to 56.
Finally, position it 16pt from the Left edge, and 24pt below the Form Fields.
With all of the Form elements selected, group them (CMD + G), rename (CMD + R) to Sign Up Form, and position this new group 56pt below the Title.
Let’s look at finishing up this Screen with just a few more Text Styles…
Firstly, insert the following Text Style…
Small > Font Family #2 > Center > Black > Regular
…and editing the text to read By signing up you agree to our.
The below that insert the following Text Style…
Small > Font Family #2 > Center > Primary > Bold
…and editing the text to read Terms & Privacy Policy.
Position this new Text Layer directly below the previous one, and use the Alignment Tools to snap them into line Horizontally.
Then with both elements selected group them, rename to Terms & Privacy, align the new group Horizontally on the Artboard, and position it 40pt below the Sign Up Form.
To finish things up for this Screen, insert 2 more Text Styles…
Small > Font Family #2 > Left > Black > Regular
…and…
Small > Font Family #2 > Left > Primary > Bold
Edit the text for the 1st one to read Already have an Account? And for the 2nd one edit the text to simply read Log In.
Using the Alignment Tools, position them correctly in relation to one another, then group them and rename to something like Already have account?
Then finally, position this new group 40pt from the bottom edge of the Artboard.
All done and dusted for our Sign Up Screen!
Sign Up + Keyboard
For this Screen, we’ll look at replicating the state for when the user has begun to input their details into the Sign Up Form and the iOS Keyboard is displayed.
So we can simply select the Sign Up Artboard we just created and use (CMD + D) to create a duplicate and rename this new Artboard to Sign Up + Keyboard.
Tackling the Email input first, edit the text to whatever crazy email address your mind can create, and then from the Inspector select the following Text Style to alter the appearance…
Body > Font Family #2 > Left > Black > Bold
For the Password input, firstly remove the Text Layer that’s already there, and then using the Oval Tool (O), and holding SHIFT to constrain proportions, draw a circle 10x10, and then from the Inspector change its Fill to Fill > Black.
With the Shape Layer selected, use Make Grid to quickly create duplicates with the required spacing (8pts. Remember that Grid System!), using the following settings…
Ok. So admittedly that’s very basic usage of the Make Grid tool, but it just shaves off a few seconds even for a very simple use-case like this one.
Select all the Shape Layers you’ve created and simply group them up and rename to something like Password Dots. Done and done!
Finally, let’s add in our iOS Keyboard, and tweak a few of its Overrides in the process.
So from the Symbols menu select the following…
iOS UI Design > Keyboards > Light > Uppercase
And snap it to the bottom of the Artboard.
Then, from the Overrides Panel simply change the Enter Key to Go.
All done and dusted!
Log In
Again, with this Artboard/Screen we can go ahead an do a little copy and paste. That’s not to say you couldn’t go ahead and create the Log In screen using the Design System that you have at your fingertips. That’s one of the main reasons of having a System in place, that you can cut down on the time involved in putting Screens together. But in this instance the Log In shares so many similarities to the Sign Up Screen it would be foolish to not reach for the (CMD + D) shortcut, so let’s go ahead and do that…
With the Sign Up Artboard selected, duplicate it (CMD + D) and rename to Log In.
Then edit the text in a couple of places until you have something resembling the following…
Go ahead and remove the Terms & Privacy group, and then move the Sign Up button down a little (We’ll align this up correctly shortly).
Then below the Password field insert the following Text Style…
Small > Font Family #2 > Right > Primary > Bold
Edit the text to read to something like Forgot Password?, and align it 8pt below the Password field and 16pt to the Right edge of the Artboard.
Then finally, adjust the position of the Button so it sits 24pt below the Forgot Password? link, and then from the Overrides panel simply change the Content to LOG IN.
And to finish up this Screen, simply edit the text at the bottom of the Screen to read something like Don’t have an Account? Sign Up. And then use the Alignment options in the Inspector to align the 2 Text Layers correctly on the Artboard.
All done for you Mr/Mrs Log In Screen!
Log In + Keyboard
And for the final Screen in this Part of the Tutorial Series, we’ll once again simply make a quick duplicate and tweak away from there!
So go ahead and duplicate the Log In Artboard (CMD + D) and then rename to Log In + Keyboard.
And edit the Email and Password inputs to read something like the following…
Then from the Inspector select the following Text Style for both of the Text Layers…
Body > Font Family #2 > Left > Black > Bold
Next, and with the Eye Icon selected, simply change it to Eye With Line from the Inspector.
And like we did for the Sign Up + Keyboard Screen, add in an iOS Keyboard from the Symbols menu…
iOS UI Design > Keyboards > Light > Uppercase
Snap it to the bottom of the Artboard, and then from the Overrides Panel simply change the Enter Key to Go.
And that is that for our first few Screens, and for this Part of the Tutorial Series.
Job well done there!
Join me back here for Part 7 where I’ll be showing you how to create the next lot of Screens for our Medium-Stylee iOS App, with our Lite Design System powering it all the way!
🎁 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 a good cup of Tea (with biscuits whenever possible)
