A prefab is a pre-fabricated, ready-made interaction that can be added to a design in seconds, making prototyping much more efficient. The Play team has created several prefabs for advanced interactions—like a drag and drop grid or an elastic header—which can help you both save time and learn.

You can add a prefab to an object in your project by searching it from the quick add menu, dragging it from the Interactions Panel, or double-clicking on it in the Interactions Panel.

When the prefab is added, the only information on the prefab node are the prefab controls. You will not see the interactions that make up the prefab unless you unlock the prefab, which can only be done on Pro plans.

In addition to prefabs that contain full interactions, you can also add action prefabs to a trigger. Actions prefabs work the same way full interaction prefabs work, but they only include an action or set of actions.

The prefab will have a title by default (like “Toggle Tap”) but you can rename it the same way you can rename any interaction node (right-click!).

Prefab controls are the properties that allow you to customize the prefab and connect it to your design. Each prefab control is used in the interaction nodes (triggers & actions) within the prefab.

A prefab can have one control, many controls, or no controls.

In this simple example below, there is just one prefab control: Spring, which is controlling the spring easing curve value. Anyone using the prefab can adjust the spring value, which will alter the animation of the interactions.

All other values are specified inside the prefab, so they'll stay consistent and cannot be changed through the prefab controls.

Prefabs are perfect for beginners or users who want a common interaction straight out of the box. However, if you’re looking for a better understanding of how a prefab works so you can modify or upgrade it, you can expose the full interaction.

If you click the lock icon, the full interaction will expand, exposing a combination of triggers, actions, conditions, and/or other interaction nodes. If you want to collapse a prefab back to its simplified state, click the unlocked.

Below, the top prefab is locked, and the bottom prefab is unlocked.