Chapter 5 › Lesson 26

26. Prototype: Bottom Sheet Overlay with Smart Animate

Skills: Place bottom sheet as overlay frame; Closed state: positioned off-screen; Open state: positioned on-screen; On click → Open overlay with Smart Animate; On click (backdrop or handle) → Close overlay

You'll place the bottom sheet as an overlay in your prototype. An overlay appears on top of the current screen — perfect for modals, sheets, and menus. Smart Animate makes the slide transition smooth.

26. Prototype: Bottom Sheet Overlay with Smart Animate
Figure: A bottom sheet positioned at the bottom of the screen with a drag handle. Content area uses vertical auto layout.

Step-by-step

  1. Create your main screen with a button that says "Open Sheet"
  2. Select the bottom sheet component and press Ctrl + Shift + O to set it as an Overlay (or set it up in the Prototype panel)
  3. Position the overlay so the bottom sheet's Open variant is visible on screen
  4. Set the overlay to Open variant by default (we'll hide it initially with positioning)
  5. Actually, the common approach: place the bottom sheet in a separate frame positioned below the screen, and use the prototype interactions to slide it in
  6. Alternatively: place the bottom sheet component inside your screen frame. Set the instance to Closed variant. Smart Animate will handle the position change
  7. Switch to Prototype mode
  8. Select the "Open Sheet" button, add interaction: On click → Change to Bottom Sheet (set to Open variant), Smart Animate transition, 300ms
  9. Add a close interaction: tap a close button or backdrop → Change to Bottom Sheet (set to Closed variant)
  10. Test: tap Open → sheet slides up with Smart Animate. Tap Close → sheet slides back down

Pro tip

The simplest approach is: place the bottom sheet instance directly on your screen. Set it to Closed variant. Add an interaction that Changes to the Open variant with Smart Animate. No overlays needed.