New Figma to Lottie Files - Production ready animations in Figma

foreign this is Will from Wheel bright design and I'm back with a video to announce that Lottie files have actually just released a new plugin for figma which allows you to create animations directly within figma for Lottie and what is a Lottie so Lottie is a json-based animation file that allows you to ship animations on any platform they tend to be 600 times smaller than a gif and much better than a video because you can use them for things like interactions such as buttons and things like that they are SVG based so they're vector format and that means they scale perfectly no matter what device you're on they're always Pixel Perfect so let's take a look at some of the actual designs that Lottie have created so we can explore what it is a little more so if I enter this design file and this was created by the team over at Lottie files we can see there's a ton of examples here and we can see how this will actually work so to install the plugin all you have to do is go over to the resources button here and you can search for the plugin here you can see I've got it down below in my recents but you can search for it here or you can visit the uh community and search for it here multi-files and head down to plugins and you'll see it's here and you can try it out for free so you just need to sign up so that when you load the plugin it will connect with your account so I'm already logged in and we now have this new tab over here called export to Lottie and we can see here that you can actually view some of your animations so if I go back to my design and press shift e we can see which ones already have some prototypes here we can see this Twitter heart one so if I select this one or I select it from down here we can see the animation playing in here and if we have a look a little closer at this animation we can see that it was created in figma and these interactions we've got an after delay of one millisecond we're going to navigate to the next frame so from four to five and it's going to be a linear animation over 100 milliseconds so uh why does this feature matter it will allow designers product and visual to design and animate using the tools they've already familiar with so figma and that allows them to create micro interactions without having to learn another tool and we can kind of dive into that a little more by looking at the old workflow which would be if you're doing your old workflow you would create your illustrations in figma or illustrator or whatever in this case figma you would then Ado open Adobe Illustrator to import that SVG clean it up and convert them into shapes you then explore that into after effects you'd add your Motion in After Effects and then you'd use the Lottie files plugin to export it as a Lottie now this is a much simpler workflow so you can design in figure as we can see here with all these different designs we can open up the Lottie files plugin which is free and only took seconds as you can tell you can then Auto animate single frames using presets which I'll show you shortly or you can create your own animations using the interactions here and then export those so let's have a look at an example where we can actually just automate that so if we select these three frames here and then go back here click export to Lottie and we can see it's actually applied an animation by default here so we've not added any interactions at all it has just automatically done it so it's even simpler if you just want to do frame by frame animation and use the automated tools within Lottie files which lowers the learning curve significantly from the plugin itself you can insert it as a gif into your uh figma so you can use it in prototypes or you can use the interactions themselves in the prototypes and you can also save it to your workspace which then saves it to your lossy files workspace available making it then available for uh review and going through that process and also you then have the assets to share with the engineering team or however you want to do it because Lottie files are production ready assets that you can use directly in your code so let's have a look at a few more examples here let's have a look at this star one so first I'm just going to play the Prototype itself and while that's loading we're going to have a look at the interactions here so this interaction we can see after a delay of 10 milliseconds it will navigate to Star One and we got a nice spring a gentle spring over 500 milliseconds and then we've got another one here and it's the same and it looks like we're using the same one between each one so let's have a look at that and if I go back to the beginning of that one so that's our animation there okay so let's have a look at that in the plugin let's just run the plugin which loads really quickly as well which is really nice that always helps okay so let's select Stars click export to Lottie and let's click this one and we can see our animation is looking really good so it's set to a loop and we can then insert that gif so it's just going to convert it to a gif directly from it within the plugin and then it's added it here so then if I add this to an R board or a frame and click play we can see that that gif is now playing or we could just use our prototype here so I'm not going to save that one just delete the file here so we need to talk about uh best results and how best to actually use these um when we're creating these so you want to keep all the layers in all frames in the same order and what that means is that when you're creating your frames that all your layers are in the same order so if I open up star 0 and Then star five we see the layer names are the same and they're all in the same order and that way the lottery files plugin knows how to animate it and the same goes for figma as well figma then can use the auto animation tools within the interactions to uh do the SMART animations so it's always best practice to keep your layers name the same and in the same order and to not delete any layers within the frame instead you should hide them to zero if you're wanting to hide an element in the second frame so for example in Star 0 maybe we don't want the star to appear here we would just hide it and therefore in this one we've still got the same layers it's just hidden in this one and it's available in this one so we're not actually deleting anything and that way we're keeping the structure the same between the frames which helps the auto animation and also the Lottie files plugin so there are a few limitations uh currently and these might be changed in the future but right now there's a couple of limitations and we can have a look at those so nested frames that is something that you can't currently do so by nested frames I mean if I draw a frame here and then add a frame inside the frame and we can see there's a frame there and there's a frame there that's what I mean by nested frames so right now nested frames do not work you only have one frame and everything within that frame is what will be animated so you can do a frame to frame and you can animate between these two but you wouldn't then have a frame within the next frame because it's animating between the frames so any nested frames will break your animation so that is the first limitation the next one is the figma components and text layers are not yet supported um so if you're looking to use text right now this won't work but what you could do is you could go and uh trying to remember where it is but you can outline the stroke and therefore you create um some shape layers so if you outline the stroke it's now it's still text but it's not editable text it is actually a shape at this point so that's how you can get away with using text with the figma plugin the Lottie plug-in sorry and that's how you can use it for now because text editable text like this where you can come back and change it as much as you like is currently unsupported and that goes for components as well so if you're using say a button component and you're trying to animate it as part of your design system or your design Library for now you would need to detach that button and not have it as a component and also make sure there's no frames nested as well so components are currently unsupported when it comes to effects only the drop shadow effect is currently supported so any others I think that it might be things like blur so if I just draw a quick shape here whoops not sure why I did that and then head to our design Tab and effects so drop shadow supported but in a shadow layer blur and black round blur are currently unsupported so that's just something to keep aware of um when you're creating your animations for now and every gradient used must have the same number of color stops across frames so not entirely sure what that limitation means right now but there are some limitations when it comes to gradients so another thing to pay attention to so if we have a look at some of these examples here we can see that there's a few different ones so we've got some micro uh animations or interactions in the form of this Twitter Hut we've got some UI animations and let's have a look at this one because it's quite cool let's reopen that plugin again select day night toggle so we've got a nice animation here where it's going from day to night within a toggle and you could actually turn this into an interactive toggle in your code and that's a good use of using a Lottie file within a UI component another one like I said before is this uh Twitter heart reanimated if I just select this one again whoops one so that's a nice little micro interaction some feedback from perhaps when you click a heart button you get this animation um so that's a nice example of a micro interaction we've got another one with an animated logo which we can see with the slack logo so if you wanted to animate your logo this could be for a nice splash screen or when you open an application or even for loading you could use your logo you can do that and then we have some others down here such as the patterns which you could use for kind of filling spaces to add to like the Aesthetics of your site and this skeleton loading one which I don't think has any interactions applied so far so we can quickly add some by selecting the three frames so bear in mind there are no interactions made with Sigma here so we're going to generate these with Lottie and we've got this nice skeleton loading animation here which you could use instead of your image being downloaded so while your image is still loading you could display something like this instead so that is uh an over kind of an overview of the new figma uh Lottie files plugin and the power you can use it for um oh there's a bouncing ball one this one looks quite cool because it's got a nice bit of squash in there let's have a quick look at that one it's called bouncing ball there we go so this one could probably do with a little bit of uh animation curves tweaking so it's like a nice smooth animation town up in scratch so the idea with this plugin is not to actually replace the after effects workflow instead is to offer another alternative for those who perhaps aren't motion designers maybe you just want to create some nice micro interactions and you can do that directly from within figma without having to take that giant steep learning curve of using After Effects learning how to use After Effects and create those really complicated animations and following that big workflow this is also much cheaper as well and you're not you're not having to buy an additional license to After Effects you're not having to hire someone who's an After Effects Pro you can do it directly from figma to Lottie and create production ready assets so this is a really nice low uh entry level into creating motion design and adding motion design to your product designs and UI designs so do check it out it's free to sign up to Lottie files and to check out this plugin and I'm really excited to see what you guys make so let me know in the comments below share links to your Lottie files on the Lottie files site if you add them up as public files and I'm really Keen to see what you bring or build so thanks for watching and I will see you in the next video

Channel: Will Brett Design

Views: 15,827

Keywords: Animation, Figma, Lottie, LottieFiles, animator, best figma plugins, figma plugin, micro interactions, motion design

Id: _Abi3HY8d0o

Length: 14min 50sec (890 seconds)

Published: Wed May 17 2023