Introducing Overlays | Figma Blog (opens in new tab)
Figma’s Overlays feature makes prototypes more realistic by allowing content to appear flexibly above existing screens. Designers can position modals, sidebars, tooltips, and dropdowns, stack multiple overlays, and add interactions without rebuilding entire frames. The release aims to reduce repetitive prototype setup and better support interactive user flows. ## Simple Overlays - A destination frame can be designated as an overlay after creating a prototype link. - Overlays can be positioned relative to the device for modals and action sheets. - Designers can manually position overlays relative to triggering objects, such as for tooltips and dropdowns. ## Multiple Overlays - Multiple overlays can be layered simultaneously. - This supports complex flows such as multi-step purchases and confirmation dialogs. - Creating stacked overlays follows the same process as creating a single overlay. ## Interactions on Overlays - Designers can use “swap” interactions within overlays. - Swapping changes the overlay’s content without dismissing it or replacing the entire underlying frame. - This enables interactive states such as button hover effects inside an overlay. ## Additional Controls and Shortcuts - Back and Close actions can be selected directly on the canvas while dragging connections. - Holding Option while hovering over a destination frame quickly selects a swap connection. - Swap links can create more flexible Back behavior by returning to the last navigated frame rather than simply showing the preceding frame. Overall, Overlays extend Figma’s existing prototyping tools and make layered, interactive interface patterns easier to build and test.