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.

Read the nested overrides section on the nested symbols documentation page.
Watch the video from the
InVision blog.

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.

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

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.

That’s it!

The new way to think about Sketch symbols is installed into your brain ;)

To complete the installation, practice symbols by following the linked tutorial.

Thanks!

I want to thank all the authors of the linked materials:

I would have never understand Sketch symbols without you!

Also I want to thank David Kadavy for motivating posts and D4H video Motivation Overdrive.

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?

That’s just my first article on Medium. I’m going to write more ;)

Show your support

Clapping shows how much you appreciated Daria Kolodzey’s story.