Swipe to delete animation | Figma interactive Components tutorial | Figma micro interactions
Вставка
- Опубліковано 28 кві 2022
- In this great figma tutorial you will learn how to create an interactive component which is a list item with its the ability to delete by tapping on a delete icon or by swiping it.
You will start by animating two icons, the delete icon and the archive icon, creating their cool micro interactions. Continue by creating the actual list item that will hold them and have its own actions to delete either by tapping or swiping using the figma drag trigger interaction.
Link to download the file of the tutorial -
drive.google.com/file/d/1vrMD...
In this tutorial we are using components, variants, interactive components, smart animate, auto layout.
If you are not familiar with any of these or part of them, you can definitely check out these tutorials to catch up with it:
Components and variants, part 1 and 2 -
• Figma tutorial: compon...
• Figma tutorial: compon...
Smart animate -
• Figma tutorial for beg...
Auto layout -
• Figma tutoria: Auto La...
#yarivbe - Навчання та стиль
Another great video from you Yariv... A blessing to have people like you which are taking from their time for teaching and guiding the rest of us... Thank you very much 4 this 🤠...
Thank you so much again! ✌ Really happy you find the tutorials good and helpful! '😊
Worth trying Yariv u made this easy when compared to other tutorials for swiping out ❤
Thank you so much for the amazing feedback Raja! I highly appreciate it and happy to know it was productive 🙂⚡
Awesome work. Much appreciated.
Thank you so much for the great feedback! Highly appreciated! ✌️🔥
great content. very helpful and informative. please keep these videos coming :)
Thanks a lot for this great feedback! I really appreciate it ✌ Will do! :)
You are doing a great job, thanks.
You are most welcome my friend :) Thanks a lot for the great feedback - i appreciate it a lot!
GREAT JOB- thank you sir!
You are most welcome! Thanks you so much for the amazing feedback ✌I highly appreciate it ⚡
I really appreciate this sir.... Thank you!
Thanks a lot for the great feedback! I really appreciate it 🙂 Happy to know it was helpful ✌️
best tutorial ever
Thank you so much for this amazing feedback! I highly appreciate it 🔥🙂
excellent content I was able to do it with you for the first time
Thanks a lot for the amazing feedback! Happy to know it was helpful 😊I appreciate it ✌
Hi there !! Great tutorial Yariv. I appreciate it even more as you seem to be a very empathetic person 😉 One more subscriber on your channel.
Thank you so much for this amazing feedback! I highly appreciate it! That is what keeps the channel alive and kicking 🙂🔥
Thanks much !
You are most welcome :) and thanks a lot for your great feedback! I really appreciate it 🙂🔥
28:05 i like when you thump loudly on the keyboard it jolts me back into focus, cause i have a bad span attention
Happy to know you liked it 😜 so at least it did a good job ✌️ thanks a lot for the feedback on that! I appreciate it :)
You've made a click/drag delete tutorial in figma, its great tutorial, i like it.
And now btw, can you make a tutorial how to add object/icon input from one frame to another?? Please.
it means when you click an icon/object in a frame, it will add an icon/object in another frame.
Hi bironk. Thanks a lot for great feedback on the tutorial! I appreciate it ✌
About the tutorial you requested - yes of course, i can make it - will try in the next few days.
I will give an example on an "Add" button - which seems right for this case, i guess? Is that what you meant? Lets say i tap / click on "Add" button and it adds a user to me list.
If you have a more specific use case you want me to show then tell me 😊
Great tutorial, Yariv! Had a question - If I navigate to some other page and then come back to this list, the object maintains the last state. Is there a way for it to have all the list elements back?
Thanks a lot for your great feedback Shuchi! I highly appreciate it 🙂⚡
To your question -
To make it short - no :) But... in general, if you really think about it, it behaves, flow wise, like it should. Let me give you an example -
You opened an email app, you deleted 2 or 3 emails from the list, you tapped on one mail and got its screen to read it, hit the "back" button to go back to your mails list. in real, you wouldn't want that the emails you already deleted from that lisy, to show up there again :) Makes sense?
You can just hit "R" on your keyboard and show it again from the start :)
I hope my answer helps.
@@YarivBE thank you so much for the explanation!
@@ShuchiMuleyArt
You are most welcome Shuchi!
Any idea why in my file I'm only allowed to have one drag interaction that functions? I set up my file exactly like yours and yet Figma will not allow it to do both the swipe to delete and archive motions. It's either one or the other, dependent on which comes first in the interactive panel. However if one of the 'drags' is set to 'click' then I can get both interactions.
Hi Ian :) Its hard to say without seeing the actual file and understand the set up there - basically there shouldnt be a reason for it not to work because you can have a few interactions per element. Can you send a link to your file tp see whats the issue there? Will be glad to help with it. Thanks!
You can use this email if you want -
yariv.be1@gmail.com
same issue with me either I could do delete interaction or archive interaction both are not at the same time
hey rather than connecting from parent frame conect from child frame it will work
When I restarted the view mode it didn't restart the layout that I did. it only compiles at the very top part of the frame.
Hi Ricky. Yes you are right - its a bit "tricky" when hitting the "restart" on the view/presentation mode - it doesnt make the interactive component/s to go back to default / starting state. Its not anything wrong we are doing, its just something that Figma doesnt do right at the moment. Hoping they will improve that and it work better, meaning, when click "restart", it sets all to the starting state.
Assuming i understood exactly what you meant :)
@@YarivBE Thank you for answering, but what can I do so that when I hit 'R' it will go back to default? because i perfectly follow your step and when i deleted all the text and hit 'R' the things that i made didn't go back to start like it wasn't really there in the first place. So i basically need to reload my whole page to perfectly restart it.
@@rickyintal8196 So yes - sometimes with this kind of interactive components, thats the situation and there is nothing really that you can do with that - just reload the page.
Put in mind, that as a designer, you demonstrate a screen behavior - meaning - its enough to show it on 2 - 3 list items and thats perfect. The job gets done and what you wanted to show in the prototype went through perfectly. So thats great already.
You are most welcome of course :) If any more questions - feel free to ask.