How to work with complex Symbols

Have you been using Symbols, but feel like they could be working hard for you? Today, we’ll take a look at how to work with complex symbols. If at any point you feel like the topics we’re covering are too advanced, check out our post on how to edit Symbols to quickly get up to speed.

While the main purpose of Symbols is to easily populate a design project with repeating elements, there’s a lot more you can do with them. You can turn absolutely anything into a Symbol: a navigation bar, a template, a footer — you name it.

Now, maybe you’ll need to sit down for the next one, but you can also put Symbol instances inside of a different Symbol. This creates what we call a nested Symbol — which is our main point of focus in today’s lesson.

How to create a nested Symbol

Creating nested Symbols can be an exhilarating process filled with possibilities. But take it one step at a time! Nested Symbols can get messy if you start combining anything and everything into a single Symbol or group of Symbols. Instead, take a step back and consider the use-case before diving in.

Once you’ve turned the basic building blocks of your design into Symbols, you can start imagining how these blocks will work together. For example, you could insert an instance of your button Symbol into your navigation bar Symbol. You could also work backward, realizing that a part of a bigger Symbol you’ve created can actually be repurposed elsewhere in your document.

Creating a nested Symbol

Now that you’ve settled on some good use-cases, it’s time to create your first nested Symbol. And there are two ways of doing this. The first is to edit an existing Symbol Source and insert an instance of another Symbol.

The second is to select two or more Symbols in your Canvas and choose Create Symbol in the toolbar.

Let’s talk about overrides

We’ve talked briefly about how to edit Symbol instances through overrides, as well as how to disable override options. Now, let’s expand that knowledge by applying it to nested Symbols.

When you create Symbols, such as button variations, you can swap them through the Overrides section of the Inspector. Simply click on the override option and select the Symbol you’d like to swap in from the drop-down menu.

If you need to access the Symbol Source for one of the nested overrides, you can always click the arrow icon next to the override’s name in the Inspector.

Smart Layout, a game-changer for complex Symbols

Now that we’re working with complex Symbols, we’ll likely need to up our resizing game. Imagine your button is now nested inside the “Banner” Symbol we showed in the previous video. In some cases, your button will need a longer CTA than the current placeholder text.

Smart Layout helps you create components that will resize automatically to fit your content. You can specify if a Symbol should resize vertically or horizontally, as well as the alignment.

To set up Smart Layout, first go to your nested Symbol’s Source. Once there, you will find a Layout section in the Inspector. For our button example, select “Horizontal” and center alignment. This way, the button will expand equally to both sides.

You can also set up Smart Layout when creating a new Symbol. Simply select an option from the dropdown menu in the Create new Symbol window.

What’s next?

We’ve learned a lot today! So, don’t get discouraged if you forget a thing or two along the way. Make sure to bookmark this tutorial so you can come back to it anytime you need a refresher. You can also check out our free beginner’s course to learn more about Symbols and designing with Sketch in general.

Thanks for reading, and stay tuned for future how-to guides!