Add prototype connections from main components

When a design reuses a component across multiple screens, you can prototype at the speed of light.

If you add a prototype connection from a main component, and use instances of that component in your designs, the prototyping connections of the instances will be inherited from the main component.

Use inherited prototype connections to connect:

• A mobile app tab bar placed at the bottom of multiple screens
• An arrow button to navigate back to the previous screen
• A website footer or navigation menu
• Any component used for navigation that appears frequently throughout your design

Add connections from main components

To prototype with main components:

1. Check that the main component is on the same page as the designs that contain the instances. Components from team libraries can't be prototyped this way.
2. Use instance(s) of the component in your designs.
3. Click the Prototype tab at the top of the right sidebar.
4. Click and drag from the to create at least one connection from the main component.

In the example below, the mobile app design has a persistent navigation bar at the bottom of each screen. We can connect a tab in the main component to its destination screen, and all instances of the navigation bar inherit the same interaction. Without a main component, we would need to connect each tab of every navigation bar individually.