How to incorporate Symbols into your Sketch workflow

When it comes to designing in Sketch, few features are as powerful and as dynamic as Symbols. In fact, many of our customers use Symbols in completely different ways — often to achieve the same results!

Symbols might already be an integral part of Sketch workflow, but do you know how to get the most out of them? Today, we’ll show you how to use Symbols in combination with other features to truly maximize their power.

Symbols 🤝 Color Variables

Color Variables help you keep your designs organized while speeding up your workflow. You can use them to store colors you’ll likely reuse, which will appear as color swatches in the Color Picker.

You can apply Color Variables to any part of a Symbol, whether it’s a fill, border, shadow or text layer within it. This will help you in two ways:

1. Keeping your Symbols updated. Any changes you make to your Color Variables will automatically sync with your Symbols as well.
2. Easily override colors. You can use the Overrides Panel to swap between Color Variables, making it easy to switch between your project’s primary colors.

Symbols 🤝 Styles

Similar to Color Variables, with Styles you can store a set of text or layer styles, reuse them across your designs and even apply them to Symbols. When you make changes to your styles, they’ll instantly update every Symbol that uses them. At the same time, you’ll be able to easily swap them using the Overrides Panel.

Remember that you can double-click to dive down into Symbol instances and select individual layers within.

Symbols 🤝 Libraries

Libraries are the best way to keep your designs consistent across multiple documents. You can use them to store components like Symbols, Text and Layer Styles, Color Variables and Artboard templates. Then, you can sync any changes you make to the source components to any other document using the Library.

So, you can take all the benefits we mentioned before — about combining Symbols with Color Variables and Styles — and multiply them across documents!

Symbols 🤝 Smart Layout

With Smart Layout, you can create designs that automatically resize to fit your content. This feature maintains the padding and spacing between layers in a Symbol when an override changes its size. When you apply it to a Symbol, you can choose between resizing horizontally or vertically.

When working with copy changes, just make sure you’ve set your text layer’s auto height or auto width settings to match the Smart Layout direction.

Symbols 🤝 Handoff

When it’s time for developer handoff, our web app comes into its own. In the web inspector and on the Canvas, we’ve made sure Symbols are easily recognizable as repeating components, so developers can easily spot opportunities to write code once and reuse it across a project. Better still, they can copy the CSS for a Symbol right from the web app.

And there you have it! Did we miss any of your favorite Symbol combinations? Let us know in our forum 😉