Sketch Tutorial
Creating with a Design System in Sketch: Part Nine [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 Final Part of this Tutorial Series I’ll be showing you how to create the last couple of Screens for our Medium-Styled iOS App, and putting our Lite Design System to good use once more.
Series Navigation -
Bookmarks
Ok, let’s get our Bookmarks Screen into place, and as it does share a lot of similarities with the Home Screen it would make sense to simply Duplicate that Screen and make the required adjustments, so let’s go ahead and do just that.
With the Home Artboard selected (CMD + D) to Duplicate and then Rename (CMD + R) to Bookmarks.
The first thing we can do with this new Screen is to swap out the Screen Title. So simply tweak that to read bookmarks.
Then remove the Page Title, and Divider and move the Articles up so they sit 24pt below the Header Divider.
Now what we need to do here, and due to the fact that these Articles are currently Bookmarked, is remove the Icons, and pop in a Date of when they were posted. Let me show you…
Remove the 2 Icons and then insert the following Text Style…
Small > Font Family #2 > Right > Black > Bold
…and change to a Date format similar to the following…
Go ahead, and follow the same process for the rest of the Articles.
Calling once more on the Images folder (that we used in the previous part), go ahead and swap out the Avatars and Thumbnails, and also feel free to tweak the Titles and Preview Copy, until you have something similar to the following…
Great job!
And finally, to finish up this Screen, tweak the Overrides for the Tab Bar Icons so the Bookmark Icon is now Active.
Done with sprinkles on!
Create Post
Ok. So I’ll admit, with the Bookmarks Screen we cheated a little with the whole ‘Let’s just Duplicate Screens, make tweaks, and be on our way’ method, but for this final Screen, and with the power of our lil’ Design System to hand, we can create this one from scratch in record time.
Let’s get to it!
So, insert a new Artboard (A), from the Inspector choose Apple Devices, and then select iPhone 8.
From the Layer List, rename (CMD + R) the Artboard to Create Post.
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 previous Screens we’re going to ahead and add in a Navigation Bar to sit above our main content.
So firstly, insert the following Icon…
Icon > Close
…change its Color Override to Black, and position it 16pt from the Left edge of the Artboard.
Then insert the following Text Style…
Small > Font Family #2 > Right > Primary > Bold
…edit the text to simply read Next, and position this 16pt to the Right Edge of the Artboard.
Like we’ve done previously, we’ll insert in a small Divider to separate the Header and the rest of the Screen content.
So draw out a Rectangle (R) the Width of the Artboard and 2px in Height with the Fill > Primary color, and position the Divider 16pt below the Text Layer and Icon.
Then finally, select the Icon, Text Layer, and Divider, group them (CMD + G), rename (CMD + R) to Navigation Bar, and position this new group 16pt below the Status Bar.
For the Content Area, we’re going to add in a simple Cursor, so go ahead and insert the following Symbol…
Various > Cursor
…change its Color Override to Primary, and position it 16pt from the Left Edge of the Artboard, and 24pt below the Navigation Bar.
Just a few more elements to go and we’re all wrapped up for this Screen, and the Tutorial Series. Hoorah!
From the Symbol menu insert the following, and snap it to the bottom of the Artboard…
iOS UI Design > Keyboards > Keyboard + Suggestions
Now let’s insert a Toolbar to sit above our Keyboard, allowing the user easy access to Edit functions when creating an Article/Post (thanks for the UI inspiration Medium).
Draw out a Rectangle 375 x 56, and from the Inspector, give it a Fill > Primary color, and snap it to the top of the Keyboard.
Then from the Symbol menu insert the following Icons…
- Format Text Size
- Quote Open
- List
- Link
- Image
…and give them a Fill > White color.
Position the Format Text Size Icon 16pt from the Left Edge of the Artboard, and the Image Icon 16pt from the Right Edge.
Then with all Icons selected, use the Alignment Options to Align them Vertically to one another.
Then (and minus the Image Icon) space them out evenly with 24pt between each of the 4 Icons.
Finally, select all the Icons and make sure they’re positioned 16pt from the Top and Bottom of the Container/Background.
And that is officially a wrap for this Screen and the Tutorial Series. A big Thank You for being a part of it. You’re now officially awesome too!
I hope with this Tutorial Series I’ve been able to show you how much improved your Design Workflow can be inside of Sketch with a Design System by your side.
Admittedly following this Tutorial Series it would have been a case of stop-start, stop-start as you follow along with the instructions, but try and go back and create some of the Screens once more knowing what you know now and once more putting the Design System into practice and you’ll soon realise how much faster and easier your Workflow can be.
I’ve been using the Cabana Design System myself now for over 6 months now and I would never go back to my old way of working in Sketch. No, no, no! I’ve realised how powerful they can be when used in my daily workflow, and how much time has being saved by using such a System.
If you also want to rapidly improve your Design Workflow you can check out the full Cabana Design System below, and work better, smarter, and faster than ever before.
🎁 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 Adobe XD (Just Kidding!!!)
