Sketch symbols explained for Java coders
Hi! My name is Daria and I can write Java code that doesn’t annoy Google engineers. Since January I’m a co-founder of a small startup and since February I’m diving into design because my startup needs it.
In this article I explain Sketch symbols the way I wish they had been explained to me.
I wrote some instructions in italic. Follow them, if you were looking for a way to understand Sketch symbols from scratch.
Don’t watch the video now. I need to tell you something first.
Symbols are classes, instances are instances
The elements which constitute a symbol are fields. Their colours, borders, shadows and positions are the code in the constructor.
Read a page of the official documentation.
The video on it is the same video I’ve included above. Watch it till 2:25.
Similar to passing different values to constructor, you can “pass” different texts and images to symbols. In Sketch it’s called “overrides”. Thanks God, inheritance is not needed to explain Sketch symbols :)
Read another page of the documentation.
As you see, the same video is embedded. Watch it from 2:25 to 4:36.
Also, you can resize an instance without affecting the symbol.
Don’t dive into resizing right now. Just commit to memory that an instance can be resized. Save for later the article I’ve linked and consider reading the docs.
Composition: you can use symbols inside symbols
In Sketch it’s called “nested symbols”. Don’t confuse it with nested classes. Nesting symbols is just using an instance of a symbol inside another symbol.
Read the first paragraph on the page devoted to nested symbols. Don’t read about nested overrides yet. Finish the video.
Polymorphism: symbol dimensions are interfaces
Declaring a field in Java, you often use interfaces instead of exact classes.
In Sketch interfaces are the dimensions of symbols. If 2 symbols have same dimensions they can be swapped inside the enclosing symbol via the overrides panel.
Sketch 41 has arrived with a fresh new look and an incredibly useful new feature: nested symbol overrides. Let's take a…blog.invisionapp.com
Also in Sketch there are 2 more interfaces:
- Image asset. You can override image with any other image.
- Text content. You can override the content of a text element with any sequence of letters.
By default, you can’t swap styles of the texts nested in symbols. The solution is to create a set of equally sized symbols consisting of styled text.
The article below contains great example of styled text symbols. Save it for later. Also, consider exploring the UX Power Tools demo.
Warning: More GIFs than the peanut butter aisle.medium.com
Code generation on keyboard shortcut
Install the Sketch Runner plugin.
You will insert a lot of symbols. Coders love reusable peaces :) So, you need instant access to symbol insertion. By default, Sketch creates an item in the “Insert” menu for every added symbol. But walking through menus is not the hacker way :) The plugin I recommend allows to insert symbols by typing their names on the keyboard.
Style Guide & Best Practices
Version 2: Best practices for designing high quality reusable symbols in Sketch.medium.com
I just repeat the top highlight from the linked article. Nobody likes to inherit a poorly organised Sketch file, so let’s not distribute poorly organised symbols.
Read the guide above and save it to bookmarks.
The new way to think about Sketch symbols is installed into your brain ;)
To complete the installation, practice symbols by following the linked tutorial.
How to use nested symbols in Sketch to build a smart top navmedium.com
I want to thank all the authors of the linked materials:
- Jon Moore, the author of the 2 articles I’ve linked;
- The team behind Sketch and its amazing documentation;
Have you noticed Scott Tolinski face in the Sketch doc video?
His Level Up Tutorials made me understand the basics of Sketch 😉
- Peter Nowell, the author of the resizing cheat sheet;
- Joseph Angelo Todaro, the author of the nested symbols video;
- The team behind the Sketch Runner plugin:
Roy van Rooijen, Sergi Miral, Nikolas Klein and others;
- Lloyd Humphreys, the author of the best practices article.
I would have never understand Sketch symbols without you!
And, finally, special thanks to Vitaly Pavlenko. He is the CEO of the startup I work for. Well, actually, there are only 2 of us in the team :) It was Vitaly’s key decision to not outsource the design and that’s why I’m developing as a designer.
Share this article if you like it
Most of the people following you aren’t following me :) By the way, would you like to follow me on Twitter?
The latest Tweets from Daria Kolodzey (@DariaKolodzey). @SnakifyOrg cofounder / @Phystech student / @Google software…twitter.com
That’s just my first article on Medium. I’m going to write more ;)