Chapter 5 › Lesson 27

27. Build a Modal Component

Skills: Centred card with dark backdrop; Title, body text, action buttons; Show and hide variants using boolean; Corner radius and shadow for modal card

A modal is a centred dialog that appears on top of the screen with a dark backdrop. You'll build a modal component with show/hide functionality using boolean properties.

Step-by-step

1. Press F and create a frame the full size of your phone screen (375 × 812) — this is the modal container (backdrop)
2. Fill it with a semi-transparent dark colour (rgba(0,0,0,0.5)) — this is the backdrop
3. Inside the backdrop, create a centred card: press R, draw 300×200, fill white, corner radius 16
4. Add a title text layer, body text layer, and two buttons (Cancel + Confirm) inside the card using vertical auto layout
5. Add a subtle shadow to the card for depth
6. Select the entire modal (backdrop + card) and press Ctrl + Alt + K to create a component
7. Add a boolean property called "Show" — default to True (visible)
8. Add a variant property "State" with values "Open" and "Closed" if you prefer variants over booleans
9. For the Closed state: set the entire component's opacity to 0% and disable click-through (or position it off-screen)
10. Test by creating an instance and toggling Show on/off