Symbols

Symbols allow you to turn elements and their child elements into a reusable layout — update and edit symbols in a single place to avoid revising each recurring layout individually. 

Symbols can be used in 2 main ways:

1. Identical content per instance. Create identical copies of recurring layouts that have the exact same content, like nav bars, footers, and sign-up forms. Edit them in one place and see those changes impact every instance of that symbol.
2. Unique content per instance. Create content overrides fields for text, images, or videos in a symbol to reuse symbol layouts while giving each symbol instance unique content.

In this lesson

1. Create a symbol
2. Define override fields
3. Use a symbol
4. Edit a symbol
5. Unlink a symbol

Create a symbol

You can create a symbol from any element or group of elements in your project, except for the body element. 

To create a symbol:

1. Select the element you want to turn into a symbol
2. Right-click and select Create symbol
3. Give the symbol a name and press Create symbol

Once you've created a symbol, you’ll be placed in the main mode of the symbol. All changes in the main mode will update across all instances of that symbol. You can enter main mode on any instance by double clicking (see Editing the main symbol).

Shortcut keys

You can also create a new symbol by pressing the shortcut keys on your keyboard: Command  + Shift + A (on Mac) or Control + Shift + A (on Windows). This will create a symbol from whatever element you have selected.

If an element is nested inside of a symbol, you won't be able to save that element as a symbol as well. Nested symbols will be coming in the future.

Define override fields

Override fields let you define specific elements within a symbol that can be overridden with unique content on a symbol instance. This is great for recurring layout patterns whose structure should be uniform, but that have unique content in each instance. (Read more about symbol overrides in our announcement blog post.)

To create an override field: 

1. Double-click to enter main edit mode for the symbol
2. Select the element you want to create an override field for
3. Click the purple dot icon in the Settings panel to create a field for this element
4. Give it a name based on the function in the design

You can also create an override field while editing the main symbol directly from the settings panel and connect those fields to elements within a symbol.

If you’re creating a symbol that will have the exact same content in each instance (like nav bars, footers, and some forms) you don’t need to create override fields for that symbol.

Eligible element types for override fields

You can create overrides for the following types of elements:

• Text fields (e.g. paragraphs, headers)
• Image elements
• Video elements
• Links (buttons, link blocks)
• Rich text elements

Future support for style overrides is under development.

Use a symbol

Access symbols from the Symbols panel. (Shortcut: Hit Shift + A to open directly to your symbols.)

Once you’ve created a symbol, you can reuse it anywhere in your project. 

1. Open the Symbol panel
2. Click and drag the desired symbol to any page in your project
3. Drop the symbol instance directly on the canvas or in the Navigator for more precision

When you select an instance of a symbol, you’ll see it highlighted and outlined in green. Click the Style panel to see how many times that symbol appears your project.

You can also add symbols onto the canvas using Quick find with Command + E (on Mac) or Control  + E (on Windows). Learn how to use quick find.

Apply content overrides to symbol instances

To apply content overrides for elements in a given symbol instance:

1. Click on that instance
2. Edit the content for each override field from the symbol’s settings panel
3. Open the settings modal for that symbol by clicking the gear icon on that symbol instance. 
   

To revert an override to the default content of that symbol, click the label to reset all your overrides at once.

Learn how to apply content overrides to symbol instances.

Edit a symbol

Edits to the main symbol will affect every symbol instance (unless that symbol instance has a content override applied to a specific element). You can change the structure and element order of all symbol instances at once from the main symbol.

To edit a symbol, double-click on an instance or select it and press enter. Once you enter edit mode, you are making changes to the main symbol.

Delete and reconnect elements to override fields

If you delete an element from the main symbol, each corresponding element in other instances will also be deleted (even if they’ve been overridden with unique content). You can add new elements to the main symbol and reconnect them to existing override fields, and each instance will remember and apply the overrides previously set.

Exit out of the main symbol

Once you’re done editing a symbol:

1. Click Back to instance in the top left corner 
2. Or click outside the symbol on the canvas 
   

Once you're out of the main symbol, you’ll be editing that specific symbol instance.

Edit symbols in the Editor

If you’ve invited Collaborators to update your site’s content in the Editor, any changes they make to symbol elements that are consistent across all instances will apply to all other instances. If they edit an element within a symbol that is tied to an override field, edits to that symbol instance’s element will only apply to that symbol instance.

Rename a symbol

To rename a symbol 

1. Open the Symbol panel 
2. Click the pencil icon next to the symbol 

To rename a symbol using Quickfind: 

1. Hover over a symbol instance in the search result 
2. Click the edit icon

Delete a symbol

To delete a symbol completely:

1. Remove all instances of the symbol from the project
2. Open the Symbols panel
3. Click the pencil icon
4. Delete

Unlink a symbol

To unlink a symbol and make changes to it independently:

1. Right-click the symbol label 
2. Choose unlink from symbol 
3. Or (if the element is hard to select) right-click the element in the Navigator

Once unlinked, editing a linked instance of that symbol will not change the unlinked instance.