Skip to main content

Hi there,

I’m working on products for professionnals. And the products I’m working on often have to display ephemeral messages like alerts, toasts, and so on.


So prototype a toast behavior, I currently proceed with 3 screens : one for before the toast appears, one with the toast visible and one with the toast gone. And the transitions are “delay” type between those screens.


It works perfectly, but it’s really painful to design. And each time you’ve to change something on the screen, I’ve to replicate the changes to the 3 screens.


So, I wonder if there is a way to create a components with inner transition or another way to make it disappear after a delay…and to avoid having 3 screens for such an interaction.


Thanks.

If you sign up for the Interactive Components beta, you can achieve this use case in a component. Check this page for the link to sign up: https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants#h_01F13PW6A4YF8G3MGD2GG3Y4AR

Hey, thanks for this quick answer. I thought about interactive components at first, and to be honest, I haven’t spend a lot of time on this. I wonder how I can prototype component interaction between 2 states : 1. the component is here 2. it isn’t here.


Or perhaps I just make the component layers invisible. Any clue?

I figured out how to make it.


3 variants:



  1. not-yet with the inner elements not visible

  2. plain, the inner elements are visible

  3. gone, the inner elements are not visible again


2 component interactions from 1 to 2 (ease in) and from 2 to 3 (ease out). Smart animate in both cases, triggered on delay. And it works perfectly.

Terms & ConditionsCookie settings