Prototyping with Overlays
Overlays make it easy to prototype an interaction where an element appears above another.
In this article, we'll take you through the process of creating Prototypes that use Overlays.
- What are Overlays?
- Using Overlays in your Prototypes.
- Using the Swap function.
- Edit or Delete an Overlay.
Tip! If you’re new to Prototyping, we recommend checking out our Getting Started with Prototyping and Creating a Prototype articles first. They give you a good overview of how the Prototyping process works in Figma!
1 | What are Overlays
When you are building Prototypes, you have three available Actions: Navigate, Swap and Overlay.
The default or most commonly used Action is the Navigate option, which takes the user from one Frame to another when they interact with the designated Hotspot.
An Overlay works differently from a regular Navigate interaction, as the user isn't taken to another Frame within the Prototype.
Instead, an Overlay will make a designated Frame appear above the current screen/Frame.
This is perfect for replicating pop-up modals, alert or confirmation messages, hamburger menus, tooltips, opening an on-screen keyboard, or any other on-screen prompts or actions.
Overlays can be easily reused across your designs, reducing the need to create duplicate screens, and allowing you to build and animate more realistic prototypes.
2 | Using Overlays
Overlays are available when you are in Prototyping Mode.
- Enter Prototyping Mode by heading to 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 our Overlay's Hotspot. You can choose any object or group within a Frame.
- A circular Prototyping node will appear on the Object. Click and drag the node to the Overlay Frame to create a Prototype Connection.
- Select the Trigger type you’d like to use, from the options:
- In the Action section, select the Open Overlay option to treat the screen as an Overlay:
You will then be able to further customize the properties of the Overlay.
- The Position drop-down allows you to define where you want the Overlay to be positioned, relative to the device's viewport.
There are three default options accessible via their button icons:
- Top Left
- Bottom Center
Or, you can choose from the other defaults using the drop down menu:
You can also choose the Manual option, which allows you to manually position the Overlay on the origin Frame:
When you select Manual, the Overlay will appear over the top of the current Frame.
You can then click on the Overlay to select it, before dragging it around to reposition it:
- Use the Overlay Background Color to set a Fill layer between the Overlay and the original screen.
You can determine both the Color and the Opacity.
- You can use the box provided to set the Overlay to Close when clicking outside.
This allows viewers to return to the previous state when they simply click outside of the Overlay.
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.
Overlays also work with Transitions! Overlays support the following Transitions:
Choose a behavior from the Transition section:
Each option will give you further properties to customize:
- Direction allows you to choose which direction the Destination Frame enters on. You can choose from Left, Right, Up and Down.
- Duration determines how long the transition takes to complete.
- Easing allows you to slow down part of the transition at the beginning, end, or at both the beginning and end.
You can view a Preview of the animation in the window below the settings.
Learn more about Transitions in our Getting Started with Prototyping article.
3 | Using the Swap Action
When you are working with Overlays, you can also use the Swap action.
This allows you to swap one Overlay for another while retaining the original Overlay's settings.
Using the Swap Action won't allow you to set a different position for the new Overlay. Instead, the new Overlay will be placed in the same position as the original Overlay was.
For example: You could use the Swap Action to simulate a user interacting with an in-app help menu. Once the user clicks on the help icon, they are shown a menu. When they select the Get Help option from the menu, the menu is replaced with a chat window.
Note: Using Swap won't add that Frame to the Prototype's History. This gives you greater flexibility when using "Back" actions by allowing you to go back to the previous screen, versus the previous Overlay. If you’d like a user to be able to use the “Back to Previous Screen” action to move between Overlays, then you would need to use the Navigate option instead.
4 | Edit or Delete an Overlay
Overlay settings are applied directly to the Destination Frame (the Overlay), as opposed to the Connection Arrow (like Navigate and Swap actions).
This allows you to automatically reuse the Overlay's settings, any time you link to that specific Overlay. This also means you only need to update that Overlay's settings in one place!
Once you have designated a Frame as an Overlay, a blue Overlay icon 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.
Remove an Overlay Connection
You can remove an Overlay connection by using any of the following methods, while in Prototype Mode:
- 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.
- Right-click on a connection and select Remove All Connections:
A Hotspot triggers the Transition to move from one the original Frame to another Frame within the Prototype. A Hotspot can be any Object within the original Frame e.g. a link, button, image or icon, etc.
The Destination Frame is the final Frame, where the Transition ends. This must be a top-level Frame (not an object within a Frame). If we think of moving from A to B. A is the Hotspot and B is the Destination.
Connections are the arrows that connect the Hotspot to the Destination. The Interaction and Action settings are applied via the Connection.
The Trigger determines what will trigger the Hotspot; this can be a mouse or touch interaction, like a click, hover or touch.
The Action determines what type of progression is occurring in the Prototype. This could be to Navigate to another page, link to an external URL, or open and close an Overlay.
The Transition determines how the Prototype moves from one Frame to the other. You can control the type of animation, as well as the speed and direction.
Learn more about Prototyping in our Getting Started with Prototyping article, or check out the Figma Design Dictionary for more design terms.