Toast Message Animation in Figma | Using Overlays & Interactive Components
🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Community
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/community/file/1080080695060402724/Toast-Message-Animation
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Community
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 - www.linkedin.com/company/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.
Пікірлер: 63
Duplicate the Figma File from here: www.figma.com/community/file/1080080695060402724/Toast-Message-Animation Which method do you prefer? 🤔
Awesome video! thanks! greetings from a newbie in Brazil!
Thank you for being so thorough with your explanations!
@DesignXstream
Жыл бұрын
Glad you liked it! Cheers ✌🏼
Super useful. Love you have the comparison of two methods. Thank you!
@DesignXstream
2 жыл бұрын
Glad you liked it! Cheers ✌🏼
This has to be the easiest I have seen so far. It worked! Thanks a lot.
@DesignXstream
Жыл бұрын
Thanks Josiah, Glad you found it useful! Cheers ✌🏼
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
4 ай бұрын
Glad you liked it! Cheers! ✌🏼
Thank you soo much, I was really struggling to make a toast message, it helped me a lot ^^
@DesignXstream
Жыл бұрын
glad you found it useful! :)
Super useful 🔥 Using overlay kinda seem easy.
@DesignXstream
2 жыл бұрын
Cool 🤘🏼
The overlays is the one I use the most. Thank you for this comparison video.
@DesignXstream
7 ай бұрын
Glad you found them helpful! Cheers ✌🏼
Thank you so much... This was super useful.:)
@DesignXstream
Жыл бұрын
Glad you found it useful :)
So smart and so helpful, thank you!!
@DesignXstream
4 ай бұрын
Glad it was helpful! Cheers! ✌🏼
Thank a lots sir you are solved my problem ❤
@DesignXstream
3 ай бұрын
Glad you found it helpful! Cheers ✌🏼
Looking smart Jophin. Fantastic video keep going very useful
@DesignXstream
2 жыл бұрын
Thank you very much ✌🏼😁
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
2 жыл бұрын
Yes Interactive components are powerful and gives more control 🤘🏼
thank you. i think the frist metode (overlay) fit for me. easy to applicate.
@DesignXstream
4 ай бұрын
Glad you found it useful ✌🏼
Thanks a ton for the video :)
@DesignXstream
Жыл бұрын
Cheers ✌🏼
Thank you so much for doing toast.
@DesignXstream
2 жыл бұрын
You're welcome! 👍🏼
@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.
Looks interesting and useful .Good session.
@DesignXstream
2 жыл бұрын
Thank you for your comment. I really appreciate your feedback! 😜 Should I improve anything from the direction and screenplay?
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
2 жыл бұрын
Overlays always works smooth even in complicated prototypes but interactive components can get a bit heavy and could lag!
Thanks buddy🎉
@DesignXstream
Жыл бұрын
Glad you enjoy the content! Cheers ✌🏼
awwesome it work!
@DesignXstream
Жыл бұрын
Awesome! Cheers ✌🏼
Thanks i learn something
@DesignXstream
Жыл бұрын
Awesome! Cheers ✌🏼
Amazinggggg
@DesignXstream
Жыл бұрын
Cheers!! ✌🏼
Thanks for this! Is it possible to add multiple or a stack of toast messages?
@DesignXstream
5 ай бұрын
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.
come to korea and ill buy you lunch! super helpful
@DesignXstream
11 ай бұрын
Will definitely call you when I come there 🙌🏼😁
solved my problems
@DesignXstream
9 ай бұрын
Cheers mate! ✌🏼
8:17 what is option button? Thank you
@DesignXstream
Жыл бұрын
Hey 'Option' button is on Mac its equivalent on Windows is 'Alt'
Interactive components = movie clips in flash
@DesignXstream
Жыл бұрын
Yes thats right 👍🏽
how to activate after delay, mine cant be pressed at all???
@DesignXstream
9 ай бұрын
After delay shows up only when you are doing a change to variant
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
Жыл бұрын
If you are using interactive components then you need to reset the state back to the initial variant when you leave a screen.
@JusticeLeader
Жыл бұрын
@@DesignXstream Oh I see. Can you teach how to reset the component state?
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
Жыл бұрын
Yes it totally depends on the scenario and flow 👍🏼
@aakashprajapati5319
Жыл бұрын
@@DesignXstream Why Not Create A Video of This Type of Scenario. Also make A Tutorial.