No video :(

Figma Swipe to Delete | Interactive Components

Подписаться 6 тыс.

Просмотров 11 тыс.

50% 1

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

Опубликовано:

15 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@roxclapa 4 месяца назад

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

@ChinskDesign 4 месяца назад

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

@fypyfyp 2 года назад

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

@ChinskDesign 2 года назад

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 10 месяцев назад

Man, such a good explanation! My respect!

@ChinskDesign 10 месяцев назад

Hi!😃 Thank you very much for the feedback! Comments like this motivate me to keep posting more tutorials! 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!

@anilchandora4109 2 года назад

Thanks to every tutorial ❣

@ChinskDesign 2 года назад

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 4 месяца назад

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!

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

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

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

@euniceofem6898 Год назад

Any Figma file for this?

@ChinskDesign Год назад

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

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