How to Use Drag Interaction in Figma: Simple Steps

In Figma, you can use drag interactions by selecting an object, then adding an Interaction with the trigger set to Drag. This lets you create prototypes where users can click and drag elements smoothly across frames or within constraints.

Syntax

To set up a drag interaction in Figma, you use the Prototype tab and configure these parts:

• Trigger: Choose Drag to enable dragging.
• Action: Usually Navigate To or Move In to define what happens when dragging.
• Destination: The frame or position where the object moves.
• Animation: Defines how the object moves (e.g., Smart Animate for smooth motion).

figma

Select object > Prototype tab > Interaction > Trigger: Drag > Action: Navigate To or Move In > Destination frame or position > Animation: Smart Animate or Instant

Example

This example shows how to make a circle draggable across two frames in a prototype.

text

1. Draw a circle on Frame 1.
2. Duplicate Frame 1 to create Frame 2.
3. Move the circle to a new position in Frame 2.
4. Select the circle in Frame 1.
5. Go to the Prototype tab.
6. Add an interaction with Trigger: Drag.
7. Set Action: Navigate To Frame 2.
8. Choose Animation: Smart Animate.
9. Preview the prototype and drag the circle to see it move smoothly.

Output

In prototype preview, dragging the circle moves it smoothly from its position in Frame 1 to the new position in Frame 2.

Common Pitfalls

• Not setting the destination frame or position correctly causes the drag to not work.
• Forgetting to use Smart Animate can make the drag feel jumpy instead of smooth.
• Dragging outside constraints or frames may cause unexpected behavior.
• Using drag on objects without duplicate frames or states will not show movement.

text

Wrong:
Select object > Prototype > Trigger: Drag > Action: None

Right:
Select object > Prototype > Trigger: Drag > Action: Navigate To Frame 2 > Animation: Smart Animate

Quick Reference

Step	Description
Select Object	Choose the element you want to drag.
Go to Prototype Tab	Switch to the prototype settings.
Set Trigger	Choose 'Drag' as the interaction trigger.
Choose Action	Select 'Navigate To' or 'Move In' for drag effect.
Set Destination	Pick the frame or position to move the object.
Pick Animation	Use 'Smart Animate' for smooth dragging.
Preview	Test the drag interaction in prototype mode.

Key Takeaways

Use the Prototype tab to set 'Drag' as the trigger for interactions.

Create duplicate frames with moved objects to enable smooth drag animations.

Always use 'Smart Animate' for natural drag movement.

Ensure the destination frame or position is correctly set to avoid errors.

Test your drag interaction in prototype preview to confirm behavior.