1. Symbol overrides at a glance

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.