5 Amazing Button Animations in Figma | Tutorial

hey designers in this quick tutorial I want to show you how to create five amazing button animations in figma I'm sure your clients will love them and I'm sure that your projects and your prototypes will look much more interesting and valuable so without further Ado let's get to the designing and first what we need to do we need to create a title for the button it will be just a button now let's turn this into the out layout so I press shift a and now let's add some fettings put 40 left and right and 16 on top and bottom and now I want to add fill it will be white and I want to add stroke black with two or let's put it four pixels my text is 40 and let's make it black like this and now let's add coordinate radius 100 after this let's um change the name and it will be button one slash default now we need to add a small circle like this about 24 pixels let's make it black and put it inside our out layout and then press absolute positioning here now let's make it in the center and let's move it all the way down so it's outside of the frame without layout now we select the frame we click clip content to hide this circle now option drag to copy now we select our Circle let's click a line in Center like this in the middle and let's make it bigger holding option shift make it bigger like this and also we should select the title of the button and make it white but we don't see it now because it is under our Circle so we need to change it in our layers and here we should do the same thing like this now we change the name we put hover we select both of these out layouts we go to components create component set select the first variant go to prototype and drag inter direction to the second one here we select while hovering smart animation and let's put 500 milliseconds linear let's put it easy out or we can use gentle now let's create a frame for example 1,000 by 1,000 and with option drag let's copy the first button to our frame and select the frame and press shift spacebar and now we can see the Prototype let's create the second button I'll just copy the name of the first one with option drag here now I create a new auto layout like this uh again 40 and 16 top and bottom again I want to put white color 100 for the corner radius and stroke about four well basically we're doing the same thing as we did before and now uh I need to add effect drop shadow here we make blur zero and the color should be 100% And on vertical alignment we should make it about eight and now we should add this into a frame this is very important guys let's create a new frame and then we should make it this size look um so the button should touch the top of the frame and the shadow should touch the bottom of the frame you see actually I want to move a little bit um Shadow on to the top because I don't like the way it looks yeah like this six is okay and now I hold command and I make my frame a little bit smaller and I remove the background so let's call this button two yep and let's call slash and default now we copy it and here it's going to be hover and here's the trick I closed an eye on drop shadow and I move this out of layout with the button to the bottom of the frame I just use the alignment yep here it is and now I select both of them create component set select the first variant and use while hovering and here I don't need smart animation I use instant like that again with option drag I copy it to the frame select the frame shift space bar and now let's check it out look looks really nice you see it's kind of dropping inside looks really 3D don't forget to hit that like button if you like what's happening here right now and now let's do the third button copy the first one uh the first button and here we need to detach instance instance and we remove uh the circle that was inside and I want to fill it with different color let's make it this blue and we remove the um stroke and let's change the color of the title to White now I need to draw a rectangle like this for example 10 pixels and I want to turn it a little bit like so and make it white and now I go to effects and I select layer blur and I make it blur like this actually I want it a bit larger longer like this and I put it inside of my button like so but again I need to select the absolute positioning I move it this way so let me get in center and I move it all the way to the left like so here it's going to be default and another copy and here I need to select my shining effect and I move it all the way to the right and here I call it hover now now I select both of them this is going to be our button three and here I change it so button three select them again create component set and once again I just move this Arrow over here and while hovering and here I need to select smart Dimension and I want to use ease in ease out and about 200 milliseconds like that okay let's copy it to our frame and let's see an action yep well this one is very fast so let's make it a little bit slower maybe 500 yeah it looks pretty cool like this shining effect for the button all right so the fourth button uh we actually need just a text TT and we'll use um frames for this so I select frame make a frame and for example this was about 200 by 8 let's make it 200 by 80 0 MH actually was two 205 okay like this we s the button and put it in the center like so and now we need to put this button text inside of a frame but before that we need to change something in our text layer we need to use vertical trim like this and now let's put it into a frame right click frame selection here and now I need to copy it so I duplicate it and then I can make an out layout now so I press shift a inside but before that I need to oh after that I need to select my frame and select clip content like this you see it's aligned to the top of the frame that's inside here so now I Chang the color oh let's make it black and I want to change the color of the text so I'll change it to White that's going to be our button four SL default copy and here it's going to be hover and now we go inside of our frame we select the our layout and we click a line to the bottom like this and you see there is a problem we can see top letters so we need to use padn go inside inside the spacing so we change it to two and here we need to change it to to two also like this yeah now it looks okay Y and select both of them create component set prototype connect and use while hovering and here I want to put is in out 500 milliseconds let's use 300 or let's use two 200 milliseconds again copy to the frame like this and let's see the action and here's the cool effect rolling inside the button rolling text inside the button I hope you like it so don't forget to like that hit that like button all right let's make the fifth button so we select the text I just copy it and I turn it to Black and now I make again out layout make it 40 left and right and 16 top and bottom and now I need to make a rectangle put it inside the button and I need to put it into the I need to use absolute positioning again and put it in the bottom of the frame and in the center and it should be exactly this size of this Frame like this and for the height let's use about four pixels like this and put it on the bottom and change it to Black again like so and now let's rename it it's button five SL default copy it and here let's call it hover and now what I need to do I need to make this rectangle exactly the height of the button and now we need to change the color of the text to White and again let's move the layers a little bit and here let's move it on the bottom too and now we select create component set select the first variant and connect to the second one while hovering smart anation is in is out is okay and 200 MCS is fine too and let's duplicate it to the frame let's actually make them tidy up like that and let's see how it looks last button actually for some reason we don't see the this um and what is it let's quick quick content [Music] M yep something was wrong with the Prototype okay so let's see how it works y looks like this looks really cool I think guys I hope you like the video and it was useful for you so in the comments below please tell me which one do you like the most and please don't forget to like the video If You Like It And subscribe to my channel if you didn't do that yet and I'll see you in the next one bye- bye

Channel: Sergei Chyrkov

Views: 2,806

Keywords: Figma, Smart Animate, Figma Button Animation, Figma WOW Effect, Figma Animation Tutorial, Figma Animation Effects, Figma Animation Tips, Figma Animation Tricks, Figma Design Animation, UI Animation, Figma Animation Tutorial 2023, Figma Animation Step-by-Step, Figma smart animate, Figma Design Tips, Figma Design Techniques, Figma Design Tutorial, Figma UI Design, Design Tips and Tricks, button design, figma tutorial, figma prototype tutorial, figma tutorial for beginners

Id: __jVKBouojE

Length: 14min 31sec (871 seconds)

Published: Thu Nov 23 2023