How to animate a "toast" component in Figma using interactive components

For quick prototyping using the interaction in the button: On Click > Open Overlay. Overlay=Manual, Animation = Move In Down,, and in the Toast the interaction: After Delay > Close Overlay, could also do the job.

[@ridd]

Yup!

[@mihaimarcu4543]

I was thinking the same thing. Better yet, to keep the animation, you could have the interactive component swap with delay when the check animation finishes to the static version. The best benefit of doing it this way is that the toast will remain responsive. In Ridds version, the message is always hardcoded in the component because of the empty wrapper that doesn't have auto layout. It is a great option if you have just that message, but if you need a toast that could have more text, it won't be such a great option.

[@ridd]

@@mihaimarcu4543 Separating the Lottie file into its own subcomponent so that the whole thing can be responsive is such a "duh" moment. Thank you!

[@kelindrawn]

Thanks! Interactive Components are just great.

[@ridd]

Couldn't agree more!

Excellent tip, thank you!

[@ridd]

You're welcome! Hope it helps 👍

[@JimmyPapa-e8x]

Hey Ridd, thank you for the video, it was very informative and well organized. Something that has been a big pain point of mine while working with Figma, is the interaction between dialogs and toasts(system feedback). How would you go about creating this self contained(not requiring 3 frames) interaction with a toast coming from a dialog(overlay)?

[@murtazaabidi4551]

These videos are great. I have an issue that I keep running into. in your example the the "new email" CTA does 2 things on click... 1) Creates a new email and 2) shows the toast. I want to do something similar but keep running into the issue where I can't have 2 click interactions on one button. What's your process when you want something to do 2 click interactions?

[@stefaniemartinez8402]

I have a question... I am just learning UX UI and I am trying to set up the toast from the bottom since I am working with material in a web site format. How can I set up the toast to appear in the bottom if the page is larger than the frame in am working on? I have been trying.. It appears but it always stays in the bottom. I dont know it you can understand. Sorry for my english