Benefits of working with Symbols in Sketch

Feeling like your workflow could use a little power-up? Let’s talk Symbols! Maybe you’ve played around with Symbols but haven’t integrated them entirely into your workflow. Or you might be new to Sketch (welcome!). Whichever the case, this post is for you.

Below, we’ll walk you through the key ways in which Symbols can help you design better and work faster. You’ll likely find a few uses you hadn’t thought of before!

But first, a quick refresher.

What are Symbols again?

In simple terms, a Symbol is a special type of Artboard that contains layers you can repurpose and update everywhere. You can replicate Symbols infinitely across your project, making key parts of your designs easy to reuse anywhere in your document.

Overall, Symbols are a huge timesaver for designers and your team. If you’re new to Symbols or looking for a refresher, check out our guide on how to create Symbols in Sketch.

Benefits of working with Symbols in Sketch

There are many benefits to working with Symbols, from helping you stay consistent to making impactful changes across your document with just one click. The more complex the project, the more helpful Symbols can be.

They help you work faster

Symbols are great for creating reusable elements in your design that are easy to edit and update. Good examples of Symbols are buttons or icons. Let’s say you’re done designing your first button for an app. You can turn that button into a Symbol and easily reuse it across your app’s design.

If you feel like changing the look and feel of your button, you can tweak the Symbol’s source, and all of their other instances will follow. So no need to worry about wanting to change your logo’s color or your button’s copy later on.

They make your designs more flexible

With nested Symbols, you can place simple Symbols (like a button or logo) inside a larger one, such as a navigation bar. This helps make your designs more flexible because you can edit each piece individually while keeping everything in sync. For example, if you update your logo, it’ll also change within the navigation bar.

You can also apply Smart Layout to Symbols, to make them resize automatically if their content changes. For example, if you change a button’s label from “Home” to “Go Home”, the button itself can automatically resize to preserve padding and spacing. Check out our Smart Layout documentation for more details.

They let you iterate with ease

Overrides are your best friend when you need to make changes to your Symbol instances. In the Overrides panel, you’ll find a list of every editable element within your Symbol, making it simple to swap, edit or hide them however you like.

Let’s say your design has three instances of the same button. You can use the Overrides panel to change the color, Style, or text without affecting the Symbol Source. Another option is creating a new Symbol with an alternate design and using the Overrides panel to swap it in — handy for inactive state buttons or secondary logos.

They make collaboration intuitive

Symbols help simplify collaboration in several ways. If you want to let your collaborators know they shouldn’t edit certain Symbols, such as logos, you can do so by unchecking those options in the Overrides panel. This way, they won’t even appear as editable unless they can make changes to the Symbol Source.

In the same vein, you can create different versions of your Symbols so that collaborators already know what the available design variations are. It’s a great way to point them in the right direction without needing to sync on every change. You can also include your Symbols in a Library so that your whole team can use the same elements across multiple documents.

They help simplify handoff

Whenever a developer inspects a Sketch document, they can easily tell when something is a Symbol. They have a distinct purple outline that also links them to the Symbol Source. Because developers know that Symbols are repeating components, they can safely write the code once and reuse it across the project. Plus, they can copy the CSS code right from the web app.

We hope this post has given you a better idea of what you can do with Symbols. The next step is upping your workflow game 🚀