A modal, a dropdown menu, a tooltip — none of these replace the whole screen the way a normal prototype connection does. Figma's Overlay interaction shows a Frame on top of the current one instead of navigating away from it.
Create a prototype connection exactly as usual, but choose Open overlay from the action dropdown instead of "Navigate to." The target Frame appears floating on top of the source screen — the screen behind it is still visible and, depending on settings, still visible-not-interactive or fully interactive underneath.
| Position option | Where the overlay appears |
|---|---|
| Manual | Wherever the target Frame is placed relative to the source, exactly |
| Top / Bottom / Left / Right / Center | Automatically anchored to that edge or center of the screen |
An overlay needs its own way to close — a background "click outside to dismiss" option in the interaction settings, or an explicit close button wired with its own Close overlay action. Forgetting this is the single most common broken-prototype mistake: an overlay that opens but has no way back.
Beyond overlays, a Component set built with a "State" property (Default/Hover/Pressed, from the Components & Variants lesson) can react to real cursor interaction directly, without a manual connection at all — set an instance's interactive states in the Prototype tab's "Interactive components" area, and Figma auto-switches variants on hover or press in the live preview.
A common real pattern
A dropdown menu is usually just an Overlay anchored below the button that opens it, positioned "Manual," with a click-outside-to-close setting — one interaction, not custom code.