As a designer, you often create master elements like navigation bars or buttons that are repeated throughout your designs. However, it is challenging when an instance of an element must be customized based on context or layout. In such scenarios, you often end up creating multiple versions of the same foundational element, making it that much harder to maintain your design.
Components (previously known as Symbols), are design elements with unmatched flexibility that help you create and maintain repeated elements like a button while varying the instances of that button for different contexts and layouts. Additionally, you can:
- Modify the master element to propagate to all instances
- Resize an instance independently
- Swap a nested component as an override
- Link and edit components across documents
- Content properties (text and image fills)
- Appearance properties (fill, border, effects, text style and so on)
- Layout of objects inside an instance (size, positioning, layer hierarchy, constraints)
- Structure of an instance (adding and subtracting elements)
Let’s use these workflows to learn how to work with components in a collaborative environment:
A master component is the first instance of a component that you create. You can manipulate or edit the Master Component on canvas and it is distinguished by a green rhombus << icon>>> in the upper left-hand corner of the edit context.
Select an object or group of objects and use any of the following options to create a master component:
From the XD app, select Object > Make Component.
Use CMD+K shortcut.
Right-click and select Make Component.
- Right-click on the selected component in the Assets Panel and select Edit Master Component.
You can copy a Master Component to create an Instance. When instances are created, they:
- Are an exact copy of the Master Component,
- Have the same properties as the original,
- Are intrinsically linked to the Master Component, and
- Are indicated by a green outline with transform handles.
To create multiple instances of the component, press and drag the master component on the canvas while holding the alt key.
You can override the instance properties without breaking its connection with its Master Component. If you change a property in an Instance, XD marks that property as an Override. Overrides are unique changes that will only apply to that Instance, and not the Master Component.
For global changes that you want to affect all instances of a component, make changes to the master instance.
If at any time you want to revert changes or overrides made to an instance, right-click the instance and select Reset to master component.
If a master component is not available on the design canvas:
- Right-click the component instance and select Reveal the Components in the Assets option that takes you to the master component in the Assets Panel,
- Right-click the component instance and select Edit Master Component.
If the master component exists somewhere on the design canvas, XD navigates you to its location. If not, XD creates a master component and places it on the design canvas. (similar to duplicating an artboard).
To update a master from an instance, edit the instance and select Update Master Component from the context menu. All other Instances of the component are updated to the properties of the new Master, except when there are conflicting overrides.
To reset an Instance back to the Master, select Reset to Master Component to discard the overrides made to the Instance
Component Overrides allows you to create master components with instances which can override any of the properties of the master component (such as size, fill color, text, image fill, content, etc.) Changes made to the master component cascades to all instances, unless the modified property has been overridden in an instance. When you edit an individual instance, whatever property is changed to it or its contents becomes an override that applies only to that instance - other instances and the master component are not affected. At any time, an instance with overrides can be resynchronized to the master component. You can also override style and appearance in an Instance.
You can reset any instance with overrides to match the master component at any time and apply overrides to specific parts of a nested component instance.
- To reset the override made to an instance, right-click the instance and select Reset to Master Component.
- To revert any overrides made to an instance, select the instance, right-click and select Revert to Master.
- To push changes to a master from an instance, right-click the instance and select Push to Master.
Component Resize allows you to resize a component on canvas and yet maintain its size as a unique override. Like groups in XD, you can use the transform resize handles to resize or rotate the components directly on the canvas. The default resize mode for component resize is responsive resize that can be toggled off/on in the Property Inspector. You can switch off responsive resize to manually resize a component or use the shift key to perform a constrained scaling resize, like other resizable elements in the application. Not only can you resize an entire component, but you can also alter the layout of the items within.
You can now make changes to instances of components, irrespective of the sizes you’ve adapted them to. Just like with Responsive Resize, XD recreates the placement of your elements on a larger or smaller canvas as you resize them.
Resized components behave like artboards and mask groups in that any child elements repositioned outside the original component bounds are hidden. If you resize the Master Component, all Instances that are not resized are also automatically resized. Consequently, instances that have already been resized preserve their resized position as an override. You can also independently resize an Instance without affecting the Master Component.
There are many cases where you have designed a larger component that has nested components within it, like modals and nav bars that needs an update depending on context.
Swapping a nested component within a Master Component replaces the occurrence of that nested symbol throughout the entire document. Swapping a component within an instance of a component creates a local override only to that instance.
Linked Assets allow you to consume assets (components, colors, and character styles) from one or multiple design files available on the XD cloud documents. Linked assets complement the workflow of Linked components. When a linked instance is used in a consuming document, you can use overrides (style and appearance, resize and layout, and structural) to customizethe local instances in the consuming document.
If you change and save the Master Component in the Source Document, a blue badge next to each Component instance in the consuming document indicates so. You can hover over the blue badge to preview the updates within the Assets panel, and if visible, on the design canvas. Click the blue badge to accept the update to an individual component and click Update All button towards the bottom of the Assets panel updates all instances within the document. For more information on linked assets, see Work with Linked Assets
- You will be unable to expand the bounds of your instances if they add an object that is outside of the bounds of their original master. If you do so, the content is clipped. As a workaround:
- Create the Master at the largest size of your intended overrides.
- Include new objects as elements outside of your component instance.
- You cannot move your Master Component from one document to another.
- Edit Master and Reset to Master is not available with multi-selection.
- Overrides are removed if you select Convert to path. If you continue editing, it removes overrides on this object on instances.
- Opacity is currently not supported as a master property edit if you edit from the master. Each instance has its own opacity.