How to Create a Modal in Figma Prototype Easily

To create a modal in a Figma prototype, design your modal frame separately and use the Overlay interaction to display it on top of your main screen. Link a button or element to this modal frame with the Open Overlay action and set the overlay position and close options.

Syntax

In Figma prototypes, modals are created using the Overlay interaction. The key parts are:

• Trigger: The element (like a button) that opens the modal.
• Action: Set to Open Overlay to show the modal.
• Overlay Frame: The separate frame designed as the modal content.
• Position: Where the modal appears on the screen (center, manual, etc.).
• Close Options: How the modal closes (click outside, close button, escape key).

figma

Trigger Element -> Interaction -> On Click -> Open Overlay -> Select Modal Frame -> Set Position and Close Options

Example

This example shows how to create a simple modal that opens when you click a button and closes when clicking outside or pressing Escape.

text

1. Create a main frame named "Main Screen" with a button labeled "Open Modal".
2. Create a separate frame named "Modal" with your modal content (e.g., text and a close icon).
3. Select the "Open Modal" button, go to Prototype tab.
4. Add an interaction: On Click -> Open Overlay -> Choose "Modal" frame.
5. Set overlay position to "Center".
6. Enable "Close when clicking outside" and "Close when pressing Escape".
7. Preview the prototype and click the button to see the modal appear and close as expected.

Output

When clicking the "Open Modal" button, the modal frame appears centered over the main screen. Clicking outside the modal or pressing Escape closes it.

Common Pitfalls

• Not creating the modal as a separate frame causes the overlay option to be unavailable.
• Forgetting to set the interaction on the trigger element means the modal won't open.
• Not enabling close options can trap users inside the modal.
• Placing the modal frame inside the main frame can cause layering issues; keep it separate.

text

Wrong:
- Modal content inside main frame without separate frame.
- No interaction set on button.

Right:
- Modal as separate frame.
- Button interaction set to Open Overlay.
- Close options enabled.

Quick Reference

Remember these quick tips when creating modals in Figma prototypes:

• Design modal as a separate frame.
• Use Open Overlay interaction on trigger.
• Set overlay position to center or manual as needed.
• Enable close options for good user experience.
• Test prototype preview to confirm behavior.

Key Takeaways

Create your modal as a separate frame to use it as an overlay.

Use the 'Open Overlay' interaction on a button or trigger element to show the modal.

Set the overlay position and enable close options for smooth user experience.

Test your prototype preview to ensure the modal opens and closes correctly.

Avoid placing modal content inside the main frame to prevent layering issues.