Interactive Overlays are an important Figma prototyping feature used to display additional content above the current screen without navigating away from the underlying frame. Overlays are commonly used for modals, confirmation dialogs, dropdown menus, hamburger menus, tooltips, alerts, bottom sheets, search panels, notifications, filters, and other temporary interface elements.
In a normal navigation interaction, the user moves from one screen to another. With an overlay, the current screen remains visible underneath while another frame appears above it. This makes prototypes feel closer to real web and mobile applications.
Learn professional Figma design and prototyping with JustAcademy Figma Training and Register for Figma Course Demo.
An overlay is a frame that appears above the current frame during a prototype interaction. It is useful when the user needs additional information or actions while remaining in the context of the current screen.
Main Screen
↓
User Interaction
↓
Open Overlay
↓
Overlay Appears Above Main Screen
↓
User Performs Action
↓
Close / Swap / Continue
For example, clicking a profile icon can open a small profile menu above the current dashboard instead of navigating to another page.
Interactive Overlay = Current Screen + Overlay Frame + Prototype Interaction
In Figma, an overlay is normally a frame that is displayed above the current frame when an interaction is triggered.
Current Screen
┌────────────────────────────┐
│ │
│ Main Content │
│ │
│ │
│ │
└────────────────────────────┘
+
Overlay
↓
┌────────────────────────────┐
│ │
│ ┌──────────────┐ │
│ │ Modal │ │
│ │ Content │ │
│ │ [Close] │ │
│ └──────────────┘ │
│ │
└────────────────────────────┘
| Overlay Type | Example |
|---|---|
| Modal | Login or confirmation window |
| Alert | Delete confirmation |
| Dropdown | Category selection |
| Tooltip | Additional information |
| Hamburger Menu | Mobile navigation |
| Bottom Sheet | Filter and sorting options |
| Notification | Success or error message |
| Search Panel | Search suggestions |
| Profile Menu | Account actions |
| Calendar | Date selection |
| Cart Panel | Shopping cart preview |
| Interactive Overlay | Navigate To |
|---|---|
| Appears above the current screen | Moves to another frame |
| Current screen remains visible | Previous screen is replaced |
| Best for temporary content | Best for full-page navigation |
| Useful for menus and modals | Useful for pages and screens |
| Can be closed to reveal the original screen | Usually requires Back to return |
An overlay interaction contains several important parts that control how the prototype behaves.
A hotspot is the object, layer, group, or frame where the interaction begins. A hotspot can be a button, icon, image, heading, card, or any other suitable object.
Profile Icon
↓
Hotspot
↓
On Click
↓
Open Overlay
A trigger defines what user action causes the prototype interaction to start. Figma supports several trigger types for prototype interactions.
| Trigger | Example |
|---|---|
| On Click / On Tap | Click a button or tap an icon |
| While Hovering | Hover over an element |
| While Pressing | Hold an element |
| Mouse Enter | Pointer enters an area |
| Mouse Leave | Pointer leaves an area |
| Mouse Down / Touch Down | Press an element |
| Mouse Up / Touch Up | Release an element |
| After Delay | Open automatically after a delay |
Open Overlay is the prototype action used to display a destination frame above the current frame.
Trigger:
On Click
Action:
Open Overlay
Destination:
Profile Menu
Result:
Profile Menu appears above
the current screen.
Main Screen
┌──────────────────────────┐
│ Dashboard │
│ │
│ [Delete Account] │
│ │
└──────────────────────────┘
↓
On Click
↓
Open Overlay
↓
┌──────────────────────────┐
│ Delete Account? │
│ │
│ This action is final. │
│ │
│ [Cancel] [Delete] │
└──────────────────────────┘
First create the screen where the interaction starts.
Frame: Dashboard
┌──────────────────────────┐
│ Dashboard │
│ │
│ Profile │
│ Products │
│ Orders │
│ Settings │
│ │
│ [Delete Account] │
└──────────────────────────┘
The Delete Account button can be used as the hotspot.
Create a separate frame containing the temporary content.
Overlay: Delete Confirmation
┌──────────────────────────┐
│ │
│ Delete Account? │
│ │
│ This cannot be undone. │
│ │
│ [Cancel] [Delete] │
│ │
└──────────────────────────┘
Delete Account Button
↓
On Click
↓
Open Overlay
↓
Delete Confirmation
Figma's prototype interaction model uses a hotspot, connection, destination, trigger, action, and animation settings to define the behavior of the interaction.
Figma provides multiple default overlay positions and also allows manual positioning. The position determines where the overlay appears relative to the original frame.
| Position | Typical Use |
|---|---|
| Center | Modal and confirmation dialog |
| Top | Notification and announcement |
| Bottom | Bottom sheet |
| Left | Navigation drawer |
| Right | Cart or settings panel |
| Manual | Tooltip and custom popup |
A centered modal is one of the most common overlay patterns.
┌────────────────────────────┐
│ │
│ Main Screen │
│ │
│ ┌──────────────┐ │
│ │ Modal │ │
│ │ │ │
│ │ [Cancel] │ │
│ └──────────────┘ │
│ │
└────────────────────────────┘
A top overlay is useful for status messages, success notifications, warnings, and announcements.
┌────────────────────────────┐
│ ✓ Profile Updated │
└────────────────────────────┘
│ │
│ Main Screen │
│ │
└────────────────────────────┘
A bottom sheet appears from the bottom area of the screen and is commonly used in mobile applications.
┌────────────────────────────┐
│ │
│ Main Screen │
│ │
├────────────────────────────┤
│ Filters │
│ │
│ Price │
│ Category │
│ Rating │
│ │
│ [Apply] │
└────────────────────────────┘
A side overlay can simulate a mobile navigation drawer.
┌────────────────┬───────────┐
│ Navigation │ Main │
│ │ Content │
│ Home │ │
│ Products │ │
│ Orders │ │
│ Settings │ │
└────────────────┴───────────┘
An overlay can have a background layer between the original frame and the overlay content. This helps separate the temporary interface from the underlying content.
Main Screen
↓
Semi-transparent Background
↓
Overlay Content
The background can have its own color and opacity.
| Opacity | Effect |
|---|---|
| 0% | No dimming |
| 20% | Light dimming |
| 40% | Moderate dimming |
| 60% | Strong dimming |
| 80%+ | Very strong separation |
Choose an opacity that gives sufficient focus to the overlay without unnecessarily hiding important information from the underlying screen.
Figma allows an overlay to be dismissed when the user clicks outside the overlay's dimensions. This is useful for dropdowns, menus, tooltips, and other dismissible overlays.
Overlay Open
↓
Click Outside Overlay
↓
Overlay Closes
↓
Original Screen
Close Overlay dismisses an active overlay and returns the user to the underlying frame.
Overlay
┌────────────────────┐
│ Confirmation │
│ │
│ [Cancel] │
└────────────────────┘
↓
Close Overlay
↓
Original Screen
Close Button
↓
On Click
↓
Close Overlay
| Close Overlay | Back |
|---|---|
| Dismisses the active overlay | Returns to the previous screen in prototype history |
| Ideal for modal dismissal | Ideal for navigation history |
| Reveals the underlying screen | Moves backward through the prototype flow |
A modal is a temporary window that requires the user to focus on a specific task or decision.
Button
↓
Open Overlay
↓
┌──────────────────────┐
│ Confirm Action │
│ │
│ Are you sure? │
│ │
│ [Cancel] [Confirm] │
└──────────────────────┘
↓ ↓
Close Continue
Confirmation overlays are useful for destructive or important actions.
Delete Item
↓
Open Overlay
↓
Are you sure?
↓
┌──────────────────────┐
│ Cancel Delete │
└──────────────────────┘
An alert overlay communicates an important status, warning, or error.
Action
↓
Alert Overlay
↓
┌──────────────────────┐
│ ! Warning │
│ │
│ Something went wrong │
│ │
│ [OK] │
└──────────────────────┘
Tooltips provide additional information about an element without requiring the user to leave the current screen.
Info Icon
↓
Hover / Interaction
↓
┌──────────────────────┐
│ Additional │
│ information here │
└──────────────────────┘
Dropdown menus are a common use of overlays.
Category
┌──────────────────────┐
│ Select Category ▼ │
└──────────────────────┘
↓
┌──────────────────────┐
│ Electronics │
│ Clothing │
│ Food │
│ Books │
└──────────────────────┘
A search overlay can provide a focused search experience while keeping the user on the current screen.
Search Icon
↓
Open Overlay
↓
┌────────────────────────┐
│ Search products... │
│ │
│ Recent Searches │
│ Laptop │
│ Headphones │
│ Mobile │
└────────────────────────┘
A hamburger menu can open a navigation overlay containing the main navigation options.
☰
↓
Open Overlay
↓
┌──────────────────┐
│ Home │
│ Products │
│ Services │
│ About │
│ Contact │
└──────────────────┘
A profile avatar can open an account menu as an overlay.
Profile Avatar
↓
Open Overlay
↓
┌────────────────────┐
│ My Profile │
│ Settings │
│ Notifications │
│ Help │
│ Logout │
└────────────────────┘
Notification overlays are useful for showing short feedback messages.
User Action
↓
Notification
↓
┌────────────────────────┐
│ ✓ Saved Successfully │
└────────────────────────┘
↓
Close
An e-commerce website or application can display the shopping cart above the current product page.
Product Page
↓
Click Cart
↓
Open Overlay
↓
┌──────────────────────┐
│ Shopping Cart │
│ │
│ Laptop × 1 │
│ Mouse × 1 │
│ │
│ Total: ₹55,000 │
│ │
│ [Checkout] │
└──────────────────────┘
Filter options can be displayed inside a bottom sheet or side overlay.
Product Listing
↓
Click Filter
↓
Open Overlay
↓
┌──────────────────────┐
│ Filters │
│ │
│ Price │
│ Category │
│ Rating │
│ │
│ [Apply Filters] │
└──────────────────────┘
Date pickers are useful in booking, travel, scheduling, and event applications.
Select Date
↓
Open Overlay
↓
┌────────────────────────┐
│ October 2026 │
│ Su Mo Tu We Th Fr Sa │
│ 1 2 3 4 │
│ 5 6 7 8 9 10 11 │
│ 12 13 14 15 16 17 18 │
│ │
│ [Cancel] [Done] │
└────────────────────────┘
Overlays can also be used to simulate an on-screen keyboard or temporary input interface in mobile prototypes.
Text Field
↓
Open Overlay
↓
┌────────────────────────┐
│ Enter text... │
│ │
│ A B C D E F G H I ... │
│ │
└────────────────────────┘
Complex prototypes may require more than one overlay during a user flow.
Main Screen
↓
Overlay A
↓
User Interaction
↓
Overlay B
↓
User Interaction
↓
Overlay C
Multiple overlays should be used carefully because excessive nesting can make a prototype difficult to understand and maintain.
Swap Overlay replaces the current overlay with another overlay while keeping the existing overlay settings. It is useful when a user moves between different states of an overlay experience.
Help Menu
↓
Click "Get Help"
↓
Swap Overlay
↓
Chat Window
Overlay A
┌──────────────────┐
│ Help Menu │
│ │
│ FAQ │
│ Get Help │
└──────────────────┘
↓
Get Help
↓
Swap Overlay
↓
Overlay B
┌──────────────────┐
│ Chat Window │
│ │
│ Type message... │
└──────────────────┘
| Open Overlay | Swap Overlay |
|---|---|
| Opens an overlay above the current screen | Replaces an existing overlay |
| Starts an overlay experience | Continues an existing overlay experience |
| Useful for opening menus and modals | Useful for multi-step overlay interactions |
| Creates the initial overlay | Changes the active overlay |
When using Swap Overlay, the replacement overlay keeps the same position as the original overlay. You cannot independently assign a different position to the replacement overlay through the swap action.
Swap Overlay also does not add the replacement overlay to prototype history in the same way as normal navigation. If the prototype requires Back navigation between overlay states, use an appropriate navigation flow instead.
Figma allows designers to control how an overlay appears through animation settings.
| Animation | Typical Use |
|---|---|
| Instant | Immediate appearance |
| Dissolve | Fade-in effect |
| Move In | Side menu or bottom sheet |
| Push | Content movement |
| Smart Animate | Matching layer transitions |
A Move In transition makes an overlay enter from a particular direction.
Main Screen
↓
Overlay enters
↓
───────────────→
↓
Overlay Visible
This works especially well for navigation drawers and bottom sheets.
Before:
┌────────────────────────┐
│ Main Screen │
│ │
│ │
└────────────────────────┘
After:
┌────────────────────────┐
│ Main Screen │
├────────────────────────┤
│ Filter Options │
│ Category │
│ Price │
│ │
│ [Apply] │
└────────────────────────┘
Easing controls the acceleration and deceleration of an overlay animation.
| Easing | Effect |
|---|---|
| Linear | Constant movement |
| Ease In | Slow beginning |
| Ease Out | Smooth ending |
| Ease In and Out | Smooth beginning and ending |
| Spring | Dynamic and natural movement |
Duration determines how long the overlay transition takes to complete.
Short Duration
↓
Fast Interaction
Medium Duration
↓
Balanced Interaction
Long Duration
↓
Slow / Dramatic Interaction
Choose a duration that feels responsive and appropriate for the type of overlay.
Step 1:
Create Select Button
Step 2:
Create Dropdown Frame
Step 3:
Connect Button to Dropdown
Step 4:
Action = Open Overlay
Step 5:
Position = Below Button
Step 6:
Trigger = On Click
Step 7:
Preview Prototype
Step 1:
Create Main Screen
Step 2:
Create Modal Frame
Step 3:
Select Modal Trigger Button
Step 4:
Action = Open Overlay
Step 5:
Position = Center
Step 6:
Add Background
Step 7:
Add Close Button
Step 8:
Close Button = Close Overlay
Step 9:
Preview
Closed State
┌────────────────────────┐
│ ☰ │
│ │
│ Main Content │
└────────────────────────┘
↓ On Click
Open Overlay
┌───────────────┬────────┐
│ Home │ │
│ Products │ Main │
│ Orders │ Screen │
│ Settings │ │
└───────────────┴────────┘
Help Icon
↓
Open Overlay
↓
Help Menu
├── FAQ
├── Tutorials
└── Get Help
↓
Swap Overlay
↓
Chat Window
Product Page
↓
Cart Icon
↓
Open Overlay
↓
Cart Panel
↓
Update Quantity
↓
Checkout
↓
Navigate To Checkout
This demonstrates how an overlay can be used for temporary cart information while the final checkout experience can move to a separate screen.
Restaurant List
↓
Filter Button
↓
Open Overlay
↓
Filter Bottom Sheet
↓
Select Cuisine
↓
Select Price
↓
Apply
↓
Close Overlay
↓
Updated Restaurant List
Profile Avatar
↓
On Click
↓
Open Overlay
↓
Profile Menu
├── My Profile
├── Settings
├── Notifications
└── Logout
User Action
↓
After Delay
↓
Open Overlay
↓
┌────────────────────────┐
│ ✓ Saved Successfully │
└────────────────────────┘
↓
Close Overlay
Info Icon
↓
Mouse Enter / Hover
↓
Tooltip Overlay
↓
Additional Information
↓
Mouse Leave / Close
Good layer and frame organization makes complex prototypes easier to manage.
Page
├── Main Dashboard
├── Overlay/DeleteConfirmation
├── Overlay/ProfileMenu
├── Overlay/Search
├── Overlay/FilterSheet
└── Overlay/Notification
Meaningful names make it easier to identify destination frames and maintain prototype connections.
| Problem | Possible Solution |
|---|---|
| Overlay does not open | Check hotspot, trigger, action, and destination |
| Wrong overlay appears | Check the destination frame |
| Overlay appears in wrong position | Review overlay position settings |
| Background is too dark | Reduce background opacity |
| Overlay cannot close | Add Close Overlay interaction |
| Click outside does not close | Enable Close when clicking outside |
| Animation is too slow | Reduce duration |
| Animation feels abrupt | Adjust easing and duration |
| Swap Overlay behaves unexpectedly | Check destination overlay and remember it retains the original overlay position/settings |
Smart Animate can be useful when matching layers need to animate between states, including in workflows involving overlay content. However, the basic overlay action remains Open Overlay, while Swap Overlay is useful for changing one active overlay into another.
Main Screen
↓
Open Overlay
↓
Overlay A
↓
User Interaction
↓
Swap Overlay
↓
Overlay B
Overlays can be combined with reusable components. A reusable modal, dropdown, notification, or menu can be designed as a component and then used across multiple screens.
Reusable Component
↓
Component Instance
↓
Prototype Connection
↓
Open Overlay
↓
Overlay Content
| Interactive Components | Interactive Overlays |
|---|---|
| Switch between component variants | Display a frame above the current screen |
| Useful for buttons and toggles | Useful for modals and menus |
| Interactions are stored in component variants | Interactions are generally created at prototype level |
| Excellent for reusable UI states | Excellent for temporary screen-level content |
Start Frame
↓
User Action
↓
Trigger
↓
Open Overlay
↓
User Interaction
↓
Close / Swap / Navigate
↓
Continue User Journey
Create a login modal that appears when the user clicks the Login button on a landing page.
Landing Page
↓
Click Login
↓
Open Overlay
↓
┌──────────────────────┐
│ Login │
│ Email │
│ Password │
│ [Login] │
│ [Close] │
└──────────────────────┘
↓
Login
↓
Dashboard
Product Page
↓
Delete Button
↓
Open Overlay
↓
Confirm Delete
├── Cancel → Close Overlay
└── Delete → Continue Action
Home Screen
↓
Tap ☰
↓
Open Overlay
↓
Navigation Drawer
├── Home
├── Products
├── Orders
└── Settings
↓
Select Item
↓
Navigate To
Product Listing
↓
Tap Filter
↓
Open Overlay
↓
Filter Sheet
↓
Select Options
↓
Apply
↓
Close Overlay
↓
Updated Product Listing
Help Icon
↓
Open Overlay
↓
Help Menu
├── FAQ
├── Tutorials
└── Get Help
↓
Swap Overlay
↓
Chat Window
Product Page
↓
Cart Icon
↓
Open Overlay
↓
Cart Panel
↓
Checkout
↓
Navigate To Checkout
User Completes Action
↓
After Delay
↓
Notification Overlay
↓
"Saved Successfully"
↓
Close Overlay
Main Frame
↓
Open Overlay
↓
Overlay A
↓
User Action
↓
Swap Overlay
↓
Overlay B
↓
User Action
↓
Close Overlay
↓
Main Frame
↓
Continue Prototype
1. Identify Interaction
↓
2. Design Main Screen
↓
3. Design Overlay Frame
↓
4. Select Hotspot
↓
5. Create Connection
↓
6. Choose Trigger
↓
7. Select Open Overlay
↓
8. Set Position
↓
9. Configure Background
↓
10. Configure Close Behavior
↓
11. Configure Animation
↓
12. Preview
↓
13. Test
↓
14. Refine
↓
15. Final Prototype
Mobile applications frequently use overlays for navigation menus, filters, date pickers, bottom sheets, payment confirmations, login forms, and quick actions.
Mobile Screen
↓
Tap Action
↓
Open Overlay
↓
User Interaction
↓
Close / Confirm
↓
Return to Screen
Web applications use overlays for account menus, confirmation dialogs, dropdowns, tooltips, filters, notifications, and search interfaces.
Web Dashboard
↓
User Click
↓
Open Overlay
↓
User Selects Option
↓
Close Overlay
↓
Dashboard Updates
Overlays are useful during usability testing because they allow designers to simulate real application behavior before development.
When building large prototypes, keep overlay architecture organized. Figma applies overlay settings to the overlay itself rather than treating all settings as properties of the individual connection. This makes it easier to reuse the same overlay behavior throughout a prototype.
For complex projects, organize overlay frames into clearly named sections or groups and use reusable components where appropriate.
An Interactive Overlay is a frame that appears above the current frame as the result of a prototype interaction.
Open Overlay is a prototype action that displays a destination frame above the current frame.
Close Overlay dismisses an active overlay and reveals the underlying screen.
Swap Overlay replaces the current overlay with another overlay while retaining the existing overlay settings.
Overlays are commonly used for modals, dropdowns, alerts, tooltips, navigation menus, filters, bottom sheets, notifications, and search panels.
Open Overlay displays additional content above the current screen, while Navigate To moves the prototype to another frame.
Yes. Figma provides default positioning options and allows manual positioning.
Yes. A background can be added behind an overlay with configurable color and opacity.
Yes. The Close when clicking outside option can be enabled for appropriate overlays.
Yes. Designers can configure the transition, direction where applicable, easing, and duration.
Interactive Overlays are an essential part of professional Figma prototyping. They allow designers to display temporary interface elements without taking users away from the current screen.
The most important overlay actions are Open Overlay, Close Overlay, and Swap Overlay. Understanding position, background, opacity, click-outside behavior, animation, easing, and duration allows designers to build realistic and user-friendly prototypes.
Create a complete e-commerce application prototype using multiple interactive overlays.
Home Screen
↓
Search Icon
↓
Search Overlay
↓
Select Product
↓
Product Page
↓
Filter
↓
Filter Overlay
↓
Add to Cart
↓
Cart Overlay
↓
Checkout
↓
Confirmation Overlay
↓
Order Complete
This project helps practice Open Overlay, Close Overlay, Swap Overlay, overlay positioning, backdrop settings, animations, triggers, and complete prototype flows.
| Skill | Completed |
|---|---|
| Understand overlays | □ |
| Create Open Overlay interaction | □ |
| Create Close Overlay interaction | □ |
| Use Swap Overlay | □ |
| Configure overlay position | □ |
| Add background behind overlay | □ |
| Configure background opacity | □ |
| Use click-outside closing | □ |
| Configure animation | □ |
| Configure easing | □ |
| Configure duration | □ |
| Create modal | □ |
| Create dropdown | □ |
| Create hamburger menu | □ |
| Create bottom sheet | □ |
| Create notification | □ |
| Create multi-step overlay flow | □ |
Interactive Overlays are one of the most useful Figma prototyping features for creating realistic web and mobile application experiences. They allow temporary content such as modals, dropdowns, menus, tooltips, alerts, filters, notifications, search panels, and bottom sheets to appear above an existing screen.
By understanding Open Overlay, Close Overlay, Swap Overlay, triggers, destinations, positions, background settings, click-outside behavior, animation, easing, and duration, designers can create professional interactive prototypes that closely represent real product behavior.
For structured Figma learning and practical UI/UX training, explore JustAcademy Figma Training and Register for Figma Course Demo.
