Figma Swipe to Delete | Interactive Components
Вставка
- Опубліковано 9 лип 2024
- In this tutorial, I will show you how to make Swipe to Delete Animation in Figma with Interactive Components. Also, you will learn how to use Frames, Components, Figma Properties, Variants, Figma Auto Layout, Figma Prototype and Figma Smart Animate.
In this video I show you:
00:00 Intro
00:26 Make an Rectangle
01:00 Add Icon
01:14 Create a Frame
02:33 Create Component
02:45 Properties
02:50 Add Variant
03:32 Clip Content
03:44 Prototype Part 01
05:50 Auto Layout
06:37 Delete Card 01
07:00 Prototype Part 02
======
Watch my others Figma Interactive Components tutorials:
Floating Action Button (FAB): • Floating Action Button...
Animated Like Button: • Animated Like (Heart) ...
Search Bar (Keyboard Input Animation): • Search Bar (Keyboard I...
Loading Animation: • Loading Animation | Fi...
Interactive Star Rating: • Figma Star Rating Anim...
Interactive Slider: • Figma Slider Animation...
Interactive Button: • Figma Interactive Butt...
Radio Buttons: • Figma Interactive Comp...
Checkbox: • Checkbox | Figma Inter...
Dropdown Menu: • Figma Dropdown Menu Tu...
Input Fields: • Figma Interactive Comp...
Progress Bar: • Figma Progress Bar Tut...
Toggle Switch Button: • Figma Toggle Switch Bu...
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials - Наука та технологія
thank you for making a great tutorial!!! I love all your tutorials 🥰🦾
Hi! 😃 I’m glad to hear that, feedback like this makes me motivated to keep making more Figma tutorials🤩 Thank you so much for watching🙏 Share our channel with your friends😀 Have a great week!
The first tutorial that actually works for me. Thank you! 😍
Hi!😃 I’m glad to help!🤩 Thank you so much for the feedback! What do you want to learn next? Have a great weekend!
Man, such a good explanation! My respect!
Hi!😃 Thank you very much for the feedback! Comments like this motivate me to keep posting more tutorials! Have a great week!
Thank your! Very helpful tutorial
Hi! I’m glad to help!🤩 Thank you so much for watching, share the channel with your friends!😃 I will keep posting videos every week and share much more knowledge. Have a great week!
Really good! If you add a third variant "the eliminated one" with a height of 1 and an opacity of 0 you won't have to create more "pages".
Hi!😃 Great observation! Thank you so much for sharing your knowledge! Have a great week!
Thanks to every tutorial ❣
Glad to help!🤩 Thank you so much for the feedback!🙏 Share our channel with your friends and help us grow and share more knowledge! Have a great week!😃
Greate work!!! Need more!!!
Glad to help! 🤩 Thank you so much for the feedback! I will keep posting videos every week, share with your friends 😃 Have a great week!
thanks for explaining! wish there was a download link for the working file.
Amazing
Glad to help!🤩 Thank you so much for the feedback! Have a great week!
@@ChinskDesign you are welcome mate.
Sir I want to know that how can I make like all the frame delete
Hi!😃 In this case you can create a “Clear All” button on the first screen and delete all the cards of AutoLayout on the second screen. Then make the “On Tap” animation. If you want, I can do this tutorial later here on the channel🙂
First of all I am a strong subscriber of your chennal. I see your all video that you upload in a week. In this video you delete only one message.
But I want to know how can I delete all the messages one by one not all messages in one tap
First of all I’m glad to hear that😃Feedback like this makes me motivated to keep making more videos🤩 Thank you so much🙏 About the tutorial don't worry I'll work on it😃 Have a great week!
Any Figma file for this?
Hi!😃 I don't have the file anymore. Do you need help?
Has anyone cracked the challenge yet of how to get this function to work AND have the component be of responsive width? Whist you can set parts of the inital variant to "fill container", it breaks on the sliding view because to get it "off screen" it needs to be fixed. Fill container on that variant would show everything on the canvas. It's breaking my brain.
I think the tutorial would've been better if you actually spoke in it or at least used some text
Hi!😃 Thanks for the feedback! I'll work on it! Which next tutorial do you want to see here on the channel? Have a great weekend!
I want to delete by swipe all the message. How can it possible?
In this case you can create a “Clear All” button on the first screen and delete all the cards of AutoLayout on the second screen. Another option is to make intermediate removal screens for each card you want to delete. If you want, I can do this tutorial later here on the channel🙂
Would love a tutorial that shows the continuation of deleting of all messages!
Hi!😃 I posted another video “Swipe to Remove All Cards” recently. Hope you like. Let me know what you think of the tutorial. Have a great week!
@@ChinskDesign Amazing thank you so much! Now I can continue the animation 😊
Hi! I’m glad to hear that!🤩 Thank you so much for watching, share the channel with your friends!😃 I will keep posting videos every week and sharing much more knowledge. Have a great week!