Website Animations Using ONLY Figma

today we're going to create fancy pre-loading animation and hear animation on our figma website and that's going to help you to impress your clients and also prep up for before you're going to hand off this website or develop it yourself to understand what kind of animations and interaction you want to do and we can do it all in figma no after effects needed or any other design software not even plugins let's go ahead and do it i'm here in figma and if you want to follow along the link to this project is going to be below this video now the main technique that we're going to use here is component variants and let me start by a quick demo just so that you understand how we're going to work through this and what are component variants so we have this button here let me copy this and paste it outside of the dashboard dashboard but desktop view here and let's go ahead and turn this into component you can do this by either clicking these here or command option k as you can see here so let's go ahead turn this into a component and now we can add a variant so you can see now this turned into a plus button add variant now variant is basically just a different state and we can animate between these states which is exactly what we're going to do now here i want to create just a hover animation so let's call the second state here on the left let's call this hover and let's change the second variant let's change the background into green and let's change the text into blue so now basically we have defined a different state of this button and let's create the interaction that when people actually hover over this we animate into this variant so i'm going to go here into prototype add an interaction not a click interaction in this case it's going to be while hovering and then we're going to change to a different state in this case the hover state now it can either be instantly as you can see here or we can go ahead and smart animate so that's going to animate all the properties nicely over 300 milliseconds so that should be okay so let's go ahead and actually use this [Music] this component instead of just this normal button that we have here let me paste this to replace and now it's right here let's go ahead and play this out so that we can see if this works i'm going to present the prototype and what we have here is once we're hovering we're changing into the different component now the trick here this is very simple is that we can use the same technique but instead of just doing something like hovering we can just use the delay trigger so that an animated animations just happen after a while so the first thing that i want to do is let's say i want to reveal the text that we have here so kind of like masking out so the first here's how i'm going to approach this first of all i'm going to duplicate the desktop the reason is in this one we're going to hide stuff right and i want to have a view of how things look like after they show up so i always keep a copy of let's say the end state because here we're going to create something that's going to be weird we're not going to see anything right because it's going to be a reveal animation so let's go ahead and turn this text into a component actually this text and these texts together so i'm going to copy them go here outside paste them and turn them into a component and let's call this hero text hero text now this one basically i'm going to have um i want to have four animations here because i want them to be revealed one by line so animation number one animation number two animation number three and four so basically i need five i think five variants here but before i go ahead and create the variance i want to break down the text it's one element right now i want to break it down into three because i will be animating you know each line separately so let's go ahead and break this down into separate text elements just so that i can animate them separately this looks good now i also want to mask them so that we can move them within a mask so i'm going to create rectangulars to mask them around something like this and let's take them all and move them to the background and go ahead and mask them this way now after i'm masking them using a mask basically what i can do is i can move them around you can see they're coming out of the mask and that's the animation that we want to create so now we have the basic setup let's go ahead and create the variance so one two three four i hope that's enough so let's say the last step is the last step they're going to animate from this to this to this to this to this and each time a sentence is going to come up right so here in the first step everything is going to be hidden so i'm selecting all of them and moving them down so that they're hidden inside of their masks now here this is the second step discovery has come up but these ones are still hidden right so this is the first step this cover came up now in the second step discover and collect came up so i'm gonna hide these ones and here rare nfts came up so i'm only hiding this one and then the last step they all came up so basically these are these are kind of like key frames in animation nothing first line second line third line and all of the text together so now let's go ahead and animate them so i can pick the uh from the interaction panel um we want to not on click after delay so after delay and we don't need zero delay we can change to uh variant number two okay so we're going to move from here to here not instantly we're going to smart animate and let's say 300 maybe let's turn it into 200 so it's faster so i can go ahead and very quickly do this by dragging changing to after delay zero delay move to variant three that's correct ease out 200 that's correct so basically came here animated move here animated move here animated move here after delay of zero move to variant for 200 that's good let's go here after delay zero delay that looks pretty good okay so this should be the animation let's go ahead and copy the first one and let's replace what we have here with our component so paste to replace and now we have it here let's go ahead and test this out and again this is i'm going to change the name of this from desktop2 to hero animations just so that i know what this artboard should show and let's preview this okay so you can see we've animated them all the steps stacked one after another that's nice so now let's add that after the text came up let's actually show all these other elements because it doesn't make sense that the text is animating but the elements are already there so let's go ahead and pick this and let's actually pick everything here that is not the main animation let's group it together so now the hero has this other elements other elements and then the hero text so let's copy the other elements let's paste them out here to turn them into a component let's call this yeah other element makes sense and create this is going to be very simple it's going to start from opacity of zero so let's go here and reduce opacity to zero and all these opacity to zero they're just going to move you know animate the opacity so move from here to here but the thing is i don't want this to start animating together with the text i want this to wait until the text animation finishes and then we trigger this animation so let's calculate we actually have to remember how long is this animation so each step is 200 milliseconds so that's 2 4 6 8 1 000 milliseconds so i'm going to do this after a delay of a thousand milliseconds right then i'm going to change into variant 2 using smart animate let's make this like a longer fade of maybe 400 milliseconds okay so let's copy this the first step and let's make sure that we replace other elements with our components now you see basically why i created two artboards because here we're not going to see anything and so you want to make sure that you remember how things are going to look like because now they're hidden let's go out and test the hero animation again and now we have the text and then the other content fades in and of course we can make this more fancy we can move them up slide them up to stagger them one after another that's cool all right so now let's create a preloader to this so for this because i'm going to now hide this with some more content on top of it i'm going to actually create um another let's create here another um copy of this and let's call this preloader now for this preloader i'm actually going to delete everything that i have here because i don't want this animation happening while the preloader animation happens so what i'll do is i'll play the preloader animation and then i'll move here and those animations that we've created here are going to play out if that sounds confusing you'll see this in a second it's it's going to be pretty easy so let's go ahead and create this preloader let me just create this big kind of like gradient overlay on top of everything so let's do a linear let's pick some colors that are you know in this document maybe something like this that's okay and let's create the loading bar so let's go ahead also create some kind of a loading bar let's make it dark let's give it some round corners and let's say that this is the loading bar let's say that this is good enough um now this loading bar let's center it center would be nice needs to animate so kind of like it's filling in so let's of course go ahead and turn this into a component so that we can animate it right so turn into a component call it load bar and what do we have in this component so actually let's copy and paste this rectangular and maybe make it green so i've created just an instance of this so that we can animate it this way so let's start out from here and now let's create a new variant and for the end state just fill it all up now you've seen this so you understand what we're going to do we're going to interact from here not from click after delay don't maybe delay let's just wait 100 milliseconds and then change to you know the end results smart animate let's do this like 600 so that it it like fills in nicely maybe even 700 milliseconds okay and let's take the first step let's replace this with our first step let's test out the preloader and see if the loading bar looks nice okay so the loading bar looks nice i can still see the background so i need to make my overlay here a little bit bigger and maybe this needs to be a little bit centered but let's say that we have this okay so we basically have the preloader and what i want to happen is after this finish is loading i want kind of the let's say this thing to mask out um just kind of like move out and mask out this uh loading bar as well so let's group these things together let's actually make a copy of this rectangular so they can be a mask let's group these together and let's use the copy of the rectangular as a mask so now i can go ahead and mask it out when it's over and so how we're going to animate it of course turn this whole thing into a component so let's go ahead paste it up here turn this into a component masking okay let's create another variant and in the variant go ahead and animate the mask all the way to the top now let's go ahead and animate this after delay but we know that we have to wait at least 700 milliseconds for this thing to load so yeah after you know after 800 milliseconds that's okay go to the second variant and let's say do this for 500 milliseconds 500 milliseconds okay let's pick the first step here let's replace this with the ver the component and let's test this out so note what we have animation number one load bar animation number two the masking out let's go ahead and preview this okay now we're stuck here without the animation so what i really want is once this animation is finishing and this animation let's remember that's i think um this is going to be 100 milliseconds of delay plus 700 so that's 800 and then this is going to be 800 plus 500 so we're at eight plus five i'm bad with mass so it's going to be 1300 milliseconds before we need to move here into the hero animation so let's go to the preloader page add an interaction let's not on click after delay after what was that 1300 milliseconds go navigate into hero animations so and instantly so once all of these animations are over instantly move here and then all these other animations are going to trigger so let's test this out and see if this works okay and it works so i hope you've seen that using this concept of using variants and animating them with delay you can prototype or create mockups of really fancy animation you can be very creative and create very elaborate stuff to both impress your clients or kind of understand how you want this to be developed i hope you enjoyed this if you haven't seen how we turn this website into a webflow website we have a full-on tutorial for that as well and i'll make sure that it's linked below i'll see you in the next video peace [Music] you

Channel: Flux Academy

Views: 217,952

Keywords: figma, figma tutorial, become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy, Website Animations Using ONLY Figma, figma tutorial for beginners, figma variants, figma to webflow, figma components, figma web design, figma animation, figma prototype tutorial

Id: gofICZUqltY

Length: 15min 21sec (921 seconds)

Published: Mon Jun 27 2022