Creating a component

To create a component, select an element or group of elements and then click on ‘Create reusable component’ in the top toolbar, or use the keyboard shortcut ⌘3.

Components you create will be accessible from any prototype within that project. If you have collaborators in that project, they will also be able to access any components you create and vice versa.

Editing a component

To edit a component, double-click, select ‘Edit Component’ in the properties panel or double click on the component icon on the layer in the Layers panel. Any edits made to the component will be auto-saved.

To review the changes in the context of your prototype, select the 'Back' button above the component’s name. You’ll now see the newly updated component in your prototype.

Note: When you update a component, the change will be reflected throughout all instances in the project where that component is used.

Placing a component

To place an existing component in your prototype, select the 'Place a Component…' tool from the main toolbar, or use the keyboard shortcut ‘C’ to open the component picker. This lets you browse all the components in the project and place them in your prototype.
 

Duplcating a component

To duplicate a component, navigate to the projects area, select the 'Components' tab, and click the 'Duplicate project component' icon next to the component you wish to make a copy of. This will create a copy of the component in the same project. Any nested components inside the copied component will still reference the same components as the original.
 

Next → Sharing components

Related articles:

Did this answer your question?