Create Overlays in your Prototypes
When you are building a Prototype, you'll often want to take users from one Frame to another.
In some interactions, you may want to display extra information without taking the user anywhere.
Overlays allow you to present new content or information to the user, above the current Frame.
You can build the following interactions using Overlays:
- Pop-up modals, like alert or confirmation messages
- Hamburger menus
- On-screen keyboards
I want to:
- Learn How Overlays Work
- Create an Overlay Connection
- Swap Between Overlays
- Edit or Delete an Overlay
- Using Overlays [►]
New to Prototyping in Figma? We recommend reading the following articles:
They give you a good overview of how the Prototyping process works in Figma!
How do Overlays Work?
Overlays are a type of Action. In a traditional Prototyping Connection the Action takes the user from A to B.
In an Overlay, we keep the user on the same Frame and display the Overlay above it.
You can customize a few aspects of the Overlay:
- The Position of the Overlay.
- If we display a Background Color between the Overlay and the original Frame .
- If the Overlay disappears when you click on it. Or, if the user can interact with the Overlay and navigate to other parts of the Prototype.
In a typical Interaction, we apply your settings to the Connection.In an Overlay, we apply your settings to the Overlay's Frame and not the Connection.
This allows you to create an Overlay, apply your settings, then reuse it across your Prototype.
Tip! You can even create Prototypes where interacting with one Overlay opens another Overlay. Learn more in the Swap Between Overlays section below.
Create an Overlay Connection
- Overlays are a type of Action. You choose the Overlay Action when you define the Interaction. Check out our Build Prototypes with Interactions and Animations article for more information.
- You can Trigger an Overlay from an Object, Layer, Group or Frame.
- Click the Prototype tab at the top of the Properties Panel.
- Click on the object you’d like to trigger the Overlay from. This will become the Overlay's Hotspot.
- A circular Prototyping node will appear on the Object. Click and drag the node to the Overlay Frame.
- You can now customize the Interaction in the Prototype tab. An Interaction consists of three parts:
- Select the Trigger you’d like to use. We have nine (9) available:
- On Click / On Tap
- On Drag
- While Hovering
- While Pressing
- Mouse Enter
- Mouse Leave
- Mouse Down (Touch Press)
- Mouse Up (Touch Release)
- After Delay
- Use the Action field to select Open Overlay from the options.
- You will then be able to further customize the properties of the Overlay:
- The Position of the Overlay. Use the drop down to select from the full list of options. Or, use the icons to select one of our three (3) default options.
- Decide if your want the Overlay to Close when clicking outside.
Note: If you don't check this box, then you will need to create a transition that allows the user to dismiss the Overlay. You can use the Close Overlay preset in the Action settings, or take users to a separate Frame entirely.
- Decide if you want to Add background behind the overlay. Once checked, you can select a color using the Color Picker.
- In the Animation section, you can customize the Transition for that Connection.
- Select a Transition.
- If your Transition supports it, select the Direction the Transition is coming from.
- If your Transition supports it, set the Duration - the time it takes to complete the Transition.
- If your Transition supports it, apply Easing. This allows you to control the momentum of the Transition.
Learn more about Transitions in our Build Prototypes with Interactions and Animations article.
Tip! You can add GIFs to your Overlays to simulate more advanced animations. These will show up as static images in the Editor, but will playback as GIFs in Presentation View.
Swap between Overlays
When you are working with Overlays, you can also use the Swap With action. This allows you to swap one Overlay for another, while retaining the original Overlay's settings.
Note: We don't record Swap With Actions in the Prototype's history. This allows you to create "Back" Actions that go back to the previous screen, versus the previous Overlay.
How Does it Work?
We've used Swap With to show a user interacting with our in-app help menu.
- The user clicks on the help icon, which opens the first Overlay (
- They select the Get Help option from the menu.
- We replace the
Help menuwith a
Use Swap With
- In the Canvas, select the part of the Overlay you want to use as the Hotspot.
- In the Interaction section, select the Trigger.
- In the Action field, select Swap With.
- In the Destination field, select the Overlay you'd like to swap in.
- Customize your Animation:
- Select a Transition
- Adjust the Direction, Easing and Duration (if applicable)
- Preview your Overlay in Presentation View.
Note: You can't set a different position for the new Overlay. We will place the new Overlay in the same position as the original Overlay.
Edit or Delete an Overlay
Overlay settings are applied to the Overlay) as opposed to the Connection. This is different than our other actions, like Navigate or Swap.
This allows you to reuse an Overlay's settings, any time you link to that Overlay. It also means you only have to update an Overlay's settings in one place.
Edit an Overlay
You can identify an Overlay by the blue Overlay icon. This will appear next to the Frame in the Canvas.
You can click on this icon to view and update the Overlay's settings in the Properties Panel. This will apply your changes to all interactions that use this Overlay.
Tip! You can also access the Overlay settings by clicking on an origin's Hotspot, or on an arrow from one of the Connections.
Delete an Overlay
You can only remove an Overlay connection in Prototype mode.
There are a few ways to delete an Overlay or Connection:
- Click on the Connection Arrow and drag it to an empty part of the canvas.
- Select the Overlay by clicking on the Overlay icon, then press the Delete key on your keyboard to remove.
- You can remove all connections on the current page. Right-click on a connection and select Remove All Connections.