Symbols: Nested Layer Styles & Nested Symbols

Topics covered in this Sketch tutorial:

Using Layer Styles in Symbols, Nesting Symbols

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how symbols are even more powerful when you use layer styles within them, and when you nest symbols within other symbols.

Using Layer Styles in Symbols

1. In Sketch, go to File > Open Local Document.
2. Navigate into Desktop > Class Files > Sketch Class > Pulse and double–click on Symbol Nesting.sketch to open it.
3. On the Autumn Collection artboard, select the top left product Distressed Denim Jacket.

4. This is a symbol we made and it contains the following:

   • photo
   • product name and price
   • “Add to Bag” button
   • heart icon at the bottom right of the photo
5. The heart icon will allow a user to favorite a product, and we’d like to show an example of how this would look on one of these products. If we changed the heart in the symbol it would update all instances, which we would not want. To allow us to change the appearance in only one instance we’ll have to use layer styles.
6. Double–click on the Distressed Denim Jacket product photo to edit the symbol.
7. Click on a blank area of the canvas to deselect.
8. Select the heart icon at the bottom right of the photo.
9. We need to create styles for the two appearances this heart will have (selected and deselected). To save the current appearance, in the Inspector on the right, find the menu that says No Layer Style.
10. Below that menu click the Create button to create a style.

11. Name it favorite/deselected and hit Return to apply.

    NOTE: Adding favorite/ at the beginning will create a favorite folder!

12. Now let’s create the selected style. In the Inspector, under Fills, set Hex to #FF0000 and hit Return to apply it.
13. In the Inspector, above Fills change Opacity to 100%. (Not the Fill opacity, but the Opacity above the Style area.)
14. In the Inspector, click the Create button below the style menu.
15. Name it favorite/selected and hit Return to apply.
16. We want the deselected style to be the symbol’s default appearance. In the Inspector, click on the style menu (currently says selected) and choose deselected.
17. At the top left of the canvas, click the Back to Instance button.
18. Select the top right product Ivory Loose Knit Sweater.
19. In the Inspector, notice there’s now a Favorite override!
20. Click on the menu below Favorite and choose selected.

21. The heart in the artboard should now be red.

Nesting Symbols

1. In the Sidebar, select the Nav Menu artboard.
2. Choose View > Zoom To > Selection to make the Nav Menu artboard fill the screen.
3. Click somewhere outside the artboard so nothing is selected.

4. In the middle of the artboard, notice there’s an empty space with an icon next to the word Text.

   Here we want to make 3 links, each which have a different icon. To do this we can use a symbol, but an important thing to note is that the icon we have here is a symbol. By nesting a symbol inside another symbol we’ll gain some nice flexibility.

5. Click once on the icon to the left of Text to select the icon.
6. In the Sidebar, rename nav-icon/person to Icon (this will be the name we see later in the Inspector’s Override option for the symbol).
7. Drag it above the Text layer so it will be in the correct order in the overrides list.
8. Hold Shift and click once on the word Text so both the icon and text are selected.
9. In the Toolbar, click the Create Symbol button (or choose Layer > Create Symbol).

10. In the dialog that appears:

    • Name it link with icon
    • Set the menu below the name to No Layout.
    • Check on Send Symbol to “Symbols” Page.
    • Click Create.
11. We want 3 of these links, so with the symbol still selected on the artboard go to Arrange > Make Grid.

12. In the Inspector, set the following:

    • Cells: 1 and 3
    • Spacing: 0 and 20

    Click Finish when done.

13. The top of these 3 links should still be selected. In the Inspector’s Overrides section, below Text type Sign In and hit Return.
14. On the artboard, double–click on the second link’s text and type in Saved Items.
15. On the artboard, double–click on the third link’s text and type in Your Store.
16. Click once on the second link Saved Items.

17. In the Inspector’s Overrides section, click on the menu below Icon and:

    • Notice there are 3 icons (heart, map-pin, and person) we prepared for you.
    • Choose heart.
18. Notice on the artboard that the heart is short and looks distorted. That’s because it’s artboard is not the same size as the original symbol. Let’s fix that.

19. At the top-left of the Toolbar, click on the Components button .

    

20. In the middle of the Toolbar, click on the Symbols .
21. Double–click on the person symbol to edit it.
22. You’ll now be on the Symbols page with the person symbol selected. In the Inspector notice the W (width) is 16 and H (height) is 18.
23. Zoom in and scroll down to the nav-icon/heart symbol artboard below.
24. Click on the artboard name nav-icon/heart to select it.
25. Notice the width is the same, but the height is different.

26. Change H to 18 so it matches the other icon.

    The nav-icon/map-pin symbol is already the correct size, so we don’t have to do anything to it.

27. At the top-left of the Sidebar, under Pages click on Screens.
28. Notice the heart icon for Saved Items should now look better (it’s not squished up).
29. Select the Your Store link.
30. In the Inspector change the Icon to map-pin.
31. Click somewhere outside the artboard so nothing is selected.

32. Save the file and close it.