Published on <a href="http://ift.tt/2pU3vJI">| Prototyping: From UX to Front End &mdash; Medium</a> Niels Flindt Koelmeyer <img alt="" src="http://ift.tt/2o6sDR4">
<h3>Introduction</h3>
Using Nested Symbols in Sketch is powerful because it gives you the ability manage your symbols across an indefinite number of artboards from a single source. The beauty of using Nested Symbols is that you define your components in one place only. This makes consistency and maintainability easier to manage. Especially when you work on large projects. Also, using Nested Symbols it’s quicker to swap out individual Symbols (eg. colors or states) for any given instance of a Nested Symbol.
Effectively working with this technique has been brilliantly laid out in <a href="http://ift.tt/2gR47fa">Jon Moore</a>’s in <a href="http://ift.tt/2lT0gAi">Nested Button Symbols</a>. What we want to do in this tutorial is to expand upon Mr. Moore’s technique by adding the ability to control shadow effects on any given button.
Note: Setting up the Nested Button Symbol does require some initial, tedious footwork. Likewise, it requires a huge amount of organization. Once you got the base down, though, it’s super fast to expand upon, adjust and maintain. For those of you who can’t be bothered doing the prep, just skip to the bottom and grab the premade Sketch-file. For the rest of you, come take my hand and follow along.
<img alt="" src="http://ift.tt/2o6Eyyb">What we’re going for
<h3>How to Get It: 6 Types of Symbols</h3>
In order to make a Nested Button Symbol that allows us to toggle between different expressions of the Button, we’ll initially need 6 roots of Symbols (I call these Root Symbols). Well, technically the Container-layer won’t be turned into a symbol, but it will get included in the Nested Button Symbol.
<img alt="" src="http://ift.tt/2opfTBd">Anatomy of a Nested Button Symbol
When we want to add variations of a given root Symbol (say, we want a new color variation), we simply add duplicates of the layer and edit them.
The way to go about making Nested Symbols is to sketch out the base layers for the button. We want to start from the simplest form possible of the button first and then add complexity as we progress. Let’s go!
<h3>Part I: Prepare the Base Layers</h3>
<h4>Text and the Container</h4>
Roughly speaking, a button is really just some text bounded by a container — so we’ll start from here: Add a centered text layer and a rectangle to act as our container. Think of the container as a cookie cutter. It’s sole function is to give shape to the layers on top of it. So the color of the container doesn’t matter because it’ll be covered by other layers anyway.
Align those two layers and we got ourselves a button.
<img alt="" src="http://ift.tt/2o6mvbC">Boom!
<h4>Color</h4>
This step is easy. Simply duplicate your container (cmd+D) and fill it with your primary color of choice.
<img alt="" src="http://ift.tt/2op9y8V">
<h4>Inner Shadow and State</h4>
Okay, now we want to add a state to our button. When starting to think about the different states a button might have, it’s useful to have a predetermined set of rules (like a style guide or framework) to base your design on.
We’ll use the rule of Light Comes from the Sky as explained in <a href="http://ift.tt/2piDvYO">Erik D. Kennedy</a>’s excellent post <a href="http://ift.tt/1uhAdDN">7 Rules for Creating Gorgeous UI</a>.
Simply put, because light hits the Interface from above — “the sky” — , Inset elements (such as pressed buttons) catch less light and will therefore appear darker as well as they’ll have an inner shadow casted from their top edge. Reversely, Outset elements (eg. buttons and hovering buttons), catch the more light and will therefore appear lighter and will cast a shadow from the bottom edge on the interface below them.
<img alt="" src="http://ift.tt/2opij2z">Something like this
Now, what’s the simplest interaction for a button? Well… It can be clicked/pressed. So let’s start with a Pressed State for the button. Since pressed buttons are inset into the interface, we want the layers beneath it to appear darker. To achieves this effect, we duplicate our color layer and change the fill to black with an opacity of 20%.
Next, we want an inner shadow. Duplicate the Pressed State layer, remove its fill and give it an inner shadow from the Inspector in Sketch.
We should see something like this now:
<img alt="" src="http://ift.tt/2o6pzo5">
The reason why we’re making separate Symbols for States and Inner Shadows is that it gives us the flexibility to reuse the individual Root Symbols across multiple components, such as Radio buttons, Checkboxes, Slider Tracks and Slider Buttons.
<h4>Shadow</h4>
Finally, we want to add a shadow layer. It’s somewhat contradictory to add a shadow to an inset element, but we want to include the shadow in the Nested Button Symbol from the beginning.
The shadow will be placed at the bottom of the layer hierarchy. Simply duplicate the Container and place the shadow beneath it. Remove the fill and give it a shadow.
<img alt="" src="http://ift.tt/2op2uct">Hierarchy of layers
<h3>Part II: Organizing the Base Layers</h3>
Alright, we’re done Sketching for now. Good job! Let’s organize the layers on our artboard so we can make sense of it all. We start by naming each layer according to its functionality.
<h4>Naming the Layers</h4>
I like to use emojis when naming the layers (again with inspiration from <a href="http://ift.tt/2gR47fa">Jon Moore</a>) to declare their root. Using visual cues makes it so much quicker to scan and find the symbols you want to edit, especially as your project grows in complexity.
So go ahead and hit control + command + space and choose the ones you like for each element. I named the layers like so:
<ol>
<li>? Text</li>
<li>? Inner Shadow</li>
<li>⚡️ State</li>
<li>? Color</li>
<li>? Container</li>
<li>☀️ Shadow</li>
</ol>
Using emojis is a personal choice. Feel free to leave out the icons. The key takeaway is that being clear and consistent in your naming will help you later down the line.
<h4>Sizing the Layers</h4>
It’s important to know that Sketch only lets us swap out Symbols of the exact same size. So far we’ve worked with duplicate layers of equal size (except for the text-layer of course). If we just went ahead and turned our layers into symbols now, that would mean we had to
Because we don’t want to be presented irrelevant Symbols, we’ll give each layer a unique width. After we’ve turned them into symbols, we’ll readjust their sizes in our Nested Button Symbol.
Since the Container is the cookie cutter, we’ll resize the other elements relative to it. I like to start from the bottom up, decreasing each layer 1px in width relative to the container. We’ll maintain the height values, as this makes it easier for us to readjust them on the Symbol Page.
In my case, the container is 123px wide, so I’ll adjust each layer’s width like so:
<ol>
<li>? Text</li>
<li>? Inner Shadow -4px = 119px</li>
<li>⚡️ State -3px = 120px</li>
<li>? Color -2px = 121px</li>
<li>? Container = 123px</li>
<li>☀️ Shadow -1px = 122px</li>
</ol>
<img alt="" src="http://ift.tt/2o6xfXg">A necessary evil
<h3>Step 6: Nesting the Symbols</h3>
Now that we’ve created our base layers, named and sized them, we can (finally!) start turning them into symbols, leaving out only the “? Container” which will act as a mask (Sketch doesn’t allow for symbols to function as masks). Speaking of ‘mask’, let’s make the container a mask already — select the layer and hit control+cmd+M.
Cool, go ahead and turn the remaining layers into symbols: Select the layers individually and hit “Create Symbol” item in the toolbar, or choose “Layer › Create Symbol” in the menu.
<img alt="" src="http://ift.tt/2op7Sfl">The birth of a Nested Symbol. Isn’t it beautiful?
As it’s already clear from the Inspector, we can now to toggle states. To try play around with the symbols, and see how it works.
<h3>Step 7: Resizing the Symbols</h3>
Done playing? Nice. Let’s adjust the size of the symbols in the “Button/Straight” to get a coherent button. Jump to the Symbols.
<img alt="" src="http://ift.tt/2o6iCDf">
Okay, now give the symbols the same size in the Nested Button Symbol to iron out the short right sides. In this example, I give all the rectangular layers the same width as the container.
<img alt="" src="http://ift.tt/2opgUJj">
For the ? Text Symbol, we’ll give a resizing property of “Resize Object”, meaning if change the size of the Nested Button Symbol, the text will keep it’s position and adjust accordingly
<img alt="" src="http://ift.tt/2o6sCwu">
<h3>Part III: Adding variations of the Root Nested Symbols</h3>
We want our Nested Button Symbol to be more versatile than what we’ve got already. The way we go about this is to clone the Symbols we made and then manipulate them as we please. For each new variation, we add of a Root Symbol, we’ll follow the same pattern:
<ul>
<li>Duplicate</li>
<li>Edit</li>
<li>Name</li>
</ul>
It’ll make sense once we start adding variations of each symbol. Let’s begin with the color variations.
<h4>? Color Variations</h4>
For this example, we want three colors— primary (which we already made), secondary and tertiary. Really, the number of colors doesn’t matter. We could make 1 to a million different colors just by duplicating our base color symbol.
On the Symbols page, select the “ ? Color Symbol” and make 2 duplicates and give them colors of your choice.
<img alt="" src="http://ift.tt/2opeBWO">
Notice how the “? Color Symbols” are named? We are using the Root name, followed by a slash (“/”) and then the name of the instance. Pay attention to the slash. It’s a naming convention we’ll be using from this point on. The reason why is that the “/” is effectively organizing the Symbols into categories. This will be clear when we acces the Symbols list.
Neglecting to categorize your Symbols in a consistent manner will quickly make them confusing to work with. We don’t want that. On that note, Sketch is super unforgiving when it comes to naming: The slightest deviation from the naming convention eg. an extra space between icon and root name, will be treated as two separate categories.
If you want, you can go back to the artboard and toggle the colors of the button to see if everything’s working as intended.
<h4>⚡ ️State Variations</h4>
Alright, let’s add some ability toggle the states of the button. We want to be able to toggle between: Default, Pressed (already made), Hover, Disabled, and Loading. That leaves us with 4 duplicates so go ahead and make those.
Default For the default state, we basically just remove the fill from the shape.
Hover Remember the rule of Light Comes from the Sky? Elements elevated from the interface will catch more light and thus appear lighter. Therefore, we’ll set the fill to white and give a something like 20% opacity. If you’re following a different framework or another set of UI guidelines, follow those instead.
Loading (Optional) If you want, you can add a loading state to your button also. Place a loading icon in the Symbol and center it. Set its resizing property to “Float in place” so it won’t stretch like a rubber band if you chose to resize you Nested Button Symbol later on.
Disabled Using disabled, we want to communicate “Zero Interaction Possible”. One way to achieve this is by giving the Symbol a white layer with an opacity of 50–60%.
<img alt="" src="http://ift.tt/2o6pocu">Different instances of the same Nested Button Symbol
“What about the Focused state?”, you might ask. Good question! There’re two ways to go about this. One, and the easiest, way is to simply make another duplicate of the ⚡️ State symbol, remove the fill and give it a colored inside border. Or, if you following the <a href="http://ift.tt/2nDvMD1">Material Design Guidelines</a>, you simply make the fill black with 12% opacity. This is totally feasible. But in many other cases, the focused state is presented as a contrast-colored border around the element. Because we’re using the ? Container as a mask (or “cookie cutter”), nothing escapes its boundaries. In this case, we actually have to edit an instance of the ☀️ Shadow Symbol and give it an outside border. Kind of a tedious workaround so do whatever fits your project.
<h4>? Text Variations</h4>
You might wanna add different color variations of the text, but for this tutorial, we’ll stick with white text only. Because the text layer is placed at the top of the Nested Symbol hierarchy, it won’t be affected but changes in states. And that’s good. But if we toggle the Disabled-state, we want the text to be affected as well. Therefore, we’ll make a duplicate of the text layer and set its opacity to 80%.
<h4>? Inner Shadow Variations</h4>
For the time being, we want two variations for the inner shadow: One variation with and one without. You should be accustomed to the process by now: Duplicate the instance of the symbol and remove the inner shadow from the inspector. Remember to name the Symbols accordingly.
<img alt="" src="http://ift.tt/2oph7wh">
<h4>? Shadow Variations</h4>
Final Symbol variation to add. You know you drill, right? Duplicate the Shadow-layer, edit and name it accordingly. Let’s add a larger shadow for the hovered button.
Now, if we return to the Artboard and try to toggle to your new shadow, we might encounter something like this
<img alt="" src="http://ift.tt/2o6qLI1">Not cool.
See, Sketch has this quirk regarding shadows. Toggling Shadow Symbols casting a larger shadow than what is already set in the Nested Symbol, Sketch will cut the larger shadow off short. To fix this quirk, we apply the largest shadow to the Nested Symbol on the Symbols-page.
<img alt="" src="http://ift.tt/2opo9kL">
I wish I could give you a solid explanation for why Sketch behaves this way, but I simply don’t know. So if anybody knows, I’m happy to hear why.
Finally, we’ll add the focused state. Simply remove the fill and add a 2px outside border.
<img alt="" src="http://ift.tt/2o6sE7A">
<h3>*Part IV: Adding New Shapes of the Button</h3>
What if you to add other shapes of buttons? Say, if you want a rounded button? To do this, we’ll duplicate the Button Symbol and adjust the container to give us the shape we’re going for. In this regard, it’s important to adjust the shadows accordingly by giving them the exact same border radius as your container. Otherwise, the shadow casts but the button will look incoherent.
<img alt="" src="http://ift.tt/2opbxtz">Rounded button casting a rectangular shadow just doesn’t feel right.
So, if we want to add more button-shapes, we’ll use the Duplicate-Edit-Name-pattern. For the added variations, I use the “/” to determine which Nested Button Symbol the shadow belongs to, and then I give it a name for the instance, like so:
<img alt="" src="http://ift.tt/2o6jnwd">
<h3>Wrapping Up</h3>
Alright, we made it all the way through! We’re now able to make ourselves some Nested Button Symbols with ability to toggle colors, states and shadows. Well done!
As it’s probably clear, working with Nested Symbols in Sketch both has its advantages and its set-backs. On the plus-side, we only have to consult one central place to make changes systemic changes which means time saved in the end.
The centralized management of symbols can be a doubleedged sword, though. Especially if we want to make changes to your component. This means switching back and forth between the Symbols-page and our artboards to see how the instance of the symbol will look in the context of the UI. Also, working with shadow symbol is still kinda clunky. I hope our friends at <a href="https://twitter.com/bohemiancoding?lang=en">Bohemian Coding</a> will make up for this at some point.
On a final note, working with Nested Symbols does some amount of — You to have a pretty clear picture about which direction you’re going. As such, I’d recommend making this using the Nested Symbols in the later stages of your design process.
<iframe src="http://ift.tt/2op9xln" width="670" height="670" frameborder="0"><a href="http://ift.tt/2o6piRT">http://ift.tt/2o6piRT</a></iframe><img alt="" src="http://ift.tt/2op5LZc">Hi there!
Need a freelance UX/UI designer? <a href="mailto:niels.koelmeyer@gmail.com">Let’s talk!</a>
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2lIYHWK">http://ift.tt/2lIYHWK</a></iframe><img src="http://ift.tt/2op7GwW" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2ou2U01">Nested Button Symbols: The Complete Guide</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Nested Button Symbols: The Complete Guide

Introduction

Top Stories