Figma After Delay Animation | Overlay Prototype

in this video i'm going to show you how to add an animation delay to your figma prototype let's get started so to begin i'm opening up a figma project that i'm currently working on i'm currently working on this job finder application and it currently has two screens the first screen on the left shows the user all the jobs that are available and also has a search feature and on the right i have a tab filled with all the jobs that this user applied for now i already added some interactivity to this prototype so if you click on this play button on the top it will open up the prototype in a new tab and i already added some functionality so when the user clicks on the applied the whole page transitions to the apply tab and when i go back to all jobs it switches back to the previous tab so if you're interested in watching the video where i show you how to actually animate this design using smart animate i'll link that tutorial in the description below but in this tutorial i want to improve on the functionality of the prototype so i created this notification overlay that i want to add to my design so if we zoom into it a little bit more we can see that it is a rectangle overlay and i want this overlay to appear at the bottom of the actual page now i want this overlay to appear automatically without the user having to tap on anything to make this visible so i'm going to add a delay to the animation so that way it will automatically appear in the prototype so first i'm actually going to tap on this frame because i want it to be visible when the user is on the landing state so with this frame selected i'm going to go over here to the prototype tab on the top right and once i do the inspector panel on the side has changed and now i can actually add an interaction to the prototype so up here next to interactions there's a plus symbol so i'm going to click on that and then initially figma assumes that i want to add a tap interaction but i don't actually want to add a tap interaction so i'm going to customize this by actually tapping inside of it and once i do this overlay appears which will allow me to specify exactly what kind of interaction i want for this element so instead of saying on tap i'm going to click on this element and at the very bottom it says after delay meaning that once the user gets to this page after a certain second delay i can control what will happen next so that's the kind of interaction i want for this element so i'm going to click on it and once i do it automatically sets the value to 800 milliseconds which we can always modify later on next what do we want to happen after the delay well i want this overlay to become visible on the page so instead of saying none i'm going to open that and i'm going to say open overlay and then we have to specify which overlay we want to be visible well i want the notification overlay to be the element on the page so i'm going to click on that once i do that some other overlay features become visible so we can specify where exactly the overlay lives on the page and the kind of animation effect that it has right now if i were to just click this play button the app will refresh and then we will see the effect so right now the overlay appears on the page however the placement is not correct and it doesn't have any kind of transition so i'm going to go back to my figma design and specify some of its features so instead of the overlay being centered i'm going to tap on this and i'm going to set it to bottom center i'm going to allow the user to close it when they click outside and i'm also going to add a background behind the overlay which will dim the background so that way the overlay stands out even more and you can also specify this as well i'm going to leave it as 25 black for the time being then i'm also going to add some animation so i don't want it to just instantly appear i wanted to transition on the page so i'm going to click on this and i'm going to say move in and then you can specify exactly how you wanted to move in on the page now since this element is living on the bottom of the page i want it to pop up so i'm going to have it move upwards and you can specify what kind of animation curve that you would like i'll leave it as ease out and the duration so now if i go back to my prototype we can actually see that effect but i think it pops up a little too quickly so instead i'm going to control when it is visible on the page so i'm going to say after delay instead of being 800 milliseconds i'm going to set it to 2000 which is 2 000 milliseconds which equals 2 seconds and instead of it animating in 300 milliseconds i'm going to increase it to 350. so now if we go back to our prototype we can see this element animate in and of course you can always add interactivity for these buttons at the bottom but right now if i were to click on this darker overlay section it will dismiss so there you go that's how i created this animation delay using figma please let me know if you have any questions on the topic and subscribe to stay up to date with my latest content thanks for watching you

Channel: Angela Design

Views: 45,228

Keywords: figma prototype, figma overlay prototype, figma after delay, figma after delay animation, after delay figma, after delay figma prototype, after delay interaction, figma modal, figma modal animation, figma overlay animation, overlay animation, bottom overlay animate, figma overlay component, figma bottom animation, figma pop up animation, overlay design figma, overlay ui figma, figma app design, figma app animate, figma app animation, app design figma, app figma, tutorial

Id: sBHFo3EpM24

Length: 6min 10sec (370 seconds)

Published: Mon Apr 12 2021