Hello Again, Hope you are well and experienced the new icons technique that I showed in part 1 & part
However, the old technique will still work
Now, since you know all the available technique there is, you’ll be needing to handover the icons to the developers. Let’s dive deeper into that.
Your design could be for android, ios, web or any other media. Different type of developer might want
If you followed my previous articles of this series. you’ll have a lot of slash “/” for categorizing in the name of them. But Exporting them in this state will create subfolders which will be frustrating for the developer to find the desired icon. We also need all icons to the same folder for proceeding on with the article too.
To Create Export
- First of all, I would recommend duplicating the main file (Cmd+Shift+S) and work with the duplicate file keeping the main file intact. (I didn’t find any workflow for continuously export the icons. Meaning- when you add/remove icons you need to follow the steps every time. But the process is very simple & will take you 5 mins(max) to do it)
- Use RenameIt’s find & Replace option to replace the “/” with “_”. I also rename the “_24px” with blank field (Optional) . In that way, the exports will be on the same folder and won’t have that 24px in every icon
- Now if you export them in this state the mask will create problems when using them for icon font & development purposes. For solving that, you’ll need to select a color symbol layer then go to plugins>select similar layer> Class(type). That way all the colors will be selected, hide them or delete them. Now, pressing cmd+a will select all the icon shapes. Then, from the colors panel make all the icons black. ( Before sketch 52, Selecting a shape and then select similar layers > Class(type) worked but sketch 52 seems to treat singles paths differently. So, the previous system won’t work)
- For a better selection, you’ll need to collapse all groups and export the icon artboards. View>Layer list> Collapse All groups will collapse them & then drag and select them all. [Or you can use Runner plugin to find options easily]
Exporting for android/ios as image assets
After selecting them press
[Bonus: If you want to create an asset export for
Exporting as an vector icon font (Recommended)
Web & React Native developers will love an icon-font, but Android and iOS some developers want image assets, Other ones want icon font.
In my opinion icon font is always better since you don’t need to worry about sizes, DPI, PPI & stuff ( they are vector)
I’ve discovered two ways to create icon font from sketch
1. Icomoon Way(Easy)- Export your icons as
- Nodejs way – I’ve created a simple script with a npm library available at github with a test file. The instructions are also given there. Along with the web icons the library also provides glyph- maps which is useful for using the icon in react native with React-native vector icons. You can also check the package.json file in the repository for what did & change options,parameters etc.
- Grunt way – Check this article.
I guess that’s it for the last part of the tutorial series. Let me know if you have any questions. I will definitely try to answer them. Experiment, explore & create amazing icon systems. See you in another article. Till then, take care. Goodbye 🙂