Figma Tip: Prototyping with "after delay" and "trigger after delay" interactions

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!

Channel: Figma

Views: 58,974

Keywords: ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, protoyping, after delay, tranisition, animation, prototype, trigger after delay, product:figma_design, audience:designer, language:english, format:standard, produced_by:design_advocate, theme:prototyping, event:none, series:figma_tips, type:feature_tutorial, level:intermediate, primary_feature:after_delay, secondary_feature:interactive_component

Id: 0047qy7XHzI

Length: 5min 56sec (356 seconds)

Published: Wed Apr 06 2022