Prototype a draggable carousel with On Drag

WHAT THIS TESTS The interviewer wants to know whether you can translate a real gesture-based interaction into Figma's prototyping model, which is constrained and frame-based rather than code-based. They are checking that you reach for the correct trigger and understand its limits.

A GOOD ANSWER COVERS Start by placing the image frames in a horizontal row inside a fixed-size viewport frame that clips overflow. Create one prototype frame per resting slide position, each showing the corresponding image centered. Connect adjacent frames using the On Drag trigger, which fires when the user drags in a direction and releases. Set the action to Navigate To with Smart Animate so the slides slide smoothly, and pick an ease-out curve with a short duration. Crucially, handle the boundaries: the first slide should only allow dragging left to reveal slide two, and the last slide should not navigate further, so the carousel feels bounded rather than infinite.

COMMON WRONG ANSWERS Using On Click or On Tap to simulate swiping, which loses the directional drag feel. Forgetting that On Drag has no live finger-following in older flows, so you should set expectations about fidelity. Ignoring end states, which lets users drag into blank space.

LIKELY FOLLOW-UPS How would you add dot indicators that update per slide. How would you fake momentum or snapping. How does this differ from how engineers implement a real carousel with transform and touch events. When would you prototype in code instead.

ONE CONCRETE EXAMPLE For a three-image hero carousel, you build frames Slide1, Slide2, Slide3. On Slide1 a left drag navigates to Slide2 with Smart Animate; on Slide2 left goes to Slide3 and right back to Slide1; on Slide3 only right drag works. Each frame also shows three indicator dots with the active one highlighted, so the prototype communicates position as well as motion.