How to edit Symbols and set resizing options

Today, you’ll learn how to edit Symbols and how to make sure each instance works for you. Still not quite ready for this? No worries — check out this post to learn about what Symbols are and how to create one.

As you now know, Symbols are a great way to populate your designs with repeating elements. However, there’s a lot more to Symbols than meets the eye. Symbols shine when it comes to components that should be almost the same, but not quite. Perhaps a specific Symbol instance needs to be bigger, or the text or style should be different. Whatever your needs, knowing how to insert and edit Symbol instances is one Sketch skill that can open up a world of possibilities for you and your designs.

Inserting Symbol instances into your designs

First of all, let’s make sure you know how to insert the Symbols you create into your documents. There are two main ways to do this — and you can use whichever works best for you.

• The Insert Window. You can open the Insert Window by pressing C or clicking Window > Insert in the menu bar. Search for the Symbol you need, then drag and drop it into your Canvas.
• The Insert Menu. Alternatively, you can insert a Symbol by clicking Insert > Symbol in the menu bar or selecting Symbol in the Insert Menu +.

In the next section, we’ll teach you how to edit these individual instances — without affecting the rest.

Editing Symbol instances

In a previous post, we talked about creating a web button Symbol that you could reuse for different purposes. You can edit certain elements of a Symbol — such as text values — directly in the Symbol instance without affecting the Symbol Source (or any of the other instances). This makes it easy to edit individual buttons to include different copy. Simply double-click on the text layer and type in the new button label. For example, you could change a homepage button to ‘Find out more’ or a payment screen button to ‘Confirm’.

Using overrides

The best way to edit instances is through the Overrides panel in the Inspector. Here, you’ll find a list of every editable element within your Symbol grouped by type. The logic here is that your Symbol Source will function as a template. Then, you can edit its instances by overriding elements such as Layer Styles, colors, text properties and images. Since overrides are organized by type, you can also make bulk changes through the panel in the Inspector.

Note:** Easily edit any text layer — whether it’s part of a group or a Symbol — with the T shortcut.

Editing Symbol Sources

Although you’ll mostly be editing Symbol instances, there are times when you’ll need to make changes to an existing Symbol Source. For example, if you hadn’t added any text to your button Symbol, you can go back and insert a placeholder copy, such as ‘button label’. That way, new and old instances of this Symbol will immediately gain a text layer for you to edit — which you’ll see immediately in the Overrides panel.

There are two ways to access your Symbol Source. The most straightforward way is to use the ⌘↵ shortcut. If you choose this option, you can click on Return to Instance in the top-left corner of your Canvas when you’re ready to see how your updates look in context. You can also find your Symbols through the Components view. Here, you can double-click the Symbol or select Edit Symbol Source from the Inspector. This is useful when you have many Symbols as you can search by name.

Additionally, you can edit Symbol Sources directly from the Symbols page if you have one in your document (this is a page we generate when you create your first Symbol in a document, though you can choose not to).

Resizing options

As you start populating your designs with Symbols, you may need to start resizing instances to fit different spaces and layouts. By setting size and pinning properties, you can make sure that specific layers in your Symbol keep their original size, no matter how far you stretch the instance.

For example, you might have a Symbol that contains an icon and body text. This icon should always stay the same size, even if you stretch the Symbol to fit in more text.

To find the size and pinning properties, first navigate to the Symbol Source and select the element you want to control. Under the Resizing section of the Inspector, you will see the Pin to Edge and Fix Size options.

Pin to Edge

With this option, you can pin an element to a specific location within your design. This is really useful for keeping headings centered across different sized screens, or for making sure your Close button always stays in the top-right corner of your Artboard, for example. The edges you select will turn orange — and you can add as many as you need to make sure your element stays pinned to the exact spot you want.

Fix Size

The Fix Size option functions in a very similar way as Pin to Edge, with your selection turning orange. The option allows you to choose between fixing the size of the element vertically, horizontally, or both. By activating both resizing options, you can lock the size of that element for every instance.

You can also apply these functions at an instance level by clicking on a Symbol instance in your Canvas and editing from the Inspector.

What’s next?

We’ve already covered a lot of ground! Next time, we’ll talk about staying organized. That way, you’ll be ready to take on more advanced Symbols techniques while keeping all of your current Symbol Sources and instances in order. See you then.