Prototypes often require transitions between screens in a design. For some interactions, you may want to keep the user on the same screen, but show more information.
Overlays allow you to show new content or information above the current screen in a prototype. Use overlays to prototype:
- Alerts or confirmations
- Interactive hamburger menus
- Tooltips and additional information
- On-screen keyboards
In a prototype connection, an action usually takes the user from A to B. When the action is an overlay, Figma will show the overlay above the current screen.
Figma usually applies interaction settings to just that the connection. When you create an overlay, Figma applies those settings to the overlay itself, not the connection.
This allows you to apply those settings once and reuse that overlay across your prototype.
Tip! You can create interactions between overlays using the Swap With action. Learn more in the Swap between overlays section below.
Create an overlay
You create an overlay when you define the interaction of a connection. You can trigger an overlay from any object, layer, group or frame.
The overlay itself needs to be in a frame.
- Click the Prototype tab in the right sidebar.
- Hover over the object you want to start the overlay from. Click on the prototype node and drag a connection to the frame you want to become the overlay.
- Now you can customize the interaction. There are three aspects of the interaction, the trigger, action and destination.
- Select what kind of interaction will trigger the animation.
- Select Open Overlay from the actions.
- Figma will determine the Destination based on where the connection ends. For this interaction, you want this to be the overlay frame.
There are a few aspects of an overlay that you can customize:
- Position: the location of the overlay relative to the original frame. Choose from 7 default options, or set a manual position.
- Close when clicking outside: Check this box to dismiss the overlay when a user clicks outside the overlay's dimensions.
- Add background behind overlay: Check the box to add a background color behind the overlay and in front of the current frame. Set both the color and the opacity.
- In the Animation section, customize how the overlay will appear. Select the (1) transition and any additional settings, including (2) direction, (3) easing, and (4) duration. Learn how to build prototypes with interactions and animations.
Swap between overlays
When working with overlays, you can choose the Swap With action. This allows you to keep the existing settings while you swap one overlay for another.
In our example below, 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 Helpoption from the menu.
- We replace the
Help menuoverlay with a
Note: Figma doesn't record Swap With actions in a prototype's history. When you create a Back action from a Swap With transition, Figma will take you back to the previous screen, not the previous overlay.
Use Swap With
- Select the first overlay in the canvas.
- Open the Prototype tab in the right sidebar.
- In the Trigger field, choose the type of interaction you want to use as the trigger.
- In the Action field, select Swap With.
- In the Destination field, select the overlay you'd like to swap to.
- Customize the Animation with transition, direction, easing, and duration settings.
- Preview your overlay in Presentation view.
Note: You can't set a different position for the new overlay. Figma will place the new overlay in the same position as the original overlay.
Edit or delete an overlay
Unlike other actions, overlay settings are applied to the overlay and not the connection. This means you can update the overlay's settings in one place.
You can only edit or remove an overlay in Prototype mode.
- Identify an overlay using the blue icon. This will appear next to the frame in the canvas.
- Click the icon to view overlay's settings in the right sidebar.
- Make any changes to the overlay, as required.
Tip! You can also access the overlay settings by clicking on a hotspot, or on an arrow from one of the connections.
There are a few ways to delete an overlay:
- Click on the connection arrow and drag it to an empty part of the canvas.
- Click the icon to select the overlay, then press the Delete key.
- Remove all connections on the current page. Right-click on a connection and select Remove All Connections.