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

[@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 :(

[@vamboo8918]

thanks, you are a literal figma super san

[@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!

[@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 🤓

[@harrymorgan595]

You're lifesaver

[@p.ux_land9905]

Great video❤

[@tauriurbanik5509]

Thanks. Keep them coming.

[@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.

[@AnitaSmejda]

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

[@shadefakoya]

Helpful video but i've been struggling to follow the video with the new updates to the figma design panel. Would love if you could update this

[@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

[@efeonkar980]

That was cool thanks m8

[@samnick991]

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

[@equiz]

Great tut, thanks for the content!

[@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 KZbin - thank you for your understanding! Mavi