New: Smart Animate — Bring movement to your prototypes. Learn more

Skip Navigation

Overrides

Last updated on 26 Jul 2023
6 min read

With overrides you can easily change the content or style of Symbol instances without affecting other instances, or the Symbol Source. In this section you’ll find out how to apply and manage overrides with colors, text properties, images and Layer Styles.

Overriding a Text Style

There are two ways to override a Text Style that you’ve applied to a layer within a Symbol:

  • Swap the Style for another, for either the whole Symbol instance or for a specific layer within it.
  • Override attributes of the Style on the layer within the Symbol instance.

Note: Changing Styles won’t affect your existing individual overrides.

You can limit what people can override in your Text Styles by navigating to the Symbol Source and using the Manage Overrides options in the Inspector.

Overriding a Layer Style

There are two ways to override a Layer Style within a Symbol:

  • Swap the Style for another one, for either the whole Symbol instance or for a specific layer within it.
  • Override Style attributes on the layer within the Symbol instance.

Note: Changing Styles won’t affect your existing individual overrides.

You can limit what people can override in your Layer Styles by navigating to the Symbol Source and using the Manage Overrides options in the Inspector.

Customizing Instances with Overrides in Symbols

What are Symbol Overrides?

Watch lesson

Symbol overrides are a great way to take consistent elements of your design and customize them for different situations.

Select a Symbol instance and you’ll see an Overrides section appear in the DESIGN tab of the Inspector. By editing these overrides in the Inspector, you can change the content inside an individual Symbol instance without changing the Source or affecting any other instance of it.

Editing a Symbol instance’s overrides in the Mac app

Note: You can also override text within Symbol instances directly on the Canvas.

When you select a Symbol, you’ll 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 will only show overrides that you’ve applied to your Symbol. For example, if there aren’t images in a Symbol, the Images section won’t appear. Because these sections group overrides of the same type, you can easily make bulk changes to colors, Styles, text, and images throughout a Symbol.

If you want to override something in an individual layer inside a Symbol, double-click to dive down into Symbol instances and select the layers within. You’ll see the Overrides section of the Inspector updates to only show you the overrides for the specific layers you select. This way, you can focus on just the overrides you want — great for complex or nested Symbols.

Selecting layers in a Symbol on the Canvas in the Mac app

The Layer List shows every layer inside a Symbol, not just the ones with Styles applied.

Navigating through a nested Symbol in the Layer List in the Mac app (v94 October 2022)

You can hide (or show) Symbols on the Canvas by clicking on the eye icon in the Layer List, or by hitting H.

Overriding images in Symbols

Overriding images

Watch lesson

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 Circle data button.

Resetting overrides in Symbols

Resetting Overrides

Watch lesson

Select any instance and click the reset icon Arrow counterclockwise next to the Overrides panel title in the Inspector to remove and reset any overrides you’ve applied to it.

Need to start over? Reset overrides on a Symbol instance in seconds.

You’ll also find reset buttons in the individual override sections.

Hiding and showing overrides in Symbols

Enabling and disabling overrides

Watch lesson

Select your Symbol Source and use the checkboxes next to each available override in the Manage Overrides panel in the Inspector to choose which ones will be available when you select that Symbol’s instance anywhere in your design.

Manage overrides easily by toggling them on and off

Overriding Colors in Symbols

Overriding colors

Watch lesson

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 List View or grid Grid View 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

Swapping a color in a nested Symbol’s overrides in the Mac app

Using text overrides in Symbols

Overriding text

Watch lesson

Overriding text properties

Watch lesson

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 Circle data button.

Note: If your override text is longer than what was originally in the Symbol Source, we’ll move any layers next to your text layer as it expands. If you want to fix layers and have text flow over them, you’ll need to lock them in the Symbol Source.

Overriding Text and Layer Styles in Symbols

Overriding Text and Layer Styles

Watch lesson

If you’ve set up Text Styles Styled Text tool 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.

Overriding nested Symbols within a Symbol

Overriding Nested Symbols

Watch lesson

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.

Swapping nested Symbols in a Symbol’s overrides in the Mac app

You can use the arrow icon Forward arrow to go directly to the Symbol Source and edit it.