The Only Drag And Drop Figma Tutorial You Will Ever Need

Difficulty: ★★★☆☆
You'll learn how to create Kanban style drag and drop interaction on Figma.
If you are encountering issue, check the following:
- Card naming
- Use smart animate
- Use FIXED WIDTH and FIXED HEIGHT

[@saisumithchetpally2460]

Thank you for this. Helped me with an interaction I was trying to build.

[@productmeow]

Glad I could help!

[@jernpeterson]

Excellent video, thanks!

[@productmeow]

Glad it helped!

[@daniellaqueirozpereira7062]

Thank you so muchhhhh, so cool

[@productmeow]

Glad it helped !

[@anwiwah]

I like it

[@productmeow]

Glad you like it !

[@teegees]

Nice!
Is it possible to use drag and drop to reorder the card order in a single column, with the cards in a vertical auto layout?

[@productmeow]

Yes, absolutely !
You can experiment with the approach I’ve demonstrated in the video. Same technique, with slight tweaks to the implementation.
If you have difficulty achieving the results you want, feel free to let me know. I’ll create a video tutorial for it.

[@teegees]

@@productmeow Thanks! I was able to hack it together using a similar technique but it relies on me faking the drag and drop.
One thing I’m unable to figure out is this:
- I have a vertical auto layout list with some layers in there
- On each layer there’s a button to delete the layer from the list
- I want the item below the deleted item to automatically shift up (since it’s auto layout)
I tried variant swapping with a variant which is 0 pixel height, I tried using a visibility variable, and I can get it to work once, but then it stops working, I tried a conditional, I tried multiple interactions, nothing works!
Ideally my list items are both draggable, AND deletable in the list. It sounds easy right? Maybe I’m missing something...