Efficient and scalable Sketch documents - Part One: Symbols

Episode 8

Play

Efficient and scalable Sketch documents - Part One: Symbols — 27 August, 2020

Apple Podcasts

Show notes

In this weeks episode I start a series on using Sketch to build and maintain efficient and scalable design documents.

Overview

Share with the audience why the absence.
Cover important aspects of symbols in Sketch.
Talk about the future content in this series.

Symbols

Symbols, when used properly, help to vastly speed up your workflow by giving you ways to save and reuse common elements across your designs and design systems. They also form the foundation of Sketch libraries (I will cover this in a future episode of this series).

When you make changes to a Symbol, those changes appear everywhere you use it in your designs. One of the major added benefits of symbols is overrides, which allow you to change specific parts of individual Symbols, without altering the underlying symbol itself.

I cover these symbol subtopics in this episode:

Organise with good naming conventions
Nest symbols, and treat them akin to an atomic symbol
Name the layers inside the symbol with generic names
Create atom variations at equal sizes
Learn how to pin the layers that make up your symbols for correct resizing

Pinning

Before you create a symbol, make sure you spend the minute or so necessary to correctly pin, or anchor, all the elements that make up your component. It makes for drastically simpler and less pain when you eventually find you need to resize them. It’s essential practice for things like forms and buttons. Once you understand the benefits you’ll start setting it on everything!