Drag Interactions
Enable dragging on elements for sliders, carousels, swipeable cards, and sortable lists.
Prototyping
No shortcutAdvanced11 min readQuick Reference
Drag Interactions
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Advanced⏱ 1–2 hours to master
Key Settings
Set trigger:Direction:Destination:Back:
Drag Interactions let users drag elements horizontally or vertically. They are used for carousels, sliders, swipeable cards, and drag-to-dismiss patterns.
Where to Find It
In the Prototype panel, set the trigger to 'While dragging' and define the drag behavior.
How to Use
- Set trigger: Add a prototype connection with 'While dragging' as the trigger.
- Direction: Choose the drag direction — Horizontal or Vertical.
- Destination: Set which frame appears after the drag completes (e.g., next card).
- Back: Define what happens when the user releases without completing the drag.
Pro Tips
- Use drag interactions for swipeable onboarding screens and image carousels.
- Set 'Smart Animate' for smooth, physics-based drag transitions.