Hi friends, Miggi from Figma here with another Figma Tip.
let's talk today about "after delay" and "trigger after delay prototype
interactions
After delay is a prototyping event that will allow you to
sequence a series of frames in a prototype without needing
user input like a tap or a click
it is an instruction to wait for a specified amount of time
before performing an action like navigating to another frame
or opening an overlay
After delay works specifically on frames
and on components variants within a component set
it can be used to create animation and
mutli-step interactions
Let's take a look at this example
here I have a series of frames, each frame
has an after delay interaction moving from one to next
when I hit play, you will see that the interaction
will cause the transition between all of the frames
here I am using smart animate to get a much better sense of the transitions
at play
lets take a look at how that works
If I were to use a click transition
as the main way to navigate this prototype. It would require
the user to input and click to perform each interaction
If instead, I want to trigger the series
of animations, I can go ahead and remove
those interactions from the button itself
from the frame
drag an interaction. So here you can see instead of
on click, I want to set after delay
If you were to try to set an interaction on an object that is not a frame
you will notice that after delay won't be available
here I am going to move to step to to step 3
and the after delay interaction. I am going to choose a set amount
of time to wait. At this point, I actually don't want to wait very long
so I am just going to put one millisecond. It is going to navigate to the third step
and transition using smart animate.
Lets have step 3 go to step 4 in the same way. Instead of an on click
Im going to choose after delay and that will then navigate to step 4
So, when I look at this prototype, I click on this button and then
the frame will automatically progress to the next frame
using the after delay interaction.
Let's take a look at that
So here I click
it goes out of the way, and immediately goes to the last frame. And then I reset it.
Next let's take a look at a slightly different example
this is an interactive component. So these are two
components within a component set. This is a variant of
the first option. So lets go ahead and
take a look at those (interaction) noodles. Here I am using mouse events
So mouse enter to change to the other variant
its going over to that second version
Likewise, when I go back, I can say mouse leave, and have it change back
Let's take a look at that interaction. So when I hover, it goes to the red
when I move that off, it goes back. Here I also have
that same component with a different image
I hover, I see the GIF animation playing
I move off. Let's say I want to change that up a little bit
I want it to wait, allowing the GIF to play a little longer before it goes back
to its original state. What I will do now is
click on that interaction (choose) mouse leave
and I will instead trigger after delay. If I hover over here you will see the tool tip
trigger after delay. So (choose) after delay 200ms
So basically with on mouse leave it will wait
about 200 milliseconds before it enacts that change, too.
Lets add some time here, so lets add about 800 milliseconds
before it performs the interaction. Im going to click off
Here once again, (on) mouse enter it is going to change to that second
one and perform a smart animate. And here we are going to use a
mouse leave. So any of these mouse interactions
you can attribute an after delay trigger to
So let's go ahead and see what that looks like
lets just do one more change over. Im going to duplicate
this object. Im going to command (ctrl) click
and here I have some static images and animated GIFs
lets make another variant. Im going to go ahead and command (ctrl) + option
and C or Ctrl + alt + C that will copy the properties
and Im going to paste it there. I am now going to select this object
change that hover state. Im going to grab this fill
Let's go ahead and command + c / ctrl + c and paste it there, and lets
reset that card, and change its property back to the first
one. So we have another object here to
make use of our interactive component
Lets go ahead and play that. So here when I hover over it goes, and when I leave
it waits about 800 ms, so just under a full second
So here I hover, it plays the animated GIF
It's looping, so I move off. It waits a little bit and then
it goes back to the original state. Same thing here, it plays for a little bit
I move off, and then it goes back to its original state
So if we choose, we can make that delay a little bit longer
in the interactive component. Im going to go to prototype
click. lets make that delay just a bit longer. So lets say
1200 milliseconds
hit play, and see I am hovering... I move off, then it will wait and go back
hovering, go off, and it will go back...
hovering, move off, and it will go back
Thank you and happy designing!