Swipe to delete interaction using @Figma Interactive Variants with source file 🔗
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 👉 Find the source file here: www.figma.com/community/file/...
👩💻Auto layout basics here:
• Figma Auto layouts bas...
• Figma Auto layouts bas...
🎉🎉Join our mentorship program here 👉 www.upglance.com/
👉 Follow me on my socials for more:
/ akashy
/ kash__91
dribbble.com/akashy
👉 My TH-cam setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc
This video was amazing! Was able to easily elevate some old designs with this. Thank you so much!
13:55 I took a slightly different route and created a third variant called Deleted and duplicated the extended variant with the trash can, changed the height to 1px (it won't allow 0) and changed the opacity to transparent. The benefit is that you can swipe and "delete" any item in the list and you don't need to do the additional artboards to mimic the deletion of a specific example.
Hopefully that adds some value to an already great tutorial.
Thank you for this!! It's really helpful, you saved my day!!!!
Thank you for this detailing video. Have always been a fan of your teaching style.
Thanks Akash! Very well explained.
Dude, thanks for being such a good tutor for us..! Your good deeds will sure shot benefit you further...
Thank you😇😇😇
Thank you so much 🙂
Thank you .
Hey Akash.. Following u for a long time.. It's always a great learning with u...
Thank u....
thank you😇😇🤠
Thanks!
Welcome 😇
13:00 with Content Reel you don't need to select it one by one like that. You can select multiple layers (Ctrl+Click is a fast way to do that) and click Apply all and it will populate every single one of them with varying content. It works with both text content and image content (the avatars)
Yup, actually while recording it was not doing that. Hence i just did one by one selection painstakingly.
Hi Akash .. Super cool tutorial. How can one delete the card without calling it from the component? That is where I am stuck.
Hey Akash It's really helps me a lot, Thank you so much. By the way , How did you change your cursor(basic cursor -> white circle one) while playing your prototyping. I tried to change it, But I couldn't find it.
Hey
So the cursor automatically changes in Figma, when you are in the prototyping mode (when you click the play icon and goes to the prototyping viewing mode). :)
@@AkashYadavUX Oh then, I really don't know why my cursor didn't change in same situation. But thank you for letting me know😁
You are too much underrated 😭😭 do u have any premium paid course where you will teach a full app making process with all the possible functionalities... It's better to learn from a single place and all combined. Please make a full course... Would love to learn from you
hey man!
iam recording a mini interaction course, hoping to get it up soon. Will be building other modules too so fingers crossed🤟
@@AkashYadavUX we need MEGA course... 😂 Will be waiting for your courses
Bro plz dont use pure black it is not comfortable to eyes ! Great Tutorial 😁 This helps a lot as a beginner
Hey Ketan, agreed. Recorded this video in a hurry, forgot to change the bg 🙈. Realised it post recording the video. My usual videos are on light theme.✌️✌️
@@AkashYadavUX Agreed 😁 We appreciate your Hard work ❤️
Hi Aakash, This is a great tutorial but i am looking for another part of it if there is any, need to add another action if swipe right, like swipe left deletes, swipe right archives, is there. any video for that or any components you've build that i can download and use ? pls advise.
Hi Aslam
I didnt make a make prototype on this use case. But you can execute this both side swipe pretty easily. Just follow the exact same method in other direction for right swipe. Figma allows multiple drag interaction to a single layer, so the slider layer can be swiped right or left and can change state accordingly. Do try it out, it should work✌️
@@AkashYadavUX i am pretty new to iux design and figma, i tried above but problem is i dont see drag once i used the drag once, for now i am able to open left button on tap and right on drag. drag becomes disable so unable to reuse. i'll try again carefully .
Hi Akash, i tried adding two drag interactions but it doesnt work, its just picks first interaction, if i drag towards right nothing happens, looks like its doesnt identify the direction or drag, is there any other way to achieve that behavior ?
Hey Aslam
I think a lot of folka have the same doubt. Let me create a quick video on this as well. Figma automatically picks the direction for drag but let me create a quick tutorial on this🤟
@@AkashYadavUX thank you, you are awesome! will wait for it
What plugin did you use for changing the names and images?
Hey James!
I used" content reel by Microsoft " plugin to get all the dummy data.😇
Sir , how can I contact you ?
I have something interesting to talk to you about ! Thank you 😀
You can connect me on Insta: @kash__91 ✌️
when I prototype I don't have "Chang to" command I don't know why
Hey !
I have explained it in the starting of the video. If you dont see "Change to" in your prototyping setting, then this means your figma version don't have interactive variants enabled. Interactive variants are still in beta and you have to request Figma to access it. Just google search Figma interactive components and fill the form for it. It will get enabled ✌️✌️😇😇
@@AkashYadavUX Wow Thank you vary much I can swipe like you already :)
Hi Akash, I did everything step by step but when it came to viewing the prototype, its not working. Do you know the possible reasons why this is happening? please get back to me, thanks
Possible reasons would be elements not properly present in frame or the bounds of the frame that contains the swipe elements.
Check the source files once to see what could be an issues😇
www.figma.com/community/file/1009059423270374419/Swipe-to-Delete-Interaction-prototype
I cant find better video than this on youtube and on udemy. Don't you have any course on Udemy??
Thanks Himanshu. I am collaborating with Udemy, so will be recording a course soon. I might publish the course early on my website due to some restrictions on Udemy, so subscribe to the site www.upglance.com/
@@AkashYadavUX sure! thanks
Sorry to say am very junior in front of you but this is not the perfect tutorial to understand swipe to delete