Symbol Overrides

When you select a Symbol instance in the Canvas, you might notice a list of Overrides in the Inspector, under the Symbol picker.

Overrides allow you to edit parts of your Symbol instance—so they keep the same basic elements defined in your Symbol—but allows them to have their own individual content, such as containing specific text, or images you might only need to appear once.

There are several override types which appear automatically depending on the type of layers your Symbol contains, and they’re organized by layer in the Inspector.

If there are no overrides present, you will see the default values from the Symbol’s master.

Nested Symbols

When a Symbol contains another Symbol, that is now nested. With overrides, you can swap out any nested Symbol, via the pop-up button in the Inspector with any other Symbol that is the same size, no matter if it belongs to the document, or to a Library.

You can also choose to display ‘None’, effectively hiding that Symbol from certain instances.

These nested overrides mean that you can have fewer Symbols that are similar, and have more power and control over individual instances.

Text

Symbols that contain text layers can have both their contents, and Text Style (if applied) overridden.

You can see the text layer’s original contents in grey, in the override field. Type into this and hit enter to apply your override. Clearing the field will reset the text back to what has been defined in the Symbol master.

Additionally, you can click the Data icon, to the right of the layer’s name in the Inspector, to automatically apply your chosen data source to the override.

When you update the text contents, its total length may change. As a result, Sketch will automatically move any trailing layers on left or right aligned text, and respect the distance between it and the end of the text layer so you can fully take advantages of Symbols and overrides, no matter your design.

To prevent a trailing layer’s position to update when editing a text override, simply lock the layer by Control-clicking it, and choosing “Lock Layer” from the shortcut menu.

Images

Any image layer, or shape that contains an image fill in a Symbol can be overridden. You can select Choose Image… to add an image from your computer, or drag one onto the image preview to the right.

Like text, you can also apply an image from a data source as an override by clicking the Data icon next to the image layer’s name.

To remove an image override, click the image preview and press the Backspace key.

Text and Layer Styles

Overriding a Text Style allows you to swap the style of the text layer with any other style in your document, or Library. Perfect for being able to change a text’s color if you defined two similar text styles.

Similarly, you can also override a Layer Style in the same way, by choosing a saved style from the pop-up menu.

Resetting Overrides

If you have made a number of overrides to an instance, and would like to reset them to what is being used in the master, click the Reset icon at the top of the overrides section.

Last modified on Oct 02, 2018

Was this article useful?

Yes
No

We’re really sorry about that.
Please let us know what you were looking for:

If you need more help or you’d like to report a bug with this content, please contact support.

Thanks for your feedback.
An error occurred, please try again later.

Start working faster today

Available exclusively on the Mac for just $99.