Create an Animated Like (Heart) Button in Figma

hello everyone i hope you're doing fantastic in today's video we're going to prepare an animated heart icon an animated light button icon in a figma this is going to be an interactive component we're going to be using smart animate hover states press down states and simple animation to show that there is some kind of feedback and to show that this is really interactive this is the final result and if you would like to download the source file for this check the link in the description that will take you to my store now let's see how to create this animated icon we're going to start with a rectangle and the dimensions of this rectangle are going to be 160 by 100 then we're gonna around these two corners which means the top right and the bottom right one and we're gonna say 50 then we're gonna select this rectangle duplicate that rotate a line like this select both of these merge rotate again and there is your heart very simple right now we need to actually create the animation i'm just going to remove the fill and add a stroke will be around 12 let's say right we're going to name this heart and select that and then create a component from this this component is going to have a component property and the component property is going to be called state it's going to be it's going to have a default state a hover state then it's going to have a pressed down state an expanded state expanded and then final state so we're having five states in total but don't worry this looks more complicated than it actually is i'm gonna explain everything the first state we're gonna keep that as it is so nothing will happen this is the default look so if you don't interact with this icon in any way it's just gonna be uh this is just gonna be the the look of the icon and we're gonna have a press down state and that will mean that this stroke is gonna turn to like mid gray let's say right and it's gonna also shrink a little um oops sorry this is the hover state so that means it's gonna turn to also mid gray but there's gonna be no shrinking the press down state is where the shrinking is actually going to happen so i'm selecting the heart shape and then pressing k to access the scale tool and with the heart shape in the press down state selected i'm gonna do this to push it a little bit as if further away from the user all right then we're gonna have an expanded state and this means i'm gonna again take this heart icon with the scale tool selected and i'm gonna do the opposite of this i'm gonna expand expand the heart icon right i'm just gonna increase this to give this some more space and this expanded state that's gonna be actually red the stroke as well as the fill so this is where our like button will actually turn red i'm gonna change the color to make this a bit softer so why don't we actually just like show colors and just choose a color that is better in my opinion right so like this for example yeah i think this looks good and i'm here so again selecting the heart icon sampling the colors from the previous state right and now we are ready for prototyping so i'm going to select the prototype panel right here select the first default state and click and drag over to connect the first state to the hover state i'm going to say that this is going to be while hovering change to state hover and it's going to be of course smart animate is out and it's going to be quite quick so let's go for 80 milliseconds and then from from here i'm gonna do something similar that i'm gonna say say while pressing while pressing change to state press down that makes sense right um and then i'm gonna continue uh selecting the press down state click and drag to this expanded state and that's gonna be on tab change to state expanded actually it's gonna be touch up or mouse up date expanded and then from here this is going to be after delay delay is going to be just one millisecond so that's instant and change to state final right smart animate is out 50 milliseconds so theoretically what should happen now is that we when we use this uh an instance of this component we should be able to hover over this icon and it should turn to this gray mid gray color then when we actually press down it should shrink then quickly expand over the edges of the frame and then revert back to its initial size with a new color i'm gonna test this on a frame that i'm going to create right here so this is going to be 1 000 by 600 and it's going to say test frame and also we're going to shrink these icons make these icons smaller because i think that's too big for an icon so instead of 184 in width this is gonna be 32 33 pixels something like that let's test this out i'm going to go to assets and then click and drag the heart onto the test frame center it and launch the prototype my prototype has launched with an iphone device i'm gonna fix that by going to prototype and then just select on the device i'm gonna select none and this should do the trick right yeah it's fixed i'm gonna fill the screen with this and before we we actually test the prototype uh there's gonna be one small change and that is if we actually want to unlike something right we click the icon again and it reverts back to its initial state which should be the case here as well so on click change to state default it's going to be smart animate the time is going to be 100 milliseconds something like that and now let's see what we built so there's an icon we hover over the icon it changes to gray we click it we hold it press down it shrinks you release it and it expands and then reverts back to its normal size with a new color so once again we unlike hover press so this is the loop that we have created very simple yet powerful and gives the user a good feedback that something's happening something has been light favorited by them so this is very good for using in your interfaces in web design and mobile app design uh it's also good to mention that uh when doing things when designing things for mobile it actually doesn't make sense to use hover because there is actually no hover in uh you either touch the screen or you don't with with computers that's different because you have you know you can hover over stuff and then you actually click it i'm gonna just make this a bit bigger so that we can see the icon better so this is what it looks like we could add a shadow for example we could do that yeah i think um let's go to effects in this final state let's sample the color from here blur it move it down then decrease the opacity and try it out right so you get some nice little shadow here to go the extra step so this is the final result this is what we get we hover over the icon press it down release and it does this little jump when it expands if you'd like to download the source file for this check the link in the description and if you'd like to see more animated icons leave a like and subscribe my channel thanks for tuning in and i will see you as always in the next one

Channel: Mavi Design

Views: 11,295

Keywords:

Id: KS1OJefOYRE

Length: 8min 20sec (500 seconds)

Published: Wed Sep 14 2022