The concept of Components saves you plenty of time and spares you repetitive and tedious work, allowing you to reuse existing parts across the design. A button, a footer, an icon or even a cell in a table can be a Component. You can also share them across your projects by means of Design System Libraries.
Every Component has two aspects:
- Master Component, which defines the properties of the Component.
- Instance Component which is a single layer that mirrors the content from its master.
Since Instances are linked to the Master Component, any changes you make to the Master immediately propagate to its Instances. Once you select a Component on the canvas, you will see a preview of its Master with its name.
You can create a Component in 3 ways. Select the elements you want to turn to a Component and:
- Click Create Component in the Top bar
- Open the context menu and choose Create Component
- Use the
At this point, the Component will appear as a single object with a purple outline in the Layers panel. You can hold Alt and drag, use the Duplicate action, or simply copy-and-paste a Component to create Instances – UXPin will link them all together.
Breaking and Detaching Components
If you want to turn a Component back into a regular element, select the Component on the canvas and click Break Component in the Top bar. You can also open the context menu and choose Component › Break, or use the
shortcut . This will turn it into a group of elements.
It’s also possible to detach an Instance from its Master Component. Once you detach it, a new Master is created for that Component. This is useful when you want to create a new, independent Component. Detaching a Component can be done in the same way in the context menu, by choosing Component › Detach.
You can only detach Components which have been added on the canvas directly from a Design System Library.
Editing the Master Component
You can edit Components in two ways – the Master with all its Instances, or edit each Instance independently.
To edit a Component’s Master, select and click the purple Edit Master button in the top left corner of the canvas – this will open a separate view. Any changes you make to the Master Component, will immediately propagate to its Instances. You can also change its default name, Component, in the left corner of the Top bar. When done, click Back. The Master Component’s name appears in the Properties panel in the Instance section, not in the Layers panel.
Editing Instances with Overrides
Whenever you update an Instance with unique content, we call this an Override. Once you select an element inside an Instance, you will see the properties you can change for it.
You can override all properties apart from position, size, rotation, constraints, and alignment.
On top of that, you can’t delete elements or add new ones to an Instance, group and ungroup elements or turn them into new Components. Deleting an element inside an Instance will hide it.
Thanks to that, Instances keep the properties defined in the Master but have their own unique content.
Any edited properties in the Instance are not affected by the changes you make to the Master Component later.
You can reset overrides for the Instance or for a selected element inside an Instance:
- For a selected Instance you can reset overrides in the Instance section in the Properties panel and in the Top bar by clicking Reset or in the context menu. You can either reset all overrides or its size.
- For a selected element you choose which specific property you want to reset. To do that, click on the Reset icon at the top of the Properties panel and click on the properties you want to reset.
Nested Components are the components you create inside another Component – any changes in a nested component will propagate to its Instances. Apart from that, you can also create nested components by selecting numerous Instances on the canvas and turning them into a Component. Nested Components, just like regular Components, can also be overridden. There’s no limit to how deep you can nest Components, but remember that a Master Component can’t contain its own Instance.
Syncing Components to the Library
Once you’re done editing the Master Component, click Back, and that’s when you can sync the changes to the library. To do it, click Sync to library in the Properties panel.
Syncing Components from the Library
The Sync from library option works a little bit different. If you have used your Master Component across different prototypes and projects, chances are that you or someone from your team has edited it. Click Sync from library to update all the instances of the Component placed on the canvas with the version from the library.
The Sync from library will not affect previously overridden instances.
Additionally, in the left Toolbar below the Design System Libraries icon, you’ll see a number that tells you how many Components from the library are out of sync with their Instances on the canvas and, therefore, need to be updated. Click the notification to see a preview of the before and after sync versions of these Components and select the ones you want to update.