Note: This chapter has been written when components were still called “Symbols” in Adobe XD. We will update this page as soon as possible.
Symbols are objects that you can reuse across your artboards in a .xd document, and you can change them all simultaneously by only modifying one instance of them.
Let’s say you have designed a green icon which you placed in 10 different screens of a mobile app.
If you want to make this icon blue, you can do it by only changing the color of one icon (as long as it’s saved as a symbol), instead of changing it 10 different times. As all instances of a symbol are linked together, the change you make will be replicated across all of them instantly.
You can create a symbol by first selecting one or more objects and then using one of the following methods:
- Select: Object > Make symbol
- Right click on the object and select “Make Symbol”
- Use the shortcut CMD + K (Mac) & CTRL + K (Win)
- Click on the “+” icon next to the “Symbols” section in the Assets panel on the left
All the symbols in your document will be visible in the Symbols section of the Assets panel, on the left side of the screen.
If this panel is not visible, you can display it by clicking on the Assets panel icon at the bottom of the left toolbar.
To use a symbol, all you have to do is drag it from the Assets panel onto your artboard. Or you can copy an existing symbol and paste it into another artboard.
All the styling changes (position, color, size, shadow, ..) you will make to one instance of a symbol will be automatically replicated to all other instances.
Text and bitmap changes won’t be replicated, you can have unique text or images for each instance of a symbol. This is very useful if for example you are dealing with buttons having the same visual style but different text.
If you want to make a change to the style of only one instance of a symbol, without having it replicated to all the existing instances, you need to ungroup that symbol instance.
To do that, select the instance you want to ungroup and use one of the following methods:
- Select: Object > Ungroup symbol
- Right click on the symbol instance and select “Ungroup Symbol”
- Use the shortcut CMD + Shift +G (Mac) & CTRL + Shift +G (Win)
Making text and image changes to all symbols
As we mentioned above, if you want to make a text or image change to only one instance of a symbol, you don’t have to ungroup it from all other symbols: text and bitmap changes are not propagated across all symbol instances.
If you want a text or bitmap change to be propagated across all instances of a symbol, right click on the version of the symbol you want to propagate and select “Update all symbols”.
If you want to remove a symbol from the Symbols section in Assets panel, right click on it and select “Remove Symbol”.