This article is going to assume that you already understand the fundamentals of icon design. And focus on how to prepare and export them for usage on Web, iOS and Android. We will use Sketch to organize, manage and export the icons.
We will also focus on monochrome icons that can be tinted dynamically on all platforms.
🎉 🎉 Sketch 42 🎉🎉
I started writing this article before Sketch 42 was released. It appears they have made some significant improvements. That have actually changed my workflow.
1. Pasting from illustrator, snaps to the pixel grid much more consistently.
2. Changing the fill-rule is much easier now. …
The Sketch Team has been working really hard on Symbols lately. And Sketch 39 (Currently in Beta) has a really awesome new Feature called Group Resizing. This allows you to set sizing constraints on nested elements within a Group or Symbol.
Besides the obvious uses I thought it would be interesting to think outside the box a little, and a create a Fluid Grid
Let’s Go
Start by drawing a rectangle 120px wide x 100% the height of your artboard.
I chose 120px because I am using the 1440px x 1024px Desktop HD artboard. 1440/12 = 120. This doesn’t matter too much because the grid is to going to be fluid, but it will make resizing easier later on. …
✋ I KNOW, I KNOW Iconfonts aren’t cool anymore, but hear me out.
Sketch’s symbols are getting better with every update, but they still have their limitations. Text overrides are great, and I think we are all hoping for a similar functionality for layer properties and assets that live inside of the symbol. In the meantime here is a little trick I use.
Text Overrides + Iconfonts = Dynamic Icons
It’s a bit of a hack but we can actually take advantage of text overrides and iconfonts to swap out icons on the fly within symbols.
Sketch released a huge update with the way symbols are handled in 3.7. While I believe symbols still have a long way to go. Nested symbols have opened up new possibilities, and have me rethinking my current workflow.
Thinking like a developer
I’m not going to debate whether you should code or not, but we can learn a lot from developers. And unless you are just making dribbble shots, you are going to hand your work over to be built sooner or later. There are also some great principles we can learn from the development process.
D.R.Y — Don’t Repeat Yourself. The idea here is to create reusable components. And what better way to do that in Sketch is with Symbols and Shared Styles. We can also apply this to a bigger picture, and try to avoid reinventing the wheel every time a new feature comes a long. Go back into your component library and see if something can be reused. …
I wanted to share my Sketch workflow designing on an 8 point soft grid. If you are not familiar with this concept please read Bryn Jackson’s great article on 8pt Grids first.
http://spec.fm/specifics/8-pt-grid
I have a fairly unique workflow, adding color coded guides right inside my artwork. This process was heavily inspired by the Material Design Guidelines
