Symbols are pre-built elements that, when changed, also change every copy — to an extent. Editing the original symbol will change the copy except for certain edits, like text changes and multistate elements’ default states, that you make on each instance.
For example, you can change the text inside an individual button without changing other buttons based on the symbol. But if you change the master symbol’s background color, every instance of it will change, regardless of their text.
To make a symbol, select one or more elements and right-click or type opt/alt-S. Doing so will create a symbol in the current prototype, not your design system — more on that in a moment. Copy/paste the symbol, or opt/alt drag it, to make a copy. Double-click any copy of a symbol to edit its contents.
Add a symbol to your design system
Symbols fall under the UI Patterns section of your design system. To add a symbol to the system so your team can use it, select a copy of the symbol, scroll to the bottom of UI Patterns, and click “add symbol.”
Create a symbol by right-clicking an element or elements on the canvas and choosing the “+ symbol” tile. Double-click its title to rename it. Once it’s in your UI Patterns, drag it from UI Patterns into your canvas to create a new instance.
- Article: Design Systems Sprint 1: The Interface Inventory
- Tutorial: How to Find Your Team’s Design Assets in a Hurry (Hint: it’s More Than a Name Game)
- Get a free trial