How to create SF Symbols with Sketch
Since Apple introduced SF Symbols in 2019, many product designers for iOS, including myself, have been asking themselves when it will be the time to start converting the design system icons to SF Symbols. It’s been almost three years since then, and I have to say that the time has finally come for SF Symbols 3.0 to be embraced by the design community.
Prepare your icons
Apple enforces some basic ground rules for your icons for them to be converted easily as symbols. Fortunately, with Sketch these are super easy to do. Apple covered the rules in this video that you may want to watch after reading this article 😜.
Rule 1 : No open ended paths
Rule 2 : Convert Strokes (Borders in Sketch) to Paths
Solution for Rule 1 & Rule 2
Let’s look at how we might apply these rules to the power button icon, which uses open-ended paths and strokes.
To convert the open-ended path to an outline fill is extremely easy in Sketch with the Convert to outlines command or pressing ⌥⌘O. Eventually, you will want to either use the shortcut or directly the button in the Toolbar.
Convert to Outlines is so powerful that you might want to use it more frequently than you might think, especially when designing icons with multiple pathfinder operations like the target icon. Converting to outlines replaces the strokes by Fills and even renames the subpaths nicely to Paths; I mean, how cool is that!
If, for some reason, you lose some of the colors that your icon has, as in the target icon example, don’t worry, SF Symbols will take care of that too.
Ok, let’s start making that symbol now.
Step 1 : Export a Variable Template
You will need an SVG SF Symbol template to start working on this. Select a random symbol in the SF Symbol library and go to File/Export Template or press ⌘E.
If you wish to customize an existing symbol, you can right-click to duplicate it and then press ⌘E.
With SF Symbols 3.0 there are two types of templates that you might want to start with: Static and Variable.
Static templates require more work since you have to draw all the 27 variations by hand.
Lucky, there is a better way of doing that with Variable templates for which you only have to provide three variations in width, and the rest will be handle by the SF Symbols interpolation algorithms. So let’s go ahead and select a Variable template to start.
Step 2 : Edit the Template in Sketch
Import the template, lock the Guides and Notes groups and remove the Symbols group since we will be making our own.
Step 3. Prepare 3 Variants of your Icon
You will need to prepare three variants of your icon and later on make each variant a group with a specific name for each variant: Ultralight-S, Regular-S, and Black-S.
Step 3.1 Make Regular-S Shape first
You can start however you like, but I found it most convenient to begin with, the Regular shape first and then shrink it or enlarge it for the Ultralight-S and Black-S variants.
Since 2021 is the Olympics year, I will be making the Olympics symbol for the rest of this tutorial and take full advantage of the Outline tool.
Here is how everything looks after conversion to outlines.
3.2 Copy and Paste the final Regular-S shape two times
This step is essential since the interpolation relies on the exact number of anchor points between variants. Any duplication or removal of anchor points to your final Regular-S shape will break the template. So make sure that you only adjust existing anchor points in your final Shape.
3.3 Unify the entire shape (Optional)
This step is only if your Shape is composed of several sub shapes like in my example. All the rings of the Olympics ended up being in separate groups after outlining them. To make them one Shape, I unified them all and removed all the Oval subgroups to clean up the file.
Your final layers should only contain the name Shape of the final Shape and the Paths sublayers that compose it.
3.4 Transform the Shapes to Folders by Grouping them
We have to recreate the original Symbols folder hierarchy, and for that, we need to regroup back our final shapes and position them into their respective place on the canvas.
Rename the template from its default name to the last icon and export it as SVG.
Step 4. Import the template back to SF Symbols
After you’ve exported everything from Sketch as SVG, its time to import back your symbol to SF Symbols and let the interpolation begin.
Alternatively, if you’ve modified an existing shape and want to update it, you have to drag and drop it on top of the existing one, and SF Symbols will ask you if you’re going to update it. This gives you the ability to almost version control and improves your icons sets over time.
Step 5. Color your SF Symbol
Apple provides 4 rendering levels for icons:
Monochrome : The entire icon have one primary accent color.
Hierarchical : Certain paths in the icon have lower opacity levels.
Palette : Having two accent colors for the same icon.
MultiColor : Making every single path a different color
The level of personalization in this last multicolor rendering mode is insane, and it will be covered in a future article.
After some tweaks, this is how my colored icon ended up being.
Step 5. Handoff your Symbol to your Dev team
This part is pretty straightforward once you have arrived here. All you have to do is click File/Export Symbol, and you will be presented with the following dialog.
Template version 2.0 is monochrome and is there to support iOS13+ versions.
If you work on iOS15+, then you can go ahead and export the template version 3.0.
The 3.0 version will contain all the colorwork and annotations for that icon.
Step 6. Import to XCode
Assets catalog is where these icons live in Xcode, drag and drop them directly in there is a child play and don’t need additional explanations.
If necessary, you can create variations based on the icon localization, direction, and appearance, but I might need to write another article for this.
Final Note
There are other ways to create custom SF Symbols, such as creating them directly in Xcode or with an app, but I haven’t found them to be as easy for designers as the method I described here for Sketch.
Thank you, and I hope you’ve enjoyed reading my tutorial.
