How to organize your Symbols and manage overrides
Learn how to keep your Symbols organized and ready to populate your designs
In this post, we’ll be taking a look at how to keep your Symbols organized. That way, you’ll be ready to dive into even more complex Symbol editing, which will help you unlock a wider range of design possibilities.
If some of these concepts sound unfamiliar to you, check out our previous posts on Symbol basics and editing and resizing Symbols.
Once you start getting the hang of Symbols, you’ll probably start implementing them everywhere in your designs. And while this is great for speeding up your workflow, the sheer number of Symbols can sometimes make it difficult to find the one you need. Learning how to organize your Symbols effectively will help you breeze through the more repetitive tasks in big projects, such as updating logos or adding buttons.
By the end of this post, you’ll be able to maintain and update your Symbols without needing to wonder which instance is attached to what.
Getting to know the Symbols page
When you create your first Symbol in a document, we’ll ask if you want us to generate a Symbols page. If you say yes, we’ll add all new Symbols to this page as you create them.
If you pass on the Symbols page, any new Symbols will appear in your Canvas.
For everyday projects, the Symbols page is more than enough to keep everything organized. However, you can always create multiple Symbols pages if you want to divide them into more sections. If you’re going with this approach, we recommend you name your Pages to reflect what you’re storing there, such as “Icons” “Buttons”.
As you move along, remember that you can always use the ⌘↵ shortcut to jump straight to the Symbol Source. So there’s no need to memorize where you put each one!
How to name your Symbols
First things first: naming conventions. When you’re working with Sketch, new layers come with standard names such as “rectangle”, “oval”, or “line”. While this is handy for quickly identifying the kind of layer you’re selecting, it can get confusing when it comes to big projects. In other words, always name your layers, folks!
For example, how can you distinguish between five rectangle layers? We recommend naming your layers after their function — such as replacing “rectangle” with “Background” or “Header”.
You can apply the same logic to Symbols. For example, say we take our “rectangle” layer, add a text layer over it and turn it into a Symbol. We can name this Symbol “Button”.
This kind of description will help you find what you need faster. But as your document grows, you might find you have a few different buttons with different colors, styles or sizes. So how do you differentiate between them? Below, we’ll talk about how you can use more advanced naming conventions to keep your Symbols organized.
Grouping Symbols
If you’re using Symbols to their full potential, you’ll likely end up with quite a lot of them. That’s why we suggest grouping your Symbols into as many categories as you need. For example, let’s say you need two versions of your “Button” Symbol — one active, and one inactive.
You can create the alternative versions and name them “Button/Active” and “Button/Inactive”. By applying a “Group-name/Symbol-name” convention, we’ll automatically group these Symbols together.
Naming conventions can help you organize your Symbols quickly and effectively. Here, we’ve named our active and inactive buttons using the same “Button” group in order to store them together.
But how is this helpful?
After grouping your Symbols, you’ll notice that a submenu appears when you try to insert a new Symbol into your document. Here’s how it would look for our “Button” example:
Grouping Symbols can keep your Insert menu organized. By giving our two buttons the name Button/[Symbol-name], we’ve created a new “Button” group that we can use for any other buttons we create in the future.
Using the Components View
The Components View is where you can create, manage, search, and find local Components such as Symbols. In other words, it’s another handy place for grouping your Symbols. To do so, hold ⌘ and select the Symbols you want to group. Once you’re happy with your selection, control-click on any of the selected Symbols and choose Group in the contextual menu.
Your Symbols will be now listed as “Group” in the left sidebar. Control-click on Group and select Rename to give a title to your Symbol group.
You can also group Symbols in the Components View, which works the same way as manually renaming your Symbols. By renaming the group to “Buttons”, your “Active” Symbol will now become “Button/Active” and so forth.
Limiting overrides
Another way to keep things tidy is by limiting the number of overrides available. As we discussed last time, the Overrides panel in the Inspector automatically groups all of the editable items in an instance by type.
But what if the list has gotten a little out of hand? You can go back to your Symbol Source and disable some of the override options under Manage Overrides. A good place to start is by disabling those override types you know you won’t be using. By doing this, those overrides will no longer appear as editable options when you select an instance of that Symbol. This way, you can focus on editing only the elements you wish to change.
If you don’t want anyone overriding specific parts of your Symbol — such as color or text — you can disable those overrides in the Inspector. Don’t worry, though! You can always reenable any override options if you need them later on.
This is especially useful if your document is part of a design system that lots of people use. By limiting what people can edit in a Symbol, you can ensure that others can’t alter elements such as your logo. In the same way, this can help you signal to other designers in your Workspace what they can tweak within each component.
What’s next?
You’re well on your way to becoming a Symbols expert! Next time, we’ll be taking a look at complex Symbols so you can gain even more flexibility in your designs. Stay tuned!
