Figma Swipe to Delete | Interactive Components

Рет қаралды 10,872

Күн бұрын

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

Пікірлер: 33

@bowbowbow123 Жыл бұрын

thank you for making a great tutorial!!! I love all your tutorials 🥰🦾

@ChinskDesign Жыл бұрын

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!

@AndrewKupreychik 8 ай бұрын

Man, such a good explanation! My respect!

@ChinskDesign 8 ай бұрын

Hi!😃 Thank you very much for the feedback! Comments like this motivate me to keep posting more tutorials! Have a great week!

@roxclapa 3 ай бұрын

The first tutorial that actually works for me. Thank you! 😍

@ChinskDesign 3 ай бұрын

Hi!😃 I’m glad to help!🤩 Thank you so much for the feedback! What do you want to learn next? Have a great weekend!

@anilchandora4109 Жыл бұрын

Thanks to every tutorial ❣

@ChinskDesign Жыл бұрын

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!😃

@bilalanwar9559 Жыл бұрын

Thank your! Very helpful tutorial

@ChinskDesign Жыл бұрын

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!

@sandergee5222 2 ай бұрын

thanks for explaining! wish there was a download link for the working file.

@O4irTS 2 жыл бұрын

Greate work!!! Need more!!!

@ChinskDesign 2 жыл бұрын

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!

@VivianaPereiraRodriguez Жыл бұрын

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".

@ChinskDesign Жыл бұрын

Hi!😃 Great observation! Thank you so much for sharing your knowledge! Have a great week!

@ikennagibson3933 2 жыл бұрын

Amazing

@ChinskDesign 2 жыл бұрын

Glad to help!🤩 Thank you so much for the feedback! Have a great week!

@ikennagibson3933 2 жыл бұрын

@@ChinskDesign you are welcome mate.

@AbhishekKumar-zf9bn Жыл бұрын

Sir I want to know that how can I make like all the frame delete

@ChinskDesign Жыл бұрын

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🙂

@AbhishekKumar-zf9bn Жыл бұрын

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

@ChinskDesign Жыл бұрын

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!

@euniceofem6898 Жыл бұрын

Any Figma file for this?

@ChinskDesign Жыл бұрын

Hi!😃 I don't have the file anymore. Do you need help?

@n_mckean Жыл бұрын

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.

@arminakujovic857 Жыл бұрын

I think the tutorial would've been better if you actually spoke in it or at least used some text

@ChinskDesign Жыл бұрын

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!

@AbhishekKumar-zf9bn Жыл бұрын

I want to delete by swipe all the message. How can it possible?

@ChinskDesign Жыл бұрын

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🙂

@tiffanyhuerta9637 Жыл бұрын

Would love a tutorial that shows the continuation of deleting of all messages!

@ChinskDesign Жыл бұрын

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!

@tiffanyhuerta9637 Жыл бұрын

@@ChinskDesign Amazing thank you so much! Now I can continue the animation 😊

@ChinskDesign Жыл бұрын

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!