Toast Message Animation in Figma | Using Overlays & Interactive Components
Рет қаралды 34,587
Күн бұрын🔥 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/...
🔴 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 - / 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.
@DesignXstream 2 жыл бұрын
Duplicate the Figma File from here: www.figma.com/community/file/1080080695060402724/Toast-Message-Animation Which method do you prefer? 🤔
@hanamiller Жыл бұрын
Thank you for being so thorough with your explanations!
@DesignXstream Жыл бұрын
Glad you liked it! Cheers ✌🏼
@hhamilton6763 2 жыл бұрын
Super useful. Love you have the comparison of two methods. Thank you!
@DesignXstream 2 жыл бұрын
Glad you liked it! Cheers ✌🏼
@LucaSapoW 11 күн бұрын
Awesome video! thanks! greetings from a newbie in Brazil!
@08abdulhaq 5 ай бұрын
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! ✌🏼
@YestoMercy Жыл бұрын
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 ✌🏼
@luanachan4062 2 жыл бұрын
Thank you soo much, I was really struggling to make a toast message, it helped me a lot ^^
@DesignXstream 2 жыл бұрын
glad you found it useful! :)
@moncere 7 ай бұрын
The overlays is the one I use the most. Thank you for this comparison video.
@DesignXstream 7 ай бұрын
Glad you found them helpful! Cheers ✌🏼
@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 2 жыл бұрын
Yes Interactive components are powerful and gives more control 🤘🏼
@abhishekburnwal1961 4 ай бұрын
Thank a lots sir you are solved my problem ❤
@DesignXstream 4 ай бұрын
Glad you found it helpful! Cheers ✌🏼
@crazi_ni 2 жыл бұрын
Thank you so much... This was super useful.:)
@DesignXstream 2 жыл бұрын
Glad you found it useful :)
@Raja-zb8qp 2 жыл бұрын
Super useful 🔥 Using overlay kinda seem easy.
@DesignXstream 2 жыл бұрын
Cool 🤘🏼
@stieglitz4799 5 ай бұрын
thank you. i think the frist metode (overlay) fit for me. easy to applicate.
@DesignXstream 4 ай бұрын
Glad you found it useful ✌🏼
@Ellium29 5 ай бұрын
So smart and so helpful, thank you!!
@DesignXstream 4 ай бұрын
Glad it was helpful! Cheers! ✌🏼
@dekhoyaarodekho3866 2 жыл бұрын
Looking smart Jophin. Fantastic video keep going very useful
@DesignXstream 2 жыл бұрын
Thank you very much ✌🏼😁
@srirakshakrishnamurthy6720 Жыл бұрын
Thanks a ton for the video :)
@DesignXstream Жыл бұрын
Cheers ✌🏼
@shivnishad893 2 жыл бұрын
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.
@mftertainment8602 Жыл бұрын
Thanks buddy🎉
@DesignXstream Жыл бұрын
Glad you enjoy the content! Cheers ✌🏼
@yeaheiamahmudhridoy4590 Жыл бұрын
awwesome it work!
@DesignXstream Жыл бұрын
Awesome! Cheers ✌🏼
@maheshbiruduganti1718 2 жыл бұрын
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?
@renataeger Жыл бұрын
Amazinggggg
@DesignXstream Жыл бұрын
Cheers!! ✌🏼
@KishanPandav Жыл бұрын
Thanks i learn something
@DesignXstream Жыл бұрын
Awesome! Cheers ✌🏼
@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 2 жыл бұрын
Overlays always works smooth even in complicated prototypes but interactive components can get a bit heavy and could lag!
@carterdei8076 11 ай бұрын
come to korea and ill buy you lunch! super helpful
@DesignXstream 11 ай бұрын
Will definitely call you when I come there 🙌🏼😁
@20mindesigns 9 ай бұрын
solved my problems
@DesignXstream 9 ай бұрын
Cheers mate! ✌🏼
@erinarchitextures 6 ай бұрын
Thanks for this! Is it possible to add multiple or a stack of toast messages?
@DesignXstream 6 ай бұрын
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 Жыл бұрын
Interactive components = movie clips in flash
@DesignXstream Жыл бұрын
Yes thats right 👍🏽
@puch9830 Жыл бұрын
8:17 what is option button? Thank you
@DesignXstream Жыл бұрын
Hey 'Option' button is on Mac its equivalent on Windows is 'Alt'
@lesty6768 10 ай бұрын
how to activate after delay, mine cant be pressed at all???
@DesignXstream 10 ай бұрын
After delay shows up only when you are doing a change to variant
@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 Жыл бұрын
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?
@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 2 жыл бұрын
Yes it totally depends on the scenario and flow 👍🏼
@aakashprajapati5319 2 жыл бұрын
@@DesignXstream Why Not Create A Video of This Type of Scenario. Also make A Tutorial.
Super Italiano
Рет қаралды 4,7 МЛН