How to Create Interactive Prototypes with Overlays

Design your overlay content in a separate frame. Make it smaller than your main screen (e.g., a modal dialog, tooltip, or dropdown menu). Set the frame background and add your content.

In Prototype mode, select the trigger element (button, icon, menu item). Drag the connection noodle to your overlay frame. The arrow will connect them.

In the Interaction details panel, change 'Navigate to' to 'Open Overlay'. This tells Figma to show the overlay on top of the current screen instead of replacing it.

Configure overlay position: Choose 'Centered' for modals, 'Manual' to place it precisely, or select a specific position (Top Left, Bottom Right, etc.). For dropdowns, use 'Manual' and position it below the trigger.

Add overlay background: Check 'Add background behind overlay' and choose a color (usually black at 40-60% opacity). This dims the main screen and focuses attention on the overlay.

Set close behavior: Check 'Close when clicking outside' to dismiss the overlay when users click the background. For modals, you might uncheck this to force users to interact with buttons.

Create a close interaction: Inside the overlay, add a close button (X icon). Drag a connection from it back to the main frame (or use 'Close Overlay' action). Set trigger to 'On Tap' or 'On Click'.