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?
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.
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.
The Layer List shows every layer inside a Symbol, not just the ones with Styles applied.
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
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 .
Resetting overrides in Symbols
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.
Hiding and showing overrides in Symbols
Enabling and disabling overrides
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.
Overriding Colors in Symbols
Overriding colors
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
Using text overrides in Symbols
Overriding text
Overriding text properties
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 .
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
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.
Overriding nested Symbols within a Symbol
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 go directly to the Symbol Source and edit it.