I love Sketch. A mentor of mine turned me onto it a little over a year and a half ago, and once I got the hang of it, I haven’t looked back. The program couldn’t have come at a better time in my life. I was working on a massive application design and we had just decided to change something in the nav, something that was on every page. I was working in Illustrator, and had to spend two days going through every page, making sure the spacing and layout was right. Once I got onto Sketch, I never had that problem again. Thanks to Symbols.
What are Symbols?
For those who don’t know, Symbols are groups of elements, or event single elements, that you can copy and place anywhere. When one of the symbols are changed, the rest of them are updated. There’s no “Master Symbol” to worry about, just change a height, or a font, and it will be updated across your project. Copy and paste the Symbol to another project and the symbol will be automatically created in the file for you. This applies to everything inside the Symbol. This is great. Except when it’s not.
The Problem With Symbols
What happens when you have a global element but hover states and information needs to change between pages? This becomes a problem with Symbols, since one change affects all of the screens. I have always wished for a way to use Symbols much like the way you use a “copy and paste preset” in Lightroom. You copy it, tell it what elements you want to copy, and then paste. But not in Sketch.
This posed a problem for me for a while, so much so, that I kinda gave up. I can’t tell you how many times I’ve been in a meeting and someone calls Page A, Page B, just because the hover state was still on Page A. But while working on SOCIY, I discovered something interesting. I figured out how to make “Smart Symbols”.
So, what are Smart Symbols?
I’m glad you asked. Smart Symbols are simply Symbols nested inside groups. You first create the base layer, including the elements that won’t change on each page. For example, the logo, a search icon, colors. Then you layer that with things that will change. In my case, the page title, breadcrumbs, and a hover state to let the person using the prototype easily know what page they are on and give it a feeling of more legitimacy.
In this example you’ll see that the primary-nav is in the base layer. Even though the Hover state affects the nav, changing the color, and adding a stroke underneath it, I kept it in the Symbol(the base layer). I do this because if a font change occurs, or more likely, spacing, I can easily change that in one place, and have it updated across the board. Then its just a matter of moving the hover state over the correct primary-nav element. Now, every page has the correct information, and both developers and clients are better informed and more satisfied with the mockups and designs that I deliver.