Chapter 5 › Lesson 28

28. Prototype: Modal Open and Close with Backdrop Dismiss

Skills: Place modal as overlay frame; On click (trigger button) → Open overlay; On click (backdrop) → Close overlay; On click (Close button) → Close overlay; Smart Animate for smooth open/close

You'll prototype a modal that opens when a button is tapped and closes when the backdrop or close button is tapped — with smooth Smart Animate transitions.

28. Prototype: Modal Open and Close with Backdrop Dismiss
Figure: A modal dialog with centred card, dark backdrop, title, body text, and action buttons. Uses boolean Show property.

Step-by-step

  1. Create your main screen with a "Open Modal" button
  2. Place your modal component as an overlay on the main screen
  3. Set the modal instance to the Closed variant (or Show = False)
  4. Switch to Prototype mode
  5. Select the "Open Modal" button, add interaction: On click → Change to Modal (set to Open variant or Show = True), Smart Animate, 250ms
  6. Select the backdrop layer of the modal, add interaction: On click → Change to Modal (set to Closed variant), Smart Animate, 200ms
  7. Select the Close button (or Cancel), add interaction: On click → Change to Modal (Closed), Smart Animate, 200ms
  8. Select the Confirm button, add interaction: On click → Navigate to next screen (Instant transition)
  9. Set main screen as Starting frame
  10. Test the full flow: tap Open Modal → modal appears with fade → tap backdrop → modal closes

Pro tip

For backdrop dismiss: the interaction is added to the backdrop rectangle layer itself, not the modal component. This way tapping anywhere outside the modal card closes it.