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.
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.