Sketch: Tint icons using nested symbols
IMPORTANT UPDATE 03/23/2020:
Sketch has now released the ability to “Tint” Symbols and Groups, so you are better off using the new feature available in Sketch 64.
See blog post here — The original post is still available below. :)
IMPORTANT UPDATE 09/20/2018:
I first published this technique (really a hack though) in November 2016. It has been used by a lot of people (including myself for the past couple of years) and made popular by Jon Moore at UXPowerTools 🙌.
Sketch has finally fulfilled a dream of many designers —and soon text and style overrides will be available to everyone with Sketch 52!
I am leaving the original post below as it is still relevant in cases when:
– your layer “fill” cannot be accomplished with a simple Layer Style
– when you want to limit the override options
In the majority of the cases though you’ll be better off starting to use the new overriding technique.
Sketch 52 should come out of beta sometime soon…Jon wrote a great post in regards.
Original post from 11/2016:
I always wanted to create a single version of an icon and apply different colors to, or tint it, to indicate its state, like active or disabled for example.
Create an icon and turn into a mask, then use a symbol to fill the mask.
For symbol overrides in nested symbols to work the symbols must be of identical dimensions.
- Download the file.
- Edit the symbols and see how they are set up.
- Change color fills and see how they affect the icons.
Take it to the next level by using the same system for the outline of the icon. :)
If you have any tips on other ways to use smart symbols to achieve this effect shoot me an email at Francesco@FreeAndWilling.com or add a comment below. I appreciate your feedback.
If you learnt something from the file — pls like the post and share. If you are in NYC and are are into Sketch, Principle or InVision make sure to join the meetup.
Thank you :)
Francesco
@fbmore
@FreeAndWilling
If you enjoyed this post you might also like:
