Creating Lottie animations in Figma

being able to bring your designs to life with animation is a superpower for designers but in the past it required you to use all of these third-party tools like Adobe After Effects and things like that thankfully those days are over so this video is going to walk you through how you can create production ready animations directly inside of figma let's dive in now if you're not familiar with Lottie files here's a quick rundown basically it's a file format that was created by Airbnb in order to add animations to their design and there's a few Main benefits one the file size is so much smaller than if you're adding a gif or a video or something like that but it also allowed you to do much more complex animations than what you could create natively in CSS and it's super code friendly like you can tie specific keyframes to different actions or scroll percentages in a viewport which gives you a lot of flexibility and makes it a pretty powerful format and lastly there are some great free libraries out there to get you started my favorite is Lottie files which I have linked right here and I've used their animations in pretty much all of the projects that I've designed over the last few years now up to this point the only blocker with Lottie is that they've been really hard to make in the past you have to use something like Adobe After Effects which if you haven't been in there don't go it's very very scary place and so even though I wanted to use Lottie files in my designs I ended up being very reliant on other people to create them or I was limited to open source libraries and any free animations that I could find on the lottefiles.com website but now the new Lottie files plugin allows you to create these animations directly in figma and then export them as Lottie so I'm going to show you how that works really quickly I have a super simple frame here with three circles if I duplicate this what I want you to realize is that it works exactly the same as smart animate so let's say I decrease the opacity over here and I'll Center it in the frame maybe I'll just do the same thing for this and then maybe we'll take this red circle and just grow it if I hit shift e to go into prototype mode select this Frame then let's just create an after delay animation perfect and then on this Frame here we'll just send it back with that same after delay and smart animate so let's hop into prototype mode just to see what it looks like that's a world-class animation right there now the cool part is once I have this prototype flow created you can see it's the simple prototype here I can open up the Lottie files plugin go to export to Lottie select simple and just like that in one click I can save this to my Lottie files workspace and where that goes is right here so this is actually where I've been hosting all of the animations that I've been creating for years all the maven animations all the dive animations they're all on lottiefiles.com and from there they give me these nice handoff links that I can use to give to developers so a lot of times what I'll do for my designs is I'll use a little annotation component and then I'll just link to the Lottie asset so that when developers start working on this part of the product they have all of their animation assets within the context of my designs in figma and all I'm doing is just grabbing this asset link right from here and all developers need is this link it's pretty simple and you can preview exactly what it's going to look like in production within their editor now I set up some quick examples just to get the creative juices flowing and help you see what is possible with Lottie in this example I've Shrunk the candle flame but what I really want you to see is that Lottie can handle Boolean operations if you open up the layer list you can see that this candle is made with a combination of unions and subtracts and all I'm doing to create this effect over here is moving this rectangle over to the right so if we open up a quick preview this is what it looks like all I'm doing is just setting two after delay animations to go back and forth and this is using nothing but simple layers and unions in figma and something like this can exist in code with a single link it's pretty powerful and Lady files also handles masks really well too so in this example I have this little airplane window here and it's going to open up the window but then remember a lot of files can be tied to click events too because they can easily be manipulated by code so maybe what I want is after the user clicks some kind of an action on the page then you can have the plane and the clouds fly by and those are the little details that are easy to make in figma but also easy to control with code and this is going to make it much simpler for you and the engineers that you're working with to get on the same page I like this one so I'm going to watch it again really quickly you can watch them fly by and let's close the window pretty cool let's move on to this third example here which is Lottie also handles Transformations on text layers too so you can see I'm updating the background here but I'm also switching between the different fonts so this is all of the variable fonts with recursive and if we enter into prototype mode look how gracefully this is handled imagine all of the different things that this can unlock a lot of even handles gradients well too so in this example all I've done is tied an on drag animation to control all of these different gradients and layers it's pretty simple stuff but these are the kind of details that you see in the different websites and apps that add that layer of polish that really takes your designs to the next level and now we can create that directly in figma the same way that we would set up basic smart animates now this last example might be my favorite because I have a very specific memory of spending an entire Saturday in a coffee shop trying to animate the trim path of a logo that I made so that I could get it into Lottie and it was very very hard and now this plugin basically takes that entire day's worth of work it makes it possible in about five seconds so you'll notice I don't have a second frame here I'm not animating in between two points in figma but watch what you can do if I open up the Lottie files plugin go to export to Lottie click this button now it's going to give me some default animations that I can use without even doing any work in figma and my favorite one on the right here is the trim path so you can see you can recreate this thumb print animation you can click on here and even change things like the duration and just like that I can one click save this to my workspace get a link and get it into my product and I didn't even really have to do any work it's never been easier to create animations and add motion to our products and if you can be the designer that brings this component to your team it's going to make you so much more valuable so hopefully this gives you an idea of what's possible and Spark some ideas of your own

Channel: Ridd

Views: 31,896

Keywords: Product Design, Figma, Figma Tutorials, Ridd

Id: ajfKecCyNOs

Length: 6min 45sec (405 seconds)

Published: Mon Sep 25 2023