Add prototype connections to 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 this example, the mobile app design has a persistent tab bar at the bottom of the screens. We connect the tabs of the main component to their associated screens, and all instances of the tab bar inherit the same interaction. Without a main component, we would need to connect each tab of every tab bar individually.