How I use Sketch Nested Symbols

Perhaps the greatest aspect of Sketch is the intuitive simplicity it brings to design. However, creating nested symbols is where it really gets tricky.

If you use Sketch you will be familiar with Symbols. Think of them as global variables. Using the same button on all your pages, and only changing the text? Create a symbol. Designing a people directory where every result has to have the same layout? Create a symbol. So far, so easy.

But the power of Sketch is creating nested symbols. This article by Noam Elbaz on Medium is a good start, and this article by Lloyd Humphreys is mind blowing. Lloyd pushes the envelope and manages to create the most incredibly versatile symbols. The image below (taken from the article) gives you an idea. This is ONE SYMBOL. Frankly, it's nuts. 

Taken from Lloyd Humphreys, this is how far Nested Symbols can be pushed.

Taken from Lloyd Humphreys, this is how far Nested Symbols can be pushed.

I find the best way to get a handle on this (for web design) is in the creation of a Navigation Bar.

When creating client mockups, it often helps to be able to show the Nav Bar in it's various states. This is also super useful when passing designs onto your Dev Team (I use Zeplin, it's a game changer). 

Step 1

Begin by creating a simple bar, 1200px wide. On the left you put a logo, and on the right you put your menu options. Easy.

Step 2

Now, some housekeeping.

Rename the options (Home, Work, etc) like so: "Nav Bar/Nav Off/Home", and so. Another great thing about Sketch is that adding "/" will group symbols, so that they're and organised in the dropdown menu. I would also recommend reordering the elements, so that Home is at the top of the Layers list, and Contact at the bottom. This will come in handy later on.

layers.jpg

Step 3

Now, group your NavBar together, and give it a useful name. I called mine "Navigation". Select your group, and make it a Symbol.

Double-click on your new Symbol, which takes you to the Symbols page. Now here is where the fun begins. Click on each item in turn (Home, Work, etc) and make it into a Symbol.

Step 4

If you've done everything right, then it should look like the above – your 5 new Symbols on the right hand side.

Duplicate the Home Symbol, and rename it: "Nav Bar/Nav On/Home".

For this new Symbol, select the Home and change it to a different colour. I went for a dark green.

You're almost done.

Step 5

Go back to Page 1, where you originally created the Nav Bar. Now when you select it, a different set of options appears on the right side of the screen. Click on the first drop down, will now have 2 options: Nav On and Nav Off:

Screen Shot 2017-02-02 at 18.45.27.png

The reason for this, is that Sketch automatically uses any other Symbol with an Artboard who's dimensions are the same. (This can lead to problems, but you can always manually edit an Artboard's size to ensure that you have a unique size).

Now look at your lovely shiny Nav Bar. You've changed the "Home" option! 

Step 6

All you have to do now is apply the same technique to the remaining menu options, and boom, you have a versatile reusable component. It's so effective, and an amazing time saver in the long run.

Once you get into it you can make far more complex combinations, such as Lloyd Humphreys. But for me, this was a light bulb process. Once I mastered this, the whole world of Nested Symbols opened up for me.