Videos

Nested symbol overrides in Sketch 41

by

on

View all posts

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.

Nested symbol overrides in Sketch 41

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.

Nested symbol overrides

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.

Nested symbol overrides

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.

more-vdieos-animation
Author

Joseph Angelo Todaro

Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.