Set Up a SWIPE TO DELETE Interaction in Figma (Prototyping Tutorial)

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Get the SOURCE FILES for this project ($1.99): payhip.com/b/8...
In this Figma interactive component prototyping tutorial, we're going to take a look at creating a very well-known (gmail) interaction where you can swipe left to delete an object, message, email or other. We will be using the Smart Animate Figma prototyping feature along with drag interactions to achieve this result. We will also create our own delete icon and go through everything step-by-step.
How to set up / create / design / build an interactive figma component prototype that allows you to swipe (tap & drag) an object to delete it
--------
© 2022 Mavi Design

[@javi_park]

great video. i'm shocked figma hasn't made this easy. it's such a standard pattern but creating this takes 100x longer than it should :(

[@MariannaSurzenko]

Oh, that's how proper swipe-to-delete interaction should be built :D Thank you for making this video, I believe it can save a lot of time and tons of nerves for those new to Figma 🧡
When I just started to learn UX/UI through one of the courses in Coursera, my first prompt was to build a cat food delivery app. Instead of making a simple user flow, which was kinda expected from the beginner, I decided to add a complex search feature, which will allow users to search for a product based on both desired and undesired ingredients. To make it more fun, I decided to use swipe to add/swipe to delete interactions, instead of yes/no checkboxes. And now imagine the two weeks old Figma user, who is trying to build such a complex interaction :D I spent days, watching endless youtube tutorials and trying to understand how those freaking components work. Was super proud of myself when I was finally able to solve this problem (better not to see how the interactive component looked like - it was such a mess). And you know what? This feature failed in the usability study :D Users tried to click instead of swipe and were super frustrated when nothing happened. So I even had to add a small video clue to the prototype to overcome this issue in the next round of testing.
Sorry for the long comment. It was just such a painful, but fun learning experience :D
www.figma.com/proto/M1MLLAnE2j0As6s6LcC9if/CatCheers-app?node-id=527%3A23984&scaling=scale-down&page-id=527%3A21377&starting-point-node-id=527%3A23870

[@mavidesign]

Thanks for sharing your learning journey! Yes, it's all about the end user which sometimes tends to flip your designs upside down 😄 Keep on learning!

[@vamboo8918]

thanks, you are a literal figma super san

[@HEALTHEWORLDKINGOPOP]

Absolutely amazing stuff, I really love your prototyping skills 🤩

[@mavidesign]

I appreciate it!! Great to have you here 😊

[@HEALTHEWORLDKINGOPOP]

@@mavidesign Glad to be here 🤓

[@n_mckean]

Hi. Got almost everything working, but in mine, when the item is deleted, even though the height is 0.001, I get extra space left behind once the item is removed. On a single item its not too bad, but when you delete a few in a row it is very noticeable.

[@harrymorgan595]

You're lifesaver

[@tauriurbanik5509]

Thanks. Keep them coming.

[@efeonkar980]

That was cool thanks m8

[@p.ux_land9905]

Great video❤

[@equiz]

Great tut, thanks for the content!

[@AnitaSmejda]

Hey, How to add more , for example pop up (notification) at below „have been deleted”? After delation by swiping?

[@samnick991]

Can uh plzz make the tutorial of disappearing scroll menus which is used in Zara app

[@talaabuhejleh8592]

It worked !😁 but my question where to change the image and the text for each time ? In the component section?

[@mavidesign]

Awesome! And yes! The "contents" component is where you want to change the contents. Also you can create multiple variants of "contents" and then change the "contents" instance on the screen frame under "swipe to delete > contents container > contents (here you change variants)"
This enables you to create multiple rows, each with a different content, while all of them are able to be swiped :)
Mavi

[@Bluray2]

Problem with "on drag" is that, it works even if you drag it in opposite direction :/

[@floritoons4714]

i have the same issue

[@n_mckean]

Figma doesn't have directional drag, you just have to rely on the fact that it's not intuituve for a user to swipe in any other direction. That's the difference between prototype and build.

[@harshavardhan8748]

Hey Mavi, Do clear my doubt im facing. after making fixed width with varient 2 by giving independant spacing but the content does not move after giving fixed width. why this happen?

[@mavidesign]

To get personalized help and feedback on your project, please join my free Discord server.
You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
I'm unable to help everyone over RUclips - thank you for your understanding!
Mavi