Chapter 5 › Lesson 25

25. Build a Bottom Sheet Component

Skills: Full-width panel with rounded top corners; Drag handle at top; Content area inside sheet; Off-screen position for closed state; On-screen position for open state

A bottom sheet slides up from the bottom of the screen with content inside. You'll build it as a component with two positions: off-screen (closed) and on-screen (open).

Step-by-step

1. Press F and create a frame the full width of your screen (e.g. 375 wide × 400 tall)
2. Set the frame's corner radius to 20px on the top-left and top-right corners only — use the corner radius controls to set top corners to 20, bottom corners to 0
3. Give the frame a white fill and shadow for depth
4. Add a drag handle at the top: draw a small rounded rectangle (40×4) centered horizontally, colour #d0cec6
5. Add a vertical auto layout frame inside for your sheet content (text, icons, buttons, etc.)
6. Select the entire bottom sheet and press Ctrl + Alt + K to make it a component
7. Add a variant property "Position" with values "Closed" and "Open"
8. In the Closed variant, move the entire sheet downward so it's positioned off-screen (Y position = height of screen + 100)
9. In the Open variant, position the sheet so the top edge is visible on screen
10. Save — you now have a bottom sheet that can slide in and out