Prototype Overlays: Layer Without Duplication
Overlays layer modals and menus above your current screen like a transparency sheet, so you never duplicate frames. Use them for dropdowns, dialogs, and toasts. The footgun is fixing them to the screen edge instead of the trigger, which breaks on resize.
Why it exists
Before overlays, prototyping a modal meant duplicating every screen that could show it. A settings page with a delete confirmation required a second frame identical except for the dialog. Change a button color and you updated dozens of copies. Overlays were invented to separate temporary layers from their parent context, so a single frame can host many states without frame duplication or maintenance hell.
The mental model
Think of an overlay as a sheet of clear acetate placed on top of a finished drawing. The original drawing stays untouched beneath while the acetate carries the new information. When you remove the sheet, the original context is instantly restored. In Figma, the underlying frame never leaves the viewport; the overlay simply sits above it in the z-index stack.
How it works
In prototype mode, you select a trigger element and create an interaction. Instead of choosing navigate, you select open overlay and point to a separate frame. Figma offers positioning options: centered on screen, relative to the trigger, or manual coordinates. You also pick an animation such as fade, slide from bottom, or instant. The overlay frame renders above the current frame. You can configure it to close when clicking outside the overlay boundaries, or you can wire a close action to a button inside the overlay itself. Background overlays can also apply a scrim dim effect by using a semi-transparent rectangle inside the overlay frame.
When to use it
Use overlays for any temporary UI that must appear while preserving the user's sense of place. This includes dropdown navigation menus, confirmation dialogs, bottom sheets on mobile, tooltips, toast notifications, and image lightboxes. They are especially powerful when the same overlay must appear from multiple screens, because one overlay frame can be opened from ten different triggers without creating ten copies.
When not to use it
Do not use overlays for full-screen page transitions; navigate is the correct action when the user is moving to a new section and the previous screen should leave the viewport. Avoid overlays when the content is complex enough to deserve its own dedicated page, such as a multi-step onboarding flow. Also be cautious with deeply nested overlays, because Figma prototypes can accumulate multiple stacked layers and make it hard for viewers to escape or understand where they are in the information hierarchy.
One canonical example
Imagine a project management dashboard. The user clicks a task card and a detail modal slides up from the bottom as an overlay. The dashboard remains visible behind a dark scrim, reinforcing that the user has not left the main view. The designer built one overlay frame containing the modal content and opened it from every task card across the board. If the product team later decides the modal needs a priority dropdown inside it, they edit a single frame and the change propagates everywhere.
Interview question
A designer needs a delete confirmation dialog to appear from ten different screens. Why is an overlay the better choice over duplicating each screen?
- a.It automatically applies a dark scrim behind the dialog without extra rectangles
- b.It enables the dialog to use more animation types than standard frame navigation
- c.It removes the original screens from the prototype to improve loading performance
- d.It keeps the underlying frame visible while eliminating the need to maintain multiple copiesCorrect
Why? this is the answer
Overlays separate temporary layers from their parent context so one dialog frame can be reused across many triggers without duplicating screens, and the underlying frame stays in the viewport. Option A is tempting because scrims are associated with overlays, but the card states they require adding a semi-transparent rectangle manually rather than being automatic.
Just read this? Test yourself on what you have been reading.
- #figma
- #prototyping
- #ui-design
- #overlays
- #modals
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on figma — each one lists the topics its interview covers.
See open roles