Components
Components 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 component are linked together, the change you make will be replicated across all of them instantly.
You can create a component by first selecting one or more objects and then using one of the following methods:
- Select: Object > Make component
- Right click on the object and select “Make Component”
- 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
- Click on the “+” icon next to the “Component” section in the Property inspector on the right
Once saved, that first instance of the component becomes a Master Component, indicated by a green filled diamond in the upper left corner.
All the components in your document will be visible in the Components 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 component, 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 you will make to a Master Component will be automatically replicated to all other instances.
Changing the styling of a component instance will not affect the master component or the other component instances. XD marks that change as an override and keeps it as it is even if you return to the Master Component and change its appearance.
To bring a component instance to the default state, right click on it and go to Reset to Main State.
To swap components all you have to do is drag the component from the Assets panel and place it on top of the component you like to swap it with, on the artboard.
Making text and image changes to all components
As we mentioned above, if you want to make a text or image change to only one instance of a component, you don’t have to ungroup it from all other components: text and bitmap changes are not propagated across all component instances.
If you want a text or bitmap change to be propagated across all instances of a component, right click on the version of the component you want to propagate and select “Update all components”.
Ungrouping components
If you want to make a change to the style of only one instance of a component, without having it replicated to all the existing instances, you need to ungroup that component instance.
To do that, select the instance you want to ungroup and use one of the following methods:
- Select: Object > Ungroup component
- Right click on the symbol instance and select “Ungroup Component”
- Use the shortcut CMD + Shift +G (Mac) & CTRL + Shift +G (Win)
Removing components
If you want to remove a component from the Components section in Assets panel, right click on it and select “Delete”.