Тёмный
No video :(

Toast Message Animation in Figma | Using Overlays & Interactive Components 

Design Xstream
Подписаться 49 тыс.
Просмотров 36 тыс.
50% 1

🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Comm...
Toast Messages are used to provide simple feedback about an operation in a small popup. In this video, I show how to create a simple Toast Message Animation in Figma using two methods Overlays & Interactive Components.
#ToastMessage # ToastAnimation #Figma
⏱️Timestamps:
0:00 - Intro
0:30 - Demo
1:08 - Using Overlays
5:44 - Using Interactive Components
8:50 - Final Output
📄 Figma Community File: www.figma.com/...
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDe... 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Comm...
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / designxstream
↪︎ Instagram - / designxstream
↪︎ Facebook - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: Toast Message Animation in Figma, how to create a toast animation in figma, simple toast animation, easy toast message animation, toast message prototype in figma, toast prompt animation, toast popup animation, popup message animation, toast animation with timer.

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

 

14 авг 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 64   
@DesignXstream
@DesignXstream 2 года назад
Duplicate the Figma File from here: www.figma.com/community/file/1080080695060402724/Toast-Message-Animation Which method do you prefer? 🤔
@LucaSapoW
@LucaSapoW Месяц назад
Awesome video! thanks! greetings from a newbie in Brazil!
@DesignXstream
@DesignXstream Месяц назад
Cheers ✌️ Thanks!
@hanamiller
@hanamiller Год назад
Thank you for being so thorough with your explanations!
@DesignXstream
@DesignXstream Год назад
Glad you liked it! Cheers ✌🏼
@YestoMercy
@YestoMercy Год назад
This has to be the easiest I have seen so far. It worked! Thanks a lot.
@DesignXstream
@DesignXstream Год назад
Thanks Josiah, Glad you found it useful! Cheers ✌🏼
@moncere
@moncere 8 месяцев назад
The overlays is the one I use the most. Thank you for this comparison video.
@DesignXstream
@DesignXstream 8 месяцев назад
Glad you found them helpful! Cheers ✌🏼
@mohammedshamil3976
@mohammedshamil3976 2 года назад
Super useful..i prefer the second one because i felt the arrows here and there to be little messy..the second one eventhough it uses a second screen , it gives the advantage of reusable interactions😄
@DesignXstream
@DesignXstream 2 года назад
Yes Interactive components are powerful and gives more control 🤘🏼
@08abdulhaq
@08abdulhaq 6 месяцев назад
Thanks a million man was searching for this since many days you made it look really easy appreciate it on point no waste of time thanks a lot . got a new subscriber ❤
@DesignXstream
@DesignXstream 5 месяцев назад
Glad you liked it! Cheers! ✌🏼
@abhishekburnwal1961
@abhishekburnwal1961 5 месяцев назад
Thank a lots sir you are solved my problem ❤
@DesignXstream
@DesignXstream 5 месяцев назад
Glad you found it helpful! Cheers ✌🏼
@hhamilton6763
@hhamilton6763 2 года назад
Super useful. Love you have the comparison of two methods. Thank you!
@DesignXstream
@DesignXstream 2 года назад
Glad you liked it! Cheers ✌🏼
@stieglitz4799
@stieglitz4799 6 месяцев назад
thank you. i think the frist metode (overlay) fit for me. easy to applicate.
@DesignXstream
@DesignXstream 5 месяцев назад
Glad you found it useful ✌🏼
@Ellium29
@Ellium29 6 месяцев назад
So smart and so helpful, thank you!!
@DesignXstream
@DesignXstream 5 месяцев назад
Glad it was helpful! Cheers! ✌🏼
@luanachan4062
@luanachan4062 2 года назад
Thank you soo much, I was really struggling to make a toast message, it helped me a lot ^^
@DesignXstream
@DesignXstream 2 года назад
glad you found it useful! :)
@Raja-zb8qp
@Raja-zb8qp 2 года назад
Super useful 🔥 Using overlay kinda seem easy.
@DesignXstream
@DesignXstream 2 года назад
Cool 🤘🏼
@dekhoyaarodekho3866
@dekhoyaarodekho3866 2 года назад
Looking smart Jophin. Fantastic video keep going very useful
@DesignXstream
@DesignXstream 2 года назад
Thank you very much ✌🏼😁
@crazi_ni
@crazi_ni 2 года назад
Thank you so much... This was super useful.:)
@DesignXstream
@DesignXstream 2 года назад
Glad you found it useful :)
@shivnishad893
@shivnishad893 2 года назад
Thank you so much for doing toast.
@DesignXstream
@DesignXstream 2 года назад
You're welcome! 👍🏼
@shivnishad893
@shivnishad893 2 года назад
@@DesignXstream not only i learn toast I also learn you can add new interaction in prototype..and your method in this video is super clear and ez to understand ... before you i ask like 7 youtubers to do toast cause I can't figure it out how it will close itself .. thanks for doing the request.. wish you more success in life.
@srirakshakrishnamurthy6720
@srirakshakrishnamurthy6720 Год назад
Thanks a ton for the video :)
@DesignXstream
@DesignXstream Год назад
Cheers ✌🏼
@lukeb1502
@lukeb1502 2 года назад
Awesome tut mate!! Thumbs up! :) Did you saw any performance issues using that solution in more complicated protypes? In more complex prototypes (more then 15-20 screens) i usually turn off most of the animations.
@DesignXstream
@DesignXstream 2 года назад
Overlays always works smooth even in complicated prototypes but interactive components can get a bit heavy and could lag!
@carterdei8076
@carterdei8076 Год назад
come to korea and ill buy you lunch! super helpful
@DesignXstream
@DesignXstream Год назад
Will definitely call you when I come there 🙌🏼😁
@maheshbiruduganti1718
@maheshbiruduganti1718 2 года назад
Looks interesting and useful .Good session.
@DesignXstream
@DesignXstream 2 года назад
Thank you for your comment. I really appreciate your feedback! 😜 Should I improve anything from the direction and screenplay?
@KishanPandav
@KishanPandav Год назад
Thanks i learn something
@DesignXstream
@DesignXstream Год назад
Awesome! Cheers ✌🏼
@makii.gaming
@makii.gaming Год назад
Thanks buddy🎉
@DesignXstream
@DesignXstream Год назад
Glad you enjoy the content! Cheers ✌🏼
@renataeger
@renataeger Год назад
Amazinggggg
@DesignXstream
@DesignXstream Год назад
Cheers!! ✌🏼
@yeaheiamahmudhridoy4590
@yeaheiamahmudhridoy4590 Год назад
awwesome it work!
@DesignXstream
@DesignXstream Год назад
Awesome! Cheers ✌🏼
@20mindesigns
@20mindesigns 10 месяцев назад
solved my problems
@DesignXstream
@DesignXstream 10 месяцев назад
Cheers mate! ✌🏼
@erinarchitextures
@erinarchitextures 7 месяцев назад
Thanks for this! Is it possible to add multiple or a stack of toast messages?
@DesignXstream
@DesignXstream 7 месяцев назад
This component will work only for 1. You can look at my new playlist on how to make interactive UI components and follow that process to have a component that you can use multiple times.
@HeyMalak
@HeyMalak Год назад
Interactive components = movie clips in flash
@DesignXstream
@DesignXstream Год назад
Yes thats right 👍🏽
@puch9830
@puch9830 Год назад
8:17 what is option button? Thank you
@DesignXstream
@DesignXstream Год назад
Hey 'Option' button is on Mac its equivalent on Windows is 'Alt'
@aakashprajapati5319
@aakashprajapati5319 2 года назад
But You Have Dropdown -> "Save" & "Cancel" Button Have With Interactive Pages With Icon Hove (Tooltip) + On Click Change Page + Display Toast Message That Time Need Components. Not A Overlay Work.
@DesignXstream
@DesignXstream 2 года назад
Yes it totally depends on the scenario and flow 👍🏼
@aakashprajapati5319
@aakashprajapati5319 2 года назад
@@DesignXstream Why Not Create A Video of This Type of Scenario. Also make A Tutorial.
@lesty6768
@lesty6768 11 месяцев назад
how to activate after delay, mine cant be pressed at all???
@DesignXstream
@DesignXstream 11 месяцев назад
After delay shows up only when you are doing a change to variant
@JusticeLeader
@JusticeLeader Год назад
Excuse me I used the second method And I don't know why the interaction doesn't replay when I come back to that frame for the second time
@DesignXstream
@DesignXstream Год назад
If you are using interactive components then you need to reset the state back to the initial variant when you leave a screen.
@JusticeLeader
@JusticeLeader Год назад
@@DesignXstream Oh I see. Can you teach how to reset the component state?
Далее
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 779 тыс.
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
Trick to Show/Hide Header on Scroll in Figma
4:53
Просмотров 105 тыс.
How to Add a Button Hover Effect in Figma
10:18
Просмотров 86 тыс.