A prefab is a pre-fabricated, ready-made interaction that the Play Team has created for you to use in your projects. Prefabs make it easy to drag and drop interactions into your designs in seconds, making prototyping much more efficient.
You can add a prefab to an object in your project by searching it from the quick add menu or dragging it from the Interactions Panel. When the prefab is added, it will appear as a blue node with another node beneath it. The only information on the prefab node is the prefab name, the prefab controls, and a button that says Edit Prefab.
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 Edit Prefab button, 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 Close Prefab button.
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.
Prefab Controls
Prefab controls are the exposed options in the prefab that allow you to customize it and connect it to your design. If you used Interactions 1.0, think of these controls as trigger or action properties. A prefab can have one control, many controls, or no controls. Each prefab control has a set type, a name, and a value that you will input from your design.
Type: Defines the type of value you can input. Options include:
Target: Lets you select a Layer on the page to target
Number: Lets you enter a hard-coded number, number variable, or number expression
Bool: Lets you set the value as True (switch on) or False (switch off)
String: Lets you input a hard-coded string, string variable, or string expression
Action Output: Lets you select a layer on the page as an output (like the image output on a Capture action)
Name: 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.
Value: The targeted layer, number, bool, string, or action output from your design that will be used in the interaction.
Description (Optional): A phrase explaining the purpose of the prefab and/or how to use it.
For example, let’s take a Slide In Menu prefab that opens when you begin panning from the left edge of the screen. The interaction needs to know which object should slide in as the menu, but that object is different for every design. As the prefab creator, the Play team added a Target control to the prefab that allows you to select the object in your design that should slide in as the menu.
If you expand the prefab, you’ll see that the prefab control is linked to properties within the interaction. The Target prefab control is linked to both the Position X and the Set Opacity actions’ Target properties.
In the future, you’ll be able to create your own prefabs or use prefabs created and published by other Play users in the community.