In Sketch, How Can You Make Nested Symbols?

Sketch is a straightforward program, but its Symbols feature has the potential to save you a considerable amount of time. This tutorial offers guidance on how to create nested Symbols within Sketch.

If you need to make adjustments to an icon that appears in multiple places throughout your file, the best approach is to make the changes to the original version of the icon, and then update the other instances of the icon accordingly. Similarly, if you need to make a slight alteration to the colour of a symbol that you have been refining in your design, you should make the change to the original symbol and propagate it to the other places it appears.

Sketch enables designers to quickly make adjustments using its powerful tools, one of which is symbols. Today, we will be exploring how to effectively use nested symbols to build comprehensive design systems.

What exactly are “nested symbols”?

Creating nested symbols in Sketch is an easy way to save time. Nested symbols are regular symbols that are generated by combining existing symbols in Sketch, which can feel like something out of Inception. However, this brief lesson will demonstrate that it is relatively simple to use nested symbols to your advantage.

Creating Nested Symbols

To explain the concept of building nested symbols, we’ll develop the button example above.

Step 1: Design colour symbols

Let us start by determining the colours for our button. Create a 100px by 100px rectangle with no border, and fill it with the colour referred to as PRIMARY-BLUE. To create a symbol from this rectangle, right-click it and select the option ‘Create Symbol’ from the context menu. To access the Symbols menu, double-click the rectangle and duplicate the entire symbol.

Rename the copy **COLOUR / SECONDARY-BLUE **and modify the fill colour. You may repeat the technique to make other hues.

Step 2: Design icon symbols

We will be incorporating one additional element into our nested symbol: icons. The process is similar to that of the colours: first, create one icon and then convert it to a symbol. Subsequently, under the Symbols menu, duplicate the entire symbol with the icon included and assign it its own unique name.

It is essential that the icon symbols have the same artboard size.

Step 3: Make a button out of stacked symbols

We’ll take the colour and icon symbols we made in stages one and two to create a nested symbol.

To start, create a new artboard and shape the colour sign into the form of a button. Then, place some text on top of the button and add the icon symbol on top of that. Next, select all of the layers and group them together, saving the result as a new symbol.

That’s all! You may now utilise symbol overrides for your button to customise it in fewer steps.

Step 4 (Optional): Use emojis to name your layers!

Emojis can be incorporated into layer names to improve the readability of your project. For a comprehensive guide on how to do this, please refer to my previous article, “Emoji Evolution: Creating the New Face of Messaging“.

Join the Top 1% of Remote Developers and Designers

Works connects the top 1% of remote developers and designers with the leading brands and startups around the world. We focus on sophisticated, challenging tier-one projects which require highly skilled talent and problem solvers.
seasoned project manager reviewing remote software engineer's progress on software development project, hired from Works blog.join_marketplace.your_wayexperienced remote UI / UX designer working remotely at home while working on UI / UX & product design projects on Works blog.join_marketplace.freelance_jobs