Overrides

Overrides let you easily change the content or style of Symbol instances without affecting other instances or the Symbol Source. You can apply and manage overrides for nested Symbols, colors, text properties, images, and Layer Styles.

How to apply overrides

Select a Symbol instance to see all the available overrides in the Overrides section of the Inspector:

• All the Colors used in the Symbol
• The Text values you can set for the Symbol
• Any Text Style or Layer Style applied, grouped to show just a single entry for each style
• All the Images used within the Symbol
• Any nested Symbols within the Symbol and Hotspots that they contain

Hovering over any of these overrides will highlight every layer that uses it on the Canvas, so you’ll see every affected layer before you make a change.

The Inspector only shows the overrides you’ve added in your Symbol Source. For example, if a Symbol doesn’t include any images, the Images section won’t appear. Since the Inspector groups overrides by type, you can easily make bulk changes to colors, Styles, text, and images throughout a Symbol.

If you want to override something in a specific layer inside a Symbol, hover over the layer, hold ⌘, and click. This lets you select the layer, no matter how deeply it’s nested in the Symbol. Alternatively, you can double-click to drill down through the layer hierarchy in the Symbol instance.

As you change your selection, the Overrides section in the Inspector updates to show only the overrides that match the selected layer.

Hiding layers in Symbol instances

You can hide any layer inside a Symbol instance. It’s useful to adapt the same Symbol to different scenarios. For example, if you only need 4 menu items instead of the 5 items set in the Symbol source.

There are several ways to hide layers. Select an instance and expand it on the Layer List. Find the layer you want to hide and select any of these options:

• Hover over the layer you want to hide and click on the eye icon to hide it.
• Use the contextual menu: select the layer you want to hide, ⌘ click it and select Hide layer.
• Use the shortcut ⇧⌘H to toggle the layer’s visibility

Hidden layers will display this icon on the Layer List.

Text overrides

You can change the contents of text overrides in a couple of ways. You can double-click on a text layer in a Symbol instance on the Canvas and type in new content, or type into the override field in the Inspector. Deleting anything in that field will change it back to the text in the Symbol Source. You can also use Data to populate text Overrides by clicking on the Data icon .

Styling text overrides

You can use Markdown-like syntax in Symbol instance text overrides:

• Use two asterisks ** for bold
• Use two underscores _ _ for italic
• Use two angle brackets [ ] for underlined text

Or you can select the text on the Canvas and use the shortcuts ⌘B, ⌘I and ⌘U.

Overriding Text and Layer Styles

If you’ve set up Text Styles or Layer Styles in your design, you’ll find these in the Overrides panel in the Inspector. The drop-down lets you quickly swap a Style across the whole Symbol. If you want to override text properties like weight, color or alignment for a specific layer, select the layer in the Layer List or by double clicking through the Symbol on the Canvas, then edit properties in the Inspector.

Image overrides

You can override any image layer or shape with a fill in the Inspector. You can either drag in an image onto the preview, or choose Choose Image…. You can also use Data to populate individual image Overrides by clicking on the Data icon .

Color overrides

The Color section lets you quickly see what colors are in your Symbol. You can override a color across the whole Symbol instance by clicking on it and changing it. Alternatively, you can select specific layers within the Symbol to override colors just in that group or layer. You can toggle between a list or grid view of the colors. Hover over a color to:

• Highlight layers on the Canvas using that color
• Display its Hex value and a list of layers using it

Resetting overrides

Select any instance and click the reset icon next to the Overrides panel title in the Inspector to remove and reset any overrides you’ve applied to it. You’ll also find reset buttons in the individual override sections.

Managing overrides

Select a Symbol Source and click the gear icon in the Inspector next to Manage Overrides — you’ll see list of all available overrides. By default, all overrides are enabled.

To restrict certain overrides, uncheck the box next to their name. To disable all overrides at once, turn off the Allow overrides option at the top.

Overriding nested Symbols

The Symbols section lists which nested Symbols your Symbol contains — you can swap them as you wish. Hovering over the nested Symbols in the list will also highlight them on the Canvas.

You can use the arrow icon to select specific nested Symbol instances and apply overrides to them.