Easy Lottie Animation with Figma & Lottielab - Complete Step-by-Step Tutorial

Hello friends today I've got an exciting tool to share with you all designers and animators out there and that's ly lab initially when I had a first look I thought this is a very basic tool and it did not catch my attention but then I saw the examples page and I saw the complex animations that have been built using this and it really made me curious to give this tool a try and here I am sharing this tool with you all this tool truly simplifies the whole process of creating beautiful animations and bringing it to life on websites and your apps so without any further Ado let's dive right onto my screen and see what l lab has to offer so if you already have experience creating L Json animation then you might know the tedious process of having to use After Effects and other plugins to get this done but ly lab makes this whole process a piece of cake before I get started with a simple tutorial let me quickly introduce you to the simple and easy interface of lty lab so right now I'm on the official website of lty lab and as you can see they have sharing some examples that I've actually made using their tool and here you have the interface and the whole website right so I'll just skip this part just go to sign up create your login using Google you can just sign up it's easy and free so once you sign up and you enter on the dashboard it looks something like this so this is a fresh new dashboard they have some tutorials to help you get started and let me just say create a new ly file and once you click on that you'll be taken to the interface where you actually start creating your animations so this is the interface on the left like any other design tool you have your layers on the right you have the properties related to it and at the bottom you have the timeline to animate right so right now it's in the design mode and once you want to start animating you just toggle this and it goes into the animate mode right and you can create your designs here itself or you can you know import things from figma which is an amazing feature so here you can jump to your dashboard you have different tools your pen tool importing assets and the layers itself right so that's pretty much about the interface so as I mentioned the best feature I love about ly laab is the import from figma actually it's not about the feature but how seamless they have made this process to import the designs without any Distortion the whole figma illustration or your designs get imported into loty lab it's very seamless and let me just show you a quick example of that and then we can jump into animating something right something very simple so for that I'm going to jump into figma and I I'll just pick one example from the community tab itself so let me just try some illustration scene so let's see what comes up so here we have a lot of things so let me try to pick something that's complex right so this one looks good so I'll just click on it it's a beautiful illustration of a scene right so I'll just say open INF figma and as you can see I can select each and every layer right it's very well organized so all you have to do is go to plugins and in the plugins tab just search for ly lab and the first one that you see here just click on it and it opens up a small window so you just have to select the frame or the design that you want to export so I'll just click on this and it automatically recognized it I can say open in L Labs since you already signed it it'll directly open a project project with this one selected or you can also use the copy feature so I'll just click on copy right now it's copied I'll go back to Chrome where loty lab is opened up and here I'll just delete this and I'll say control V or command V and there you go everything got imported so seamlessly no distortions every M layer is as it is and all the grouping is as it is so this is the best part and I love how seamlessly it got imported into the tool so let's quickly animate this and see how it works right so right now me I'll try to animate the maybe like a sunrise or a sunset so let's try a sunrise so for that we have different layers here so probably I can move this to the top so this one is let's rename these right so this one maybe we'll call it Circle one Circle 2 C2 C3 and C4 so renaming your layers really makes it easy Once you try to animate it so now we have your layers and everything is set so just turn on the animate mode and that opens up your timeline right and now just select the layers that you want to animate so I'll move the timeline to the first and I'll probably move all these layers to the bottom right so I'm bringing down the circles one by one just moving it to the bottom right here and there you go we have moved everything to the bottom so as the time increases probably I want to get these layers one by one outside so at 5 seconds I'm going to move the circle one that is actually a sun so I'll move it to this position and then I'll move it to 6 seconds another key frame and I'll move it slightly to to the top bringing it to the center and maybe the next one can be at8 seconds so that it has a slow effect I'm just using my arrow keys you can also drag it and bring it up and probably at 1 second I'm going to move the last one here so that is a C4 Circle and bringing it to the top so there you go we have done all these key frames right here and uh probably I'll move the duration of the complete animation to 1 second right now it's 3 seconds I'll bring it to 1 second and now let's play it and see how it works right there you go so that looks good right it's it was so easy right and also you can use the curves here so animation curves so right now as you can see this is linear curve I can change this to more natural and these I can probably move it to slow down and you can also use your own curve here as well right so I'm just changing all these to slow down and now let's see how that works that looks smooth right so you can do all these animations and also there are birds right here if you want to animate this I can also do that as well so you're in the animating mode right now I'm going to probably set the first angle to this or the first position to this and maybe at 1 second I can move it or bring it into the frame and it's not just straight paths right you can select the path right here and you know add a curve to it as well so right now it's going in a curve you can adjust your curves as well so in what path you wanted to animate and if I select play you can see the anim Antion in progress so that's a simple animation right there and the best part is you don't need figma as well to create these animations right so for that I'm just going to start a new lot file right here and let's see what we can do without even using figma right so we have a new file open up here and we have your shape tool right here so I can add in a shape so this is going to be a background and I can use the pen tool to create shapes as well so right now I'm just trying to create a line right here and connected both of them so I'm just going to add a point at the center and move it to the top so what I'm trying to do here is probably I'm just going to create an eye here and the eye we can animate it and just double click on these and it'll get converted into these curves so right now we have a shape right here this is I'm going to call it as a background and this will be your eye so going back and I'm going to add some stroke to it and probably make this rounded okay so that looks good I'm just going to add a little little more stroke okay that looks good to me and now I can add a fill to it so that it looks like our eye with an white fill okay that looks good and now I'm going to add a a circle which could be our eyeball so this should actually be black that looks good we just slightly going to you know change the height of it that looks good to me okay so we have our eyeball probably I just want to you know have a blinking eye or something so let's try that animation right here so we have our eye we have have this is going to be our eyeball and probably once you blink your eye you want this to get masked so for that reason I'm going to create a duplicate of this and this could be our ey mask or something just calling it a mask okay and we could you know just Mass these layers so right now I have mased it and if you see if I do this or reduce the height of it it's getting massed right so that could be used to you know animate it so a basic structure is ready now let's try to animate this I'm going to turn on the animate mode right here and I'm going to change the duration to 1 second for the animation so at the first this looks good so probably in 3 seconds I want to Blink my eye here so for that I'm going to select the ey mask here go to the pen tool so if I don't use the pen tool I would probably have to you know do it like this and that doesn't look right right so I just want to you know change the curve of this path right here so for that reason I'm going to select the pen tool turn on the animate mode and bring this to the bottom so that looks like a blinking eye and along with this I also need to bring the eye right here to the same dimensions so once again I'm going to select the pen tool turn on the animation for the eye and bring this to the bottom so that's happening at 3 and probably at 6 okay probably at6 I want this ey to open back so I'm just going to bring it to the top right here that that looks good I need to do the same for the eye mask as well so for that I'm going to turn on the animate mode bring the eye mask back to this position so there you go we have the animation of the eye blinking and opening along with this you know you could also animate the eyeball moving left and right so that also might look good so I'm just going to select the eyeball right here with the animating mode turned on probably I can slightly to the right or to the left and at this case I can move it back here okay so let's try this as an action I'm going to H the play button there you go guys you have this animating eye and you can uh select all of these you know group it I'm going to just group it let me just turn off the animating mode right here and probably I can just reduce it in size and let's you know try to duplicate it like this and see if it works so I have two eyes right here and if I play there you go I just have to add some easing and this will look pretty smooth right so once you have your animation ready the next process of exporting it is also very seamless all you have to do is just on export right here and you have all the different formats that you can publish it in right so you can optimize and publish it with a very small file size right here so generally a normal ly file would be 56 KB but ly lab has created this new feature of optimizing and Publishing it as you can see this 56 KB file would be a very minimal 5.7 KB and that adds very minimal load to your website or app while loading so that's really good good and you can embed it on all these different things you just have to select which platform you're working on probably I'm working on framer just select it and it gives you the complete instruction step by step how you have to embed it along with the code that you want to use right so if it is HTML you can see that it has included the script and also the code where you can just copy and paste it wherever you want and along with that you also have options of exporting it as a gif if you want a gif file or a gift file and then you also have MP4 format you can upload it and get an mp4 format rendered so you can see the download file size right here along with the properties if you want to you know repeat it increase the resolution all that is there and there's also a feature called live link which they have very recently introduced using this feature you can you know export this animation and put it on your website and let's say in future after a month you have to make some changes on it you just have to come back to this file make your changes and publish it again and it'll get reflected right on your live website as well right so the whole process of creating and you know publishing it and managing L lab has made this whole process a piece of cake and it is very seamless right and there you have it a simple straightforward way to animate your designs without the complexities of After Effects and all thanks to L lab so I'm pretty sure this made you really curious to try out the tool so the link for the tool is there in the description go ahead and give it a try and as always thanks for watching and I'll catch you in the next video with more such tools [Music]

Channel: Design Xstream

Views: 2,724

Keywords: Easy Lottie Animation with Figma & Lottielab, Figma to Lottie animation tutorial, LottieLab import from Figma guide, Animate with LottieLab without After Effects, LottieLab animation process for designers, Easy app animation with LottieLab and Figma, Seamless Figma design to Lottie animation, LottieLab tutorial for web and app developers, Create Lottie animations from Figma designs, lottielab, ship lottie animations, lottie json, figma to json, figma to lottie json

Id: j9KP44kj0gU

Length: 12min 8sec (728 seconds)

Published: Wed May 15 2024