Editing Symbols

There are two main ways to edit a Symbol. You can edit the contents in the Symbol Source, or you can edit individual instances with overrides.

How to edit a Symbol Source

Before you can edit a Symbol Source, you first need to navigate to it. There are a few ways to do this:

• If you’re using a Symbols page to organize your Symbols, go to it and edit the layers on the Artboard for your Symbol.
• If you aren’t using a Symbols page, you can look for the Symbol’s Artboard on the Canvas and edit the layers.
• Select any instance of the Symbol on the Canvas and either hit ⌘⏎ or click on Edit Source in the Design tab of the Inspector — this will take you to the Symbol Source Artboard.
• In nested Symbols use the arrow icon next to the Symbol’s name in the Overrides section of the Inspector.

Tip: Press ⌘ and click inside a Symbol to instantly select a nested Symbol or a shape you’re using as a background. After doing so you’ll see a Back to Parent button on the top left of your selection — click the button to return to the parent Symbol again.

Any edits you make to the Source will sync to any instances of it in your design. When you’ve made your changes, click Back to Instance to head back to the instance and see how your changes have synced across.

How to customize Instances with 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.

How to use 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

How to use 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 .

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.

How to use 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 .

How to override 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.

How to override nested Symbols within a Symbol

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.

How to override prototyping Hotspots

The Inspector also shows all available Hotspots in the Overrides panel. If you’ve added a Hotspot to your Symbol Source as part of a prototype, you can override its target Artboard, or select None to disable it.

How to hide and show 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.

How to reset 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.

How to detach a Symbol Instance from a Symbol Source

To make edits to an individual Symbol instance without using overrides, you’ll need to detach it from its Source by choosing Layer > Detach from Symbol from the menu or pressing ⌘⇧Y. You can also Control-click on a Symbol instance and choose Detach from Symbol there.

Right-click on any instance to detach all contents from the Symbol Source. This will convert any instance, and any nested Symbols it contains, to groups. You can also detach content from a Symbol pressing ⌥⇧⌘Y or heading to Layer>Detach All Contents from Symbol in the menu bar.

How to swap Symbols

You can swap Symbols using the popover in the Symbol panel in the Inspector. Choose a Symbol from the list or search for the Symbol you’re looking for and click to swap it with the currently selected Symbol.

By default, swapping a Symbol will resize the instance you‘ve selected to fit its new Symbol Source. To keep the instance size the same when you swap Symbols, uncheck the ‘Swap at Original Size’ option at the top of the Components Popover.

Note: For Sketch 61 and earlier, swapping a Symbol will always keep the size of the instance you‘ve selected the same, regardless of the size of the new Symbol Source.

How to scale and resize Symbols

You can scale and resize Symbols like any other layer or group, using the Scale command. Choose Layer > Transform > Scale… from the menu (or press ⌘K). Styles and properties like borders will increase or decrease in proportion with the Symbol itself, without affecting the Source.