Overlay Interactions
Create modals, dropdowns, tooltips, and popups that appear over the current screen content.
Prototyping
No shortcutIntermediate10 min readQuick Reference
Overlay Interactions
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Intermediate⏱ 30–60 minutes to master
Key Settings
Configure:Position:Close:Backdrop:
Overlay Interactions display content on top of the current screen. They are used for modals, menus, tooltips, and any floating UI elements.
Where to Find It
In the Prototype panel, when creating a connection, set the action to 'Open Overlay' and choose the overlay positioning.
How to Use
- Configure: Create a prototype connection and set the action to 'Open Overlay'.
- Position: Choose how the overlay appears — centered, top-left, bottom-right, or manual.
- Close: Add a close interaction on the overlay's close button or a background click.
- Backdrop: Enable 'Close when clicking outside' for dismissible overlays.
Pro Tips
- Use overlays for confirmation dialogs, dropdown menus, and tooltip previews.
- Set the overlay background to semi-transparent for the classic modal effect.