Design for iPhone X — Sketch App
How to setup your tab bar with custom icons | UI-Kit Modification Tutorial
One of the more challenging things for a beginner using Sketch App is replacing and modifying symbols that come from UI-Kits. In this tutorial, we’re going to replace generic icons with our own SVG icons without breaking the links that are pre-built for us in the default prototype template that Apple supplies in their iOS UI Kit.
SETTING UP FOR IPHONE X IN SKETCH
We’re going to leverage the design assets from Apple’s resources to build our tab bar and clickable/tappable prototype. First, we have to download the assets from Apple. Go to the following URL and download the Sketch resources. (also, add the library to your Sketch program). →
https://developer.apple.com/design/resources/#ios-apps
Unzip the template that you downloaded from the Apple website and copy the folder with files to your local drive. Be sure to install the fonts to your system (Apple provides a link to this and a license).
Once you’ve got the files moved to your local drive, and installed the fonts, make a copy of the file named “UIElements+DesignTemplates+Guides-iPhoneX.sketch” and place it in a new folder. This way, you can always come back to the original.
I made a folder called “Practice” then duplicated the file, moved the file to “Practice” folder and renamed the file to “Tabbar Practice.sketch”
GET ORIENTED WITH THE UI-KIT
Apple provides a lot of pages with assets for many purposes, such as defining colors, typographic scales, templates and UI elements. While you won’t need them all for a project at first, you might want them for later, so don’t delete them yet. And avoid copying/and pasting artboards if possible, especially if you are trying to leverage the pre-defined templates and prototypes (which should help speedup your workflow).
For this tutorial, we’re going to take advantage of the “Design Templates — iPhone — Tabbed App” which has both dark and light versions of a tabbed UI and has prototype links already applied. Find the page titled “Design Templates — iPhone — Tabbed App.”
PRACTICE USING THE OVERRIDE FUNCTION
By default, the Apple UI Kit has icons you can switch out in the Overrides panel, check it out. Select the tab bar, look in the Overrides panel to the right and override an icon. Note: If you don’t see the option in the dropdown for “Apple iOS UI” then the library file from Apple resources still needs to be added to your Sketch App.
Go ahead and practice only using the overrides to change icons and labels until you feel you’ve got the hang of it. Then, move on to the next step, where we’ll find our own SVG (scalable vector graphic) icons.
ADDING ICONS
Before we add our own custom icons, we need to do two things: 1. We need our own glyph-icons that adhere to Apple standards (see image below); and 2. We need to create symbols that are the correct size and color to replace the placeholder icons in the template. View the guidelines from Apple at the following link:
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/
FINDING ICONS
I used Google and searched for “SVG glyph icons iOS” and found a free resource. My goal was to find some solid glyphs that I could modify the color of the graphic so each icon would have an active and inactive state.
Download the set from the following link (or find your own if you feel adventurous).
Select your preferred icons, then drag and drop five SVG icons onto the Sketch template file. We will need to change their color to have an active and inactive state, so keep track of them in your layer list to the left.
DEFAULT AND ACTIVE STATE ICON COLORS
Now we need to give our icons an inactive state (in this example, a grey color) and then copy the same icons so they each have an active state (or your brand primary color). Once we have the icons in their respective states we will be able to use a sizing guide for alignment and (with that guide in place) turn each icon into a symbol that will appear in our overrides dropdown as an option.
Now, copy and paste all the icons so we can make them each have an “active” state. Change their color to the active state color.
SIZING AND FORMATING
The next step is to properly format the size of the icon so it fits appropriately. In this example, the icons I found didn’t need any resizing, but if your icons are larger be sure each one fits in the sizing guide. Also, we should include the size guide in the icon so it aligns exactly with the label below. Apple provides a “size guide” in their library, insert/drop the size guide onto the artboard. You can find it under “Insert > Symbols, Apple iOS UI > Glyphs > Tab Bar > X/Size Guide.”
Place each size guide under an icon. Size the icon and center it to the square. Prepare to turn each combination (size guide + icon) into a symbol. You’ll need to do this for each of the “Active” state icons too.
USING OVERRIDES
When you select the tab bar that you want to modify, you can view the icon select option in the override panel to the right. In the select find the option for the icon you want to replace. Note: If you don’t see the icon, the most likely reason is the symbol is not precisely the same size as the symbol in the tab bar. If so, try making a copy of the tab bar, detach it from the symbol, and inspect the icon+size guide, it should be 48 x 32 px.
HIDE SIZING GUIDE
The last step is to hide the layer with the sizing guide in each of our symbols. Double-click into the symbols that remain on the template and edit the symbol in the symbols page. Find the layer with the size guide and hide the layer using the “eye” show/hide function.
OVERRIDE EACH ICON ACROSS FIVE TABS
Override the icons and text in the subsequent tabs. You’ll have a basic navigation and 5 linked screens to get your next app going.
FINAL CHECK
Test out the clickable prototype by clicking on the preview function and see if the screens function appropriately.
WRAP UP
Thanks for checking out this tutorial on custom icons using the Apple UI Kit. I hope this tutorial answered a few questions on designing for iPhone X. Let me know if you have any feedback or if you got to design something of your own!
Neil Peterson @robowerks