Components are reusable assets which you can create and place across prototypes in a project. You can think of a component like a group of elements which you’ve converted into a new type of prototype. That new prototype can then be embedded into others to create an interactive prototype.

When collaborating with your team, every collaborator has access to the same components within that project.

Components ensure that the same, up to date version of an asset is being used throughout a project. Every edit to a component will be reflected throughout each instance in which that component is used.

Accessing existing Components

Just like prototypes, components can be accessed via the Hub, inside a project. This means you can edit, preview, archive and duplicate them straight from the Hub.

If you’re in a prototype and would like to place a component, you can use the Component Picker to browse and select an existing component within that prototype. Learn more about placing components.

States and Interactivity within Components

Components are interactive and can hold multiple states. For example, you may have a component which represents a bottom navigation bar with four selectable items within it. The selected state for each item is created as a separate page within that component. You can then add hotspots to the component to make it interactive.

Once you place the component inside a prototype, it will maintain its interactivity.

Copy the navigation component used in this article into your own account to see how interactions work within components.

From your Master Prototype, you can select the starting state of each component instance in Preview.

When the same component instance lives on multiple pages, either by duplicating the page or copying and pasting the instance across, they are connected. This means that the state shown by the component instance will stay in sync with other connected instances. 

Component Actions

Component actions can be used to trigger events based on the interactivity or state of a component. This lets you to chain events and allows your components to talk to one another.

Next → Working with components

Related articles:

Did this answer your question?