Complete Guide on Creating Animations from Figma to Jetpack Compose in Android - Easy Tutorial

in this video I am going to show you how to create this beautiful and a smooth animation in figma and import that directly to your Android application [Music] okay so the first step is to actually create that animation in a figma and for those of you who are not familiar figma is a UI ux software that is available for free also if you want to completely Master this software then I highly suggest you to check out one of my online courses for that purpose anyhow here we are going to start by creating a one simple frame so let's here press a shortcut let's hold down shift and let's create here a simple frame I'm going to specify here the size to be a 5 12 in a width and a height we can also just name this for example number one and we are going to actually create a multiple different frames and convert our design into a prototype okay so the first thing inside this is a frame I want to create a one a circle so let's press o key on our keyboard let's scroll down alt plus shift to create one a perfect circle circle from the center let's specify here it's a size to be 350 for example so something like that let's just Center that on a screen there you go and now I'm going to press this little um Circle uh icon here to create actually an arc out of this circle okay and now I'm going to here specify actually a swap angle to be a zero for now and this um this a third ratio will be for example a 90 percent let's just increase here a little bit so that you can see how all that actually look like so this is a second field does represent a sweep angle which will allow us to basically increase that angle by ourselves so from 0 to 100 here we have also this start a position that we can change actually let me just here show you so we can change here the start position of this sweep angle as well so that's how it works for now I'm going to specify that to be a zero this ratio will be a 9 90 we can of course increase or decrease that by ourselves so it's up to you in this case I'm going to leave that to a 90 percent and this is a first first frame will contain this sweep angle of a zero so by default it will be basically a hidden okay now let's duplicate this Frame so let's just select this Frame press Ctrl D to duplicate that one okay and here is the second one let's just select this same ellipse and now I'm going to increase its actual sweep angle to 80 percent okay so that will be our second frame that we're going to create and also I want to create here um one a check mark icon so for that purpose I'm going to use here a pen tool so select the p on your keyboard or just uh select from this option as well and here let's create here a simple uh icon so I'm going to here uh create first a path for example right there I'm going to now hold down a shift to um to use the 45 degree angle and then I'm going to create one more and the third one I'm also holding down the shift as well to to use the 45 degree angle and here I'm going to create the third one for example right there press V to select the select tool now it's increase its actual um border width for example to maybe let's say 14. 14 okay let's now try to move that somewhere here on the center of this actual ellipse something like that there you go we can now choose the same color as the color of this uh circle behind there you go and in this second frame and the check mark will actually be hidden so let's specify it's uh its opacity here to be a zero so type 0 and press enter there we go and let's duplicate now this is a second frame uh to the third frame and now it is a third frame I'm going to change here the opacity to a 100 this time and also I'm going to apply here a color to both of those paths so let's select both of them holding down the shift and let's change here the fill color to this is a green one and here as well for the stroke there we go you can of course play around and maybe even increase or decrease the actual uh border width of this check mark icon so it's up to you anyhow this animation will actually have three different frames and each frame will basically animate and transition to the next one so for example this first one will uh smartly animate to this a second one this is the second one to the third one so let me just show you how all that actually look like here in our figma project so I'm going to choose now prototype section here let's select this the first frame and now you will see those little uh handlers and that you can actually drag from each frame so let's just connect this first one with a second one for the animation details here I'm going to choose after delay of a one second so the animation will basically transition immediately from this first to the second one so after delay of one milliseconds we want to smartly animate to the second frame okay and that animation will last for example uh 500 milliseconds okay and then this second one should be connected with the third one also choose here after a delay over once one millisecond so basically immediately after this animation finishes we are starting this third frame and we also want to use this the same um animation details like the smart animate and the 500 milliseconds okay and the last thing now we can see that this flow has been automatically created we can also rename that to say for example animation and now we can try to start this animation or this prototype to see how will that actually look like so let's just wait until this prototype actually opens up uh okay so we can now press r on our keyboard to actually reset this animation so as you can see this is a smart animate feature um it does not actually animate our design here the way we actually wanted but don't worry we are going to manually do the animation with one plugin so let's first select all those three uh frames let's go to the plugin section here and type here an INX so that's the plugin name that we're going to use and here we have a two options to go to the editor or to export this prototype we can just press for example export prototype and now let's just wait until this plugin is getting things ready click export and now a new page will appear in your browser so from here you can also see that we can actually uh play this animation to see how all that actually look like okay so as you can see that's how it looks like for now but don't worry uh we are going to modify this um animation to fit our needs so for that purpose let's go to the editor of this uh plugin and we are going to manually create and modify this animation so in this design panel right here we can see our frame and those elements that we actually have so we have one a vector that represents a check mark right and we have that ellipse around it so uh with this first check mark we are animating The Fill color and the straw color so in this case we actually don't need the fill color for our check marks so it's uh wrongly added to this uh project so we can just remove that um so this is where that fill actually is so a field color uh just in that same row and click delete okay and now we can also preview this animation and see how all that actually look like we can now select this a vector and actually remove this fill color okay and now as you can see that that's how it will actually uh work so our animation will work something like that so basically we are increasing this sweep angle for our ellipse as you can see here it says the The Sweep angle and by default that sweep angle will be zero and after 500 milliseconds that sweep angle will increase to 80 percent and that the sweep angle will also maintain its value until this animation ends okay so let me just see how will that actually look like we can also select each and every uh property that we are animating here and change its duration for example or even the value curve for example we can choose here maybe Apple standard for each and every animation here or you can experiment with that by ourselves so it's up to you okay let me just preview that once again to see how will that actually look like uh okay so this check mark is actually animating its opacity right here I'm going to select that opacity so there it is and I'm going to increase that opacity uh and actually move that right there okay so we are basically animating this opacity and not from the zero but from the 0.5 okay and now as you can see the The Sweep angle will animate until we reach 0.5 seconds and only after that we're going to start animating uh this actual um check marker icon along with this opacity value color and the color of this sweep angle as well okay so now let's start over and click play button so we can see how this animation will now work okay all right so it works actually uh just great there is also one more thing that we can add here so for example we can uh also add a scale animation for this object mark so uh to do that first I'm going to hear actually remember that the size of this uh check marks so uh 212. by 153. so I'm going to now specify here a zero to be the width and height of this um check mark I'm going to add here um the keyframe on the 0.5 timeline and then on the end of this timeline I'm going to specify that the same width and height that we have just removed so 212 right there we go and with this we have basically now animating the scale or the size of this check mark as well from 0.5 to 1 to 1 on our timeline okay now there is one more thing that we need to modify here also is this pivot point so as you can see our check mark is actually not animating from the center so uh it's not the way I actually expected of course you can animate this scale from the top left corner as you can see in this case so that's how it will work but if you want to change this disappivot point you can do that very easily by just selecting this uh this check mark and moving that the pivot point on the center okay and now this is what kind of effect we are going to get and there you go so that's how easily uh it is to actually animate uh those designs that you actually create with the figma and now that we have finally created this animation and it's a final form and now we can export this animation as a Json or as a low T animation so let's just here specify a lot the extension and click export so now as you can see we have received one file that has a Json extension and we are going to use that same file to import into Android Studio as a loading animation okay so this is the demo project that I have prepared for the demonstration purposes as you can see I have only one uh composable function a main screen and this screen contains a simple column and the two are composable functions the first one is the load the animation and the second one is a button which we are going to use to restart our animation on the top of our composer function we have a one composition variable that basically points to our actual loading animation file in this case this is the file that I have just exported from the website and also I have changed its name to be the animation because number one cannot be used as a name for this file anyhow after you place this animation Json file in this row directory you can just call this a row resource and specify that same animation and now finally let's allow this application to see how our animation will actually look like so we can press play again button to see how this animation will look like and here we go so it does look quite nice and it's basically the same as the one that we have created in figma okay so that's how you can easily create a quite beautiful and a smooth animation with figma and important same animation in Android Studio so if you have any questions about this animation and the process of implementing this animation feel free to comment down below and of course be sure to like this video but only if you find it helpful for this video that will be all oh my God if I die I'm a legend when they lay me down to rest

Channel: Stevdza-San

Views: 7,502

Keywords: jetpack, compose, composable, animation, how to, guide, tutorial, android, kotlin, android studio, checkmark, smooth, lottie, beautiful, android development

Id: -_zp8x5L5eo

Length: 13min 50sec (830 seconds)

Published: Tue Jun 13 2023