Nested symbol overrides in Sketch 41

Sketch 41 has arrived with a fresh new look and an incredibly useful new feature: nested symbol overrides. Let’s take a look at how nested symbols can be used as placeholders and swapped out on the fly within different instances of a parent symbol.

Here we’ve got an app with a bottom navigation bar that has 5 icons on it, each its own symbol. You’ll notice that the history icon is in a solid blue “active” state to remind the user where they are. Since the entire nav bar is going to be used on nearly every single screen, we’re going to want to turn the whole group into one big symbol with the other little symbols inside.

Related: 3 Sketch mistakes for a rough developer handoff

In the past, this would mean we’ve committed to this exact appearance for every single instance—which would cause a problem when it comes to the solid blue icon since it’ll switch on each screen.

So here comes the magic…

Let’s option + drag a second instance of this symbol over to the next screen.

Take a look over at the Inspector. In Sketch 41, the Inspector now looks inside the parent symbol for other symbols nested inside. Each nested symbol is treated like a placeholder, which gets its own dropdown menu to replace it with any other symbol of the same dimensions.

So the setup is just a matter of creating a symbol for each version of each icon ahead of time.

With just a couple of clicks, I can swap the blue “active” history symbol out with the normal history symbol—and the normal profile symbol with the active profile symbol. And just like image and text overrides, these changes only apply to the selected instance of the symbol and leaves all the other instances alone.

Thanks to nested symbol overrides in Sketch 41, global design changes are easier than ever—and compromise is a thing of the past.