[Download the corresponding Sketch project file here.]
If you’re anything like me, you use symbols in Sketch every chance you get—pretty much any time you use an element more than one time in your document.
Thanks to symbol overrides in Sketch, it’s never been more realistic to turn nearly everything in sight into a symbol for future reuse and syncing.
But there’s one inevitable brick wall you’ll eventually hit. While you can override text and images within a symbol, you can’t override the color of something. So, let’s work around that.
For those who prefer reading to watching, get the step by step below. New to Sketch?
Learn how to switch to Sketch in our free video course.
1. Symbol overrides at a glance
To see the finished product and poke around with it, download the Sketch project file here.
Let me start by saying this won’t work for absolutely everything, but it will work for blocks of color and more complex shapes with the help of masks if you want to get crazy.
Once you have a symbol on your canvas, you’ll find that any text layers or images within it show up on the Inspector as overrides that you can replace on an instance-by-instance basis. The color of an object within the symbol simply isn’t available to change here.
But there is one last element that can be overridden…
2. Nested symbol overrides
In addition to being able to change text and images within a symbol instance from the Inspector, we can also swap out a symbol used inside the parent symbol for a different one (as long as it’s the same exact dimensions). This is called a nested symbol override. And it just so happens to be the key to overriding colors.
3. Swatches as symbols
So, why not create a symbol that’s essentially just a color swatch? It can’t get distorted when stretched, it can be swapped out on the fly, and it can be used to make global changes. Just make a square for a color fill, select it, and click Create symbol on the Toolbar. It’s that simple.
When it’s time to create a rectangle with a color or gradient fill, use your symbol instead of using the rectangle tool. It’s just just as stretchable as any other rectangle.
4. Swapping it out
Now that each colored box used in this pricing table comes from a symbol nested inside, I can head over to the Inspector and choose a different swatch from the dropdown menu. Now each pricing table instance can be color-differentiated with just a few clicks.
Looking for more Sketch tutorials? Check these out
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
