Sketch Tutorial
Creating with a Design System in Sketch: Part Eight [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 last 2 Parts of this Tutorial Series I’ll be showing you how to create the final Screens for our Medium-Styled iOS App, and putting our Lite Design System to good use also.
Series Navigation -
Oh. Before we start…
…make sure you’ve downloaded the Images that are required for the final parts of this Tutorial Series…
Everything ready? Awesome! Let’s get to it…
Home
Ok, once more 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 Home.
Then from the Inspector increase the Height of the Artboard to 1227. We’re packing a lot more content into this Screen so let’s give ourselves ample room from the start.
From the Symbol menu insert the following, and snap it to the top of the Artboard…
iOS UI Design > Bars > Status > Black
Feel free to tweak away at those Overrides if you like.
Now insert the following Symbol…
Icon > Save
…and from the Overrides panel change its Color to Black.
Repeat a similar process but this time for the following Symbol…
Icon > Search
…until you have something like the following…
Now go ahead and insert the following Text Style…
H5 > Font Family #1 > Center > Black > Bold
…and edit the text to read something like the following…
Now let’s pop in a small Divider to separate the Header and the rest of the Screen content.
Simply draw out a Rectangle (R) the Width of the Artboard and 2px in Height with the Fill > Primary color.
Ok. To finish up this section let’s tighten everything up with the 8pt Grid System.
Make sure the 2 Icons are sat 16pt from the Left & Right edges of the Artboard…
…then with both Icons and the Text Layer selected, Align them Vertically to one another…
…and position the Divider 16pt below the Text Layer and Icons.
Then finally, select the Icons, Text Layer, and Divider, group them (CMD + G), rename (CMD + R) to Navigation Bar, and position this new group 16pt below the Status Bar.
All done and dusted with that section methinks!
Let’s pop in a short Title for the Home Screen…
Go ahead and insert the following Text Style…
H4 > Font Family #1 > Left > Black > Bold
And edit the text to read something like the following…
Then position the new Text Layer 24pt below the Divider, 16pt from the Left edge, and adjust the Width of the Bounding Box so it’s 16pt from the Right edge of the Artboard.
Let’s pop in a little Divider here also!
Draw out a Rectangle (R) the full Width of the Artboard and 1px in Height and then apply the Fill > Light Grey color.
Then using a little Math, and knowing that we need our Divider to be 16pt from the Left & Right edges of the Artboard, simply deduct 32 from the Width…
…and then enter 16 for the X position to align it correctly. Boom!
Finally position the Divider 24pt below the Text Layer above.
Okey-Dokey! Time to get our Article Previews into place…
Here we’ll be putting plenty of our Design System elements into practice to create these Article Previews in record time, whilst also taking advantage of Symbol Overrides to tweak certain elements as we go.
Let’s start with the Avatar and Author Name…
From the Symbols menu, drop in the Avatar/Tiny Symbol, and from the Overrides panel choose one of the Avatar images from the package you downloaded earlier.
Then insert the following Text Style…
Small > Font Family #2 > Left > Grey > Regular
…edit the text to an Author Name of your choosing…
…and then position it 8pt from the Right edge of the Avatar, and Align the 2 elements Vertically to one another.
Group these 2 elements (CMD + G) and rename (CMD + R) to Author Title.
Insert the following Icons…
- Bookmark > Fill
- More Options
…and from the Overrides panel give them both a fill color of Black.
Space them 16pt apart and make sure the More Options icon is set 16pt from the Right edge of the Artboard.
Then group them and rename to Bookmark + More.
Select both Groups (Author Title & Bookmark + More), Align them Vertically to one another, and then position them 24pt below the Divider we created earlier. Smashing!
Let’s insert an Image Thumbnail to sit below the Author Title.
Now we need a Rectangle that will sit 16pt from the Left & Right edges of the Artboard, so we can do a little more Math here and draw out a Rectangle at 375 which is the Width of the Artboard, and then deduct 32 (16+16) which will give us a Width of 343.
So go ahead and do that, oh and also give the Rectangle a Height of 128.
Then finally, and to align it correctly, we can simply enter 16 for the X position.
Position the Shape Layer 16pt below the Author Title, and then from the Inspector give it an Image Fill using one of the images from the download package.
Now let’s look at adding a Post Title and Excerpt to finish things up.
For the Post Title insert the following Text Style…
H5 > Font Family #1 > Left > Black > Bold
and edit the text to something like the following (or whatever your I’m-going-to-create-a-crazy-blog-title mind can come up with)…
Then position this Text Layer 16pt from the Left edge of the Artboard, 8pt below the Image, and increase the Width of the Bounding Box until it snaps 16pt from the Right edge.
For the Excerpt insert the following Text Style…
Small > Font Family #2 > Left > Grey > Regular
and edit the text to something like the following (or whatever your I’m-going-to-create-an-even-crazier-excerpt mind can come up with)…
Then position this Text Layer 16pt from the Left edge of the Artboard, 8pt below the Post Title, and increase the Width of the Bounding Box until it snaps 16pt from the Right edge.
And to wrap things up for our first Article Preview, let’s pop in a small Divider to separate the following Previews…
Similar to what we did previously, draw out a Rectangle (R) the full Width of the Artboard and 1px in Height and then apply the Fill > Light Grey color.
Then using some Math once more, and knowing that we need our Divider to be 16pt from the Left & Right edges of the Artboard, simply deduct 32 from the Width, and then enter 16 for the X position to align it correctly. Ta-Da!
Finally position the Divider 24pt below the Exceprt.
To finish things up, select all the elements for the Article Preview, group them, and rename to Article Preview #1.
Ok. So we now have the first Article Preview in place, and need just a couple more to fill out the Screen height.
So let’s do that in record time! Set your stopwatch, here we go…
With the Article Preview #1 group selected, click on Make Grid in the Toolbar, and enter the following settings…
- Rows: 3 Margin: 24px (sticking to the 8pt Grid System remember?)
- Columns: 1
And click Make Grid.
Duplication + Spacing simplicity at its finest :)
Now I’ll let you tweak the duplicates yourself…
Go ahead and replace the User Avatars and Thumbnail Images, and edit the Titles etc…
Also have a play around with the Bookmark Icon (using the select menu in the Inspector) to swap the icon out, and set some Articles to Bookmarked and others not?
Aim for something like the following, and I’ll see you back here soon…
Time to finish up this Screen with a simple Tab Bar, where we’ll be going all in with the Icons from our Design System. Let’s do this!
Draw out a Rectangle 375 x 56, give it a Fill > Black color, and snap it to the bottom of the Artboard.
Then go ahead and insert the following Icon Symbols…
- House
- Bookmark > Fill
- Edit
- Notification
- User
Position the House Icon 16pt from the Left edge of the Artboard, and the User Icon 16pt from the Right Edge of the Artboard.
Then with all the Icons selected, use the following Alignment Options…
- Distribute Horizontally
- Align Vertically
For each of the Icons (minus the House Icon), change the Color Override to White.
Then, with all the Icons selected, group them and rename the new group to Navigation.
And finally, select the new group and the Background layer, and using the Alignment Options, Align them Vertically to one another.
This will position the Icons 16pt on all sides within the container. Perfect with sprinkles on!
Group both the Navigation group and Background and rename to Tab Bar.
All done for this screen folks. Take a bow!
Search
Ok, insert a new Artboard (A), then from the Inspector choose Apple Devices, and select iPhone 8.
From the Layer List, rename (CMD + R) the Artboard to Search.
Then from the Symbol menu insert the following, and snap it to the top of the Artboard…
iOS UI Design > Bars > Status > Black
Again, feel free to tweak away at the Symbol’s Overrides.
Like we did for the Home Screen we’re going to ahead and add in a Navigation Bar to sit above our main content.
So firstly, insert the following Icon…
Icon > Arrow Left
…change its Color Override to Black, and position it 16pt from the Left edge of the Artboard.
Then insert the following Icon…
Icon > Search
…and change its Color Override to Grey.
Next to that Icon, insert the following Symbol…
Various > Cursor
…and position it 4pt to the Right of the Search Icon.
And finally, insert the following Text Style…
H5 > Font Family #1 > Left > Grey > Bold
…edit the text to read Search Articles, and position this 4pt to the Right of the Cursor.
Group all 4 elements together, rename this new group to Navigation Bar, and position it 16pt below the Status Bar.
On this Screen we’ll also be showing a list of the User’s Search History. Nothing too elaborate, nothing too fancy. Keeping it simple all the way folks!
So to begin let’s add in a simple Title, and also the option to Clear the History if required.
Firstly draw out a Rectangle 375 x 56, give it a Fill > Primary color, and position it 16pt below the bottom of the Navigation Bar group we recently created.
Now insert the following Text Styles, and edit the wording similar to the following image…
Small > Font Family #2 > Left > White > Regular
Small > Font Family #2 > Right > White > Bold
Now position the Regular style so it sits 16pt from the Top, Left and Bottom edge of the container, and for the Bold style 16pt from the Top, Right and Bottom.
For the Search Results, we’ll call upon the Make Grid tool once more to speed the next process up somewhat.
Let’s get our first search result into place and then Duplicate away!
Insert the following Text Style and edit the text to whatever floats your Design System boat…
Small > Font Family #2 > Left > Primary > Regular
Position this 16pt from the bottom of the container we just created, 16pt from the Left edge of the Artboard, and expand its Bounding Box so it’s 16pt from the Right edge of the Artboard also.
Then draw out a Rectangle 343x1, give it a Fill > Light Grey color, and position it 16pt from the Left edge of the Artboard, and 8pt below the Text Layer.
Group both the Text & Shape Layer and rename to something like Result #1.
Then, with the Result #1 group selected, click on Make Grid in the Toolbar, and enter the following settings…
- Rows: 8 Margin: 16px
- Columns: 1
And click Make Grid.
Go ahead and edit the duplicated Text…
Awesome!
Let’s finish up this Screen with a couple more Symbols…
From the Symbols menu insert the following…
Various > Scrollbar
…position it 4pt from the Right edge of the Artboard, 16pt below the Search History container, and feel free to extend the Height of the Symbol also.
Then to finish things up for this Screen insert the following Symbol…
iOS UI Design > Keyboards > Light > Uppercase
…snap it to the Bottom of the Artboard, and change the return button Override to Search.
And that is officially a wrap for this Screen!
Join me back here for the final Part of this Tutorial Series where we’ll be creating the last couple of screens for our App, once more powered by our lite, but powerful Design System.
🎁 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.
Thanks for reading the article,
Marc
Designer, Author, Father and Lover of working Remotely!
