How to prototype modals and overlays in Figma
Introduction
When a user opens a modal or a dropdown menu, they don't leave the current page; the new content sits on top. Figma handles this specifically with the 'Open overlay' action.
This guide demonstrates how to make a modal window appear centered on your screen with a background dim effect.
Prerequisites
- •A main screen frame
- •A separate frame designed as the modal (usually smaller)
Guide Steps
Trigger the overlay
On your main screen, select the button that should open the modal. Drag a connection to the separate modal frame.
Choose 'Open overlay'
In the interaction menu, change the Action from 'Navigate to' to 'Open overlay'. New options will appear.
Position and background
Set the Position to 'Centered' (for modals) or 'Manual' (for dropdowns). Check the box 'Add background behind overlay' and set it to black at 25-50% opacity to dim the background.
Enable closing
Check 'Close when clicking outside' for better UX. Also, ensure you add a 'Close' icon inside the modal frame and link it back with the action 'Close overlay'.
Common Mistakes to Avoid
- ×Designing the overlay inside the main artboard instead of as a separate frame.
- ×Forgetting to make the overlay frame fill customized (if it's transparent, it might look odd).
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.