Drag & Drop Effect | Adobe XD Prototype 2019
🔧 What You’ll Learn
Setting Up Artboards
Create two artboards: a starting state (with objects to drag) and a destination state (where dragged objects land).
Wiring the Interaction
In Prototype mode, connect the draggable object from the first artboard to the second.
Choosing Trigger & Action
Set Trigger to Drag and Action to Auto‑Animate to make the object move smoothly between artboards.
helpx.adobe.com
+8
youtube.com
+8
helpx.adobe.com
+8
community.adobe.com
medium.com
+1
community.adobe.com
+1
helpx.adobe.com
+1
medium.com
+1
Adjusting Animation
Choose easing options (e.g. ease-in/out) for natural motion.
Previewing the Prototype
Click “Preview” to test the drag — the object gracefully transitions according to your settings.
💡 Why It Matters
Enhanced Interactivity: Drag actions make prototypes feel more lifelike.
No Code Needed: Leverages Adobe XD’s Auto‑Animate feature — no JavaScript or external tools required.
medium.com
Quick Workflow: Simple artboard linking and trigger/action selection yield impactful results.
🚀 Quick Summary
Use Drag + Auto‑Animate to simulate moving UI elements.
Connect source and destination artboards.
Trigger the interaction via Prototype mode.
Choose easing for realism.
Preview to validate.
FaceBook: www.facebook.com/marifm1986
#drag&dropPrototype
#adobeXD_Drag&Drop
#techwake360