Website Animation in Figma: Master Smart Animate, Component and Variant by Animation a web Page.

hello guys welcome to my channel in today's video we are going to be replicating this um very simple animating web header section that i found on dribble by now you guys already know how much i like interactions and animations and i'm always really excited to have an opportunity to share that with you guys so this is the final design as you can see the moving images on the right and um the element slide in and scale up as you reload the page please don't forget to like subscribe and turn on the notification bell so you get notified of my next video and without further ado let's get started with the video here i already created a redesigned version of the header section and which basically has five groups of elements which is this image path um that has like four images rounded images in them and the vector arrow that is shown here i'm just going to go ahead to rename um these individual sections so that we can properly identify them i will end up um uploading this as an open source in the figma community so you can um use it if you need to take any of the assets um so yeah so i'm just going to rename this last layer to the navbar now i'm done renaming all layers we can see everything is looking nice and neat so the first thing we want to work on is this image section on the right here um as you can see in the dribble sample the images just scale up and you can see they move up and down just like the way you see here and to achieve that i'm just going to select the entire section and i'm going to create a duplicate by holding alt and dragging out so for this duplicate we are going to make it a component because we want to um interact between different versions of it i'm also going to create another variant and i'm going to create two more variants so it's going to be a total of four variants in our component set now we need to create the states for our very first variant so basically what happens is that the images scale up and they feed in so for the first image i'm just going to select it i'm also going to hit k on the keyboard and i'm going to come to the edge of the image hold shift and alt at the same time and drag it in to reduce the size of the image um i'm going to reduce it to as low as 1 2 or 3 pixel and i'm also going to flip it just to create a spinning transition when it's scaling up you don't really have to do this if you've scaled it down to one or two pixels that is perfectly fine so i'm going to repeat the same thing for the second image i'm going to hit k on the keyboard hold shift and alt at the same time then i'm going to click and drag it in from the edge to reduce the size you can reduce it to either one two or three pixels depending on how little you can see [Music] i'm also going to do the same thing for the third image um and i'm holding shift and alt because i want it to scale down but still retain its um initial position so if you just reduce the image normally it's just going to take the image to a different position um and when scaling it up it won't look exactly um the way it was although you can also do it the way you want you can try out different things um with the knowledge you have and get different um interesting and exciting effects so after i'm done reducing all the size of the images in this particular section um the next thing i would want to do is to reduce the opacity so i'm going to select the entire section and i'm going to head over to the panel on the right um and i'm going to reduce the um pass through to zero so that it fades in um while we are transitioning from the first to the second variance so now we have our states of the first variance set i'm going to switch to the prototype mode i'm going to hit v on the keyboard to reverse the key we hit initially then i'm going to connect the wires from the first variance to the second variance it's going to be an after delay of zero millisecond which is one and i'm going to set it to a smart animate of 2000 milliseconds for the smart animation now we have our transition from the first variant to the second variance we want to transition from the second variance to the third variance but here we want to create a different states on the third variant but this transition is going to be an after delay zero millisecond and a smart animate of two thousand millisecond now we want to create the states of the third variant i'm going to select these two small images here and i'm going to move them down so i'm just going to tap the arrow key down until i am satisfied with the positioning of the small images it's not going to be too much but i'm just going to move them a little bit downward then i'm going to select the two large images and i'm also going to move this up so that once the small images are coming down the large images are going up so it feels like um an opposite motion kind of thing so once you're done with the transition with the sec with the third variant remember we did not do any transition on the second variance we are going to prototype and connect the wires down to the fourth variance which is going to be the same thing after the delay zero second um and with the same two thousand millisecond for the smart animate i'm going to return the favor and it's going to still be the same after at least zero millisecond and a smart animate of 2000 milliseconds remember we didn't do anything on the second and the fourth we are going to be using the default states that we have there so now we can replace um this image section we have on our header um with the components we just created but first i'm going to create a duplicate so that if we mess things up with the first one we can always get our assets from the duplicates i'm going to copy the components we just created then i'm going to right click on the image section of our header and select paste to replace um which replaces the section with our component that we just created um now we can select our header section our web header section and put the starting flow on it then click the prototype button to preview our prototype and this is it guys okay um our initial transition is too slow that means the milliseconds are too much but the images are moving up and down um just the way we want it so we might want to make a little adjustment so that we can achieve the exact feel we are looking for now back in our components i'm going to click on the prototype wires and edit the millisecond to 1000 millisecond so that um the scaling up will be much faster okay i think this is okay um the transition isn't so smooth i'm guessing it's because of my screen recorder that is on currently i'm sure yours will be a lot smoother than this so the next section we are going to be working on is this um header text right here i'm just going to hold alt i'm going to click and drag out to duplicate this section so for this section i'm going to switch to the design panel and i'm going to take note of the width and height of the entire frame i'm then going to select the rectangle and i'm going to draw a rectangle just right next to the header text i'm going to make sure the rectangle has the same width and height of the header text frame right and then i'm going to place the texts in front of the rectangle and i'm going to position them um together so i'm going to just try to center the text within the box of the rectangle and make sure it fits perfectly i'm then going to select both right click and use as mask now we have a header text as a mask i'm going to quickly rename the entire section from mask group to something more relatable and then i'm going to make it a component because we can only create interactions um on it better when it's a component i'm also going to create a variance for that component and i'm going to edit the state of the default variant so i'm going to select the header text content in the default variant and i'm going to use the arrow key to move its contents to do left i'm going to move all the content all the way to the left until i can't see any of them anymore because we want to create a transition effect where the contents move in from left to right until it's all visible so now once we've hidden all the contents um i'm going to switch to the prototype mode and i'm going to connect the wires from the first variant to the second variant it's going to be an after delay of 0 millisecond and i'm going to set a smart animate and i'm going to leave it at 1000 milliseconds so now you're done with this header section component i'm just going to copy it i'm just going to duplicate um the component and i'm going to cut it then i'm going to go to the exact section and i'm going to right click and paste to replace um and this is the reason why i maxed this section with the exact width and height so that space to replace will paste it in the exact position now in our prototype we can see the transition of the header text and our image section i think this looks nice um i like the way it's coming out um so we can return to our board and focus on what's next i'm just going to reposition this header section components um to the far right so that we can have enough space to work with the second second or the third section so the third section we're going to be working with is this um little um dates and destination picker here i'm just going to frame the entire selection um it's currently a frame but it's an auto layout frame so i'm just going to frame the entire selection a regular frame and i'm going to quickly rename that entire frame when i'm done i'm going to hold alt click and drag to create a duplicate that we're going to be working with um then i'm going to make this a component as usual just the way we've been doing with others um then i'm going to select the contents of the first one and this is why i created that frame so that we can target the content inside the frame rather than the entire variant itself um now we are going to have to scale the content inside our default frame which is this and as usual i'm going to hit k on the keyboard hold shift and alt and i'm going to click and drag in to reduce the size um and to make sure it's in the same position while i scale it down um this won't be too small i think this is okay i'm just going to reduce this size to this and i'm going to click on the first and i'm going to connect the wires i'm going to prototype it from the first variance the reduced one to the regular um variance which is the second variance so you can see i can't use this but i'm going to reverse it by clicking v on the keyboard because we've hit k on the keyboard initially i'm going to reverse it by hitting v then i'm going to connect the wires to the second variance i'm going to use and after delay um zero millisecond and i'm going to leave the smart animate as 1000 milliseconds and once i am done i'm going to click to copy and instance of this component and i'm going to come to this section right click and paste to replace now we are going to have our instance of our components here with this very tiny um scaled section so we can check out our prototype as usual i'm going to hit out to restart the prototype and as you can see this is also coming out really nice so the next thing we are going to work on is this um little vector arrow here and we are going basically going to be doing the same thing we've been doing for orders on but first i'm going to reposition these components we just on to the far right so now we have enough space to work with the second um we need fourths um element um on this i'm going to do the same thing i'm going to right click and i'm going to frame the selection and i'm doing this because i want to be able to target um the contents of the variant um but if i just create a component or a variant on this i won't be able to target on the contents because it's going to be the on variant itself i hope you understand so here i'm going to click and click on the vector in the default variant and i'm going to do the same thing we'll be doing hit k on the keyboard and hold down shift and alt then click to scale down um and retain the current position um you might want to be careful you want you won't like the arrow to flip um just to scale it down as small as possible because if it flips like this it won't be nice um it's going to be weird so you're just going to leave it at this particular position and i'm going to set the opacity which is the path through to zero so that it fits in also once i'm done i'm going to copy this section and before that i'm going to connect the wires i'm going to hit v to reverse the key we hit on the keyboard and i'm going to connect the wires um for prototype make it an after delay 0 millisecond and i'm going to leave the smart animates to 1000 um millisecond i'm going to create an instance called it's right click on the actual section and paste to replace now we can see our board is almost looking empty but that's fine once we click on the prototype section we should get our designs i'm going to hit out to restart the prototype and this is coming out okay but i think the arrow is slow so i'm going to um reduce the millisecond so as we increase the speed of its display um um so i'm going to just select that field and make it 500 milliseconds and i hope this makes it um a bit faster um right but still looks a little bit slow but that's fine um you can always use the figures of your choice and play around with it till you get the perfect one that fits um your designs um this might not be what you're trying to achieve but whatever it is i'm sure you know your way around it okay now you're done with the arrow section i'm going to move it out of the way so that we have enough space to work with our final section which is the navigation bar um so for the navigation bar um we want to do almost the same thing we did for the header section we are going to put it in a mask so before that i'm going to just like create a duplicate i'm going to select it um i'm going to click on it hold alt click and drag so that we click it create a duplicate um that we can use as you can see this is currently an auto layout navigation bar um it's completely made with virtual layouts but what i want to do is take notes of the height and widths of the navigation bar just the way we did for the header section how much you can see this is i'm 1440 by i think 80 um so i'm just going to create a rectangle and i'm going to use the same exact figures for the rectangle and once i've done that i'm going to make sure i place on the layer of the navigation bar on top of the rectangle image so i'm going to cut the navigation bar i'm going to select the rectangle then paste it so that i make sure that um it's on the layer is on top of the rectangle i'm going to select both and i'm going to use the align center um [Music] both vertical and horizontal align center to make sure they are both aligned then i'm going to use as mask um just the way we did for the header section if you remember um so here from here i'm just going to rename um this navigation bar quickly um so that we can identify it then i'm going to select the entire max and make it a component i'm also going to create a variant now we have two variants in our component set so basically what i want to do is hide the visibility of the first variant then use after delay to show the second one so i'm going to select the auto layout nav bar in the first variant and move it to the top with arrow key then i'm going to select the first variance i'm going to switch to the prototype mode and i'm going to connect the wires all down to the second variance um it's going to be and after delay as usual um zero millisecond um but i want enough that the navbar to delete a little bit so i'm going to be using 2 000 millisecond um for the smart animate then i'm going to copy our navigation bar component um [Music] i'm going to copy it and cut it then select the existing one right click and paste to replace now we have all our components prototyped and we can see the complete prototype now i'm going to hit r to restart the prototype and as you can see oh okay the navigation bar is really slow and i don't like that so i'm going to go back to the board and speed it up a little bit by reducing the millisecond time so i'm going to select it and switch to the prototype so we can see the wires then select it to edit i'm going to reduce it from 2000 millisecond to 1000 milliseconds and i'm going to play our prototype again um [Music] i think this is fine this is fine i'm just going to make it um an easy in and out and back um so that it creates a little bounce effect um i don't know why the prototype is extremely slow at the moment but um usually um this is not the kind of speed you get for these numbers uh and i'm guessing again it's because um i'm screen recording at the moment and i think my machine is a little slow so guys um this is it i think we've completely created the um animations on our landing page um this is it guys let's just look at the prototype um one more time um so this is it guys this is what the final product looks like just like i've said um the transition can be a lot smoother on your machine and um this is not completely detailed like the one i saw on dribble or like the one i showed you guys on dribble but i hope these guys this gives you an idea of how to achieve something like this on figma i hope you've learned something and i hope you enjoyed watching the video and if you've watched this till the end please don't forget to hit the subscribe button thanks for watching and i am going to see you in my next video

Channel: Thefemijohn

Views: 61,674

Keywords: figma animation, figma smart animate, figma web design and smart animation, figma, figma tutorial, figma interactive components, figma variants, figma components, smart animation in figma, figma smart animate tutorial, figma animation tutorial, smart animate figma, variants in figma, figma tutorial web design, component variants in figma, figma smart animation, button animation in figma, slider animation in figma, parallax animation in figma, figma after delay animation

Id: yyjw0Q4qctU

Length: 23min 25sec (1405 seconds)

Published: Mon Jul 25 2022