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 additional 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

Overlay actions

In a prototype connection, an action usually takes the user from A to B. When the action is an overlay, Figma shows 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.

Create an overlay

You create an overlay when you define the interaction of a connection. Overlays can be triggered from any object, layer, group or frame. The overlay must be inside a frame.

1. Click the Prototype tab in the right sidebar.
2. 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.
3. Now you can customize the interaction. There are three aspects of the interaction, the trigger, action and destination.
   1. Select what kind of interaction will trigger the animation.
   2. Select Open overlay from the actions.
   3. Figma determines 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:

1. Position: The location of the overlay relative to the original frame. Choose from seven default options or set a position manually.
2. Close when clicking outside: Check this setting to dismiss the overlay when a user clicks outside the overlay's dimensions.
3. Add background behind overlay: Check this setting to add a background color behind the overlay and in front of the current frame. Set both the color and the opacity.
   
4. 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 overlay action. This allows you to keep the existing settings while you swap one overlay for another.

In the following example, we used Swap overlay to show a user interacting with our in-app help menu.

1. The user clicks on the help icon, which opens the first overlay (Help menu).
2. They select the Get Help option from the menu.
3. We replace the Help menu overlay with a Chat window overlay.

Use Swap Overlay

1. Select the first overlay in the canvas.
2. Open the Prototype tab in the right sidebar.
3. In the Trigger field, choose the type of interaction you want to use as the trigger.
4. In the Action field, select Swap overlay.
5. In the Destination field, select the overlay you'd want to swap to.
6. Customize the Animation with transition, direction, easing, and duration settings.
7. Preview your overlay in Presentation view.

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.

Edit overlay

1. Identify an overlay using the blue icon. This will appear next to the frame in the canvas.
2. Click the icon to view overlay's settings in the right sidebar.
3. Make any changes to the overlay, as required.

Delete Overlay

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 interactions.