Skip Navigation
Learn design

How to incorporate Symbols into your Sketch workflow

Are you getting the most out of Symbols?

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!

New to Symbols? Check out our intro series.

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.

You can view all your colors in a grid or a list view, and hover over them to get handy information like names or Hex values.

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.

Check out our page on [Handoff](/handoff/) to learn more in Sketch

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

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free