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

No video

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

Рет қаралды 4,935

Ridd

Күн бұрын

Пікірлер: 13

2 жыл бұрын

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 2 жыл бұрын

Yup!

@mihaimarcu4543 2 жыл бұрын

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 2 жыл бұрын

@@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 2 жыл бұрын

Thanks! Interactive Components are just great.

@ridd 2 жыл бұрын

Couldn't agree more!

2 жыл бұрын

Excellent tip, thank you!

@ridd 2 жыл бұрын

You're welcome! Hope it helps 👍

@Chaithzx 2 жыл бұрын

This is great!

@ridd 2 жыл бұрын

Glad it helped 👍

@user-xr9kl5gz8k Жыл бұрын

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)?

@stefaniemartinez8402 2 жыл бұрын

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

@murtazaabidi4551 2 жыл бұрын

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?