Custom layer visibility lets you show or hide a layer when you hover, tap or press it — which is especially useful when you want to add buttons, menus or similar interactive elements to your prototype.
Select a layer, switch to the Prototype tab in the Inspector, and choose from the options in the Layer Visibility section. From here, you can choose whether a layer is visible or hidden, and whether an interaction changes this:
Default keeps the same visibility in the Layer List Custom overrides the Default setting with:
- A Trigger that decides what causes the layer’s visibility to change, and
- An Action that determines how the layer’s visibility will change
How to enable custom visibility for a layer
The Action menu controls what the layer’s visibility will be after the trigger: Show Layer, Hide Layer, or Toggle. The Toggle options change the layer’s visibility every time you click on it in the prototype.
How to add an action to a layer
Next, choose Hover or Press as a trigger — or select both:
- Hover changes a layer’s visibility when the cursor is within its bounds
- Press changes a layer’s visibility when you press on the layer with your cursor or finger (if you’re playing a prototype on the iOS app, for example)
How to assign hover and press triggers to a layer
Once you’ve added custom visibility to a layer, preview your prototype to see the result.
A prototype preview of three buttons with custom layer visibility: show on hover, hide on press, and hover