#Series - Efficient and scalable Sketch documents - Part One: Symbols

UI Therapy | UI Design and Development Podcast

UIT 8: 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!
Full show notes available at https://uitherapy.fm/episodes/8

Links

• Great Ormond Street Hospital
• Sketch
• Sketch: Symbols
• Sketch: Smart Layout
• Sketch: Resizing
• Sketch: Fix Size
• Sketch: Pin to Edge

Support the show