Symbols turn any element and its children into a reusable component. Any changes made to an instance of a symbol will update all instances of that symbol across your project. This is especially useful for recurring elements like navbars, footers, or signup sections—instead of updating every instance of these elements one at a time for each page, a symbol allows you to make one change that will affect all instances at once.

In this lesson
  1. Creating a symbol
  2. Reusing a symbol
  3. Unlinking a symbol

Creating a Symbol

You can create a symbol out of any element in your project except for the body element.* For example, you can select the entire Navbar and turn it into a symbol—here’s how:

  1. Select the Navbar — or any other element you want to save as a symbol
  2. Open the Add Panel
  3. Click on symbols to open the Symbols panel
  4. Press Create new Symbol
  5. Give the Symbol a name and press Create symbol

You can also create a new symbol by pressing the shortcut keys on you keyboard: CMD+SHIFT+A (on Mac) or CTRL+SHIFT+A (on Windows). This will create a symbol of whatever element you have selected and allow you to name it.

* Need to know
  • 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.

Reusing a Symbol

Once the symbol is created, you can reuse it anyway in your project. First, open the symbol panel, then click and drag the desired symbol to any page in your project. Just like any element, you can drop the symbol instance directly on the canvas or in the Navigator for more precision.

When you select an instance of a symbol, you will see it is highlighted and outlined in green. Clicking on the Style panel will show how many instances of that symbol there are in your project.


Editing a Symbol

You can edit a symbol from any instance. To start editing a symbol, double-click on one of the instances on the page. Doing this will fade out all other content on your page—this means you are focused on the symbol and able to edit the elements within.

Again, any changes made to styles or content within a symbol will automatically update across all other instances of that symbol. For example, if you double-click into a symbol of a navbar, and edit one of the navlink’s text, every other instance will show the edited text.

Exiting out of a symbol

Once you are done editing a symbol, you can click the X in the top-left of the Designer, click outside of it, or press ESC on the keyboard to exit out of the symbol.


Renaming a symbol

You can also rename the symbol by opening the Symbol panel and clicking the pencil icon next to the symbol.


Deleting a symbol

To delete a symbol completely, all instances of the symbol must first be removed from the project. Then go to the Symbols panel, press the pencil icon and choose delete.

Unlinking a Symbol

You can unlink any instance of a symbol. This is useful if you want to make changes to one instance of a symbol, without affecting all other instances. Unlinking one instance of a symbol will not delete or otherwise affect the symbol in anyway—it will simply make this instance independent.

To unlink a symbol, right click on the symbol’s label and choose unlink from symbol. If the element is difficult to select you can, instead, right click over the element in the Navigator.


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