so i've got a really exciting series for you and starting with this video so what we're going to be doing is learning how to create animated components now we've done this before on the channel but what's different about this series is we're going to be using a new tool it's not that new but it's new to this series and we're going to be creating animations in figma but also learning how to create those animations in after effects which is an adobe software but even more exciting than that we're going to be creating them as lofty animations and this means that we can directly put these anime animations onto our website apps hand them over to developers ready to go so they don't have to recreate them in css or we don't have to use gifs which are really expensive and um quite heavy to use we don't need to use videos again um not that ideal we can create animated components exactly how we want them with awesome animations that we can then hand over to developers or learn how to easily integrate into the code ourselves so let me give you an example of that so i've created this animation here in figma um using this interactive component and this is what we're going to be building um throughout this series we're going to start by building in we're then going to take it into after effects which i'll show you in a minute and then we're going to be exporting that as a lottie file and learning what we can do with lottie files um so this video is just an overview of what we're going to be capturing in the series and what we're going to be learning so let me show you what what we're going to be building so this is just a really quick mock-up in figma um it's one component with a load of different states and if we have a look we can see that they animate between the different states and we can see what that looks like here so we've got this kind of liquid um toggle button which let's face it is way more exciting than your standard toggle which would just be on and off it'd be an instant transition between the two states this has got a really nice animation that is nice and fluid um but also is quick enough that it doesn't add any friction to the user experience which is also really cool so these little micro interactions add a lot of um fun and whimsy to your designs and add that extra layer of quality that a lot of um digital products these days are missing but we can take it one step further we can't do anything with this what can we do with this we can hand it over to a developer um and then they can figure out how to rebuild this in css and let's face it unless you've got um a developer that's on your team that's really into working with complicated css animations they're not going to be too happy to receive this it's going to take them a lot of time a lot of back and forth and it's going to be quite complicated so this is where after effects comes in after effects is a motion graphics tool in uh part of the adobe suite and just let me just close that chat for a second um and we could do some really cool stuff with this so if i just scroll through we can see that we've got this really nice fluid look at that bounce there and a nice transition so i'm going to play that in real time now okay so that's got a really cool fluid feel it feels organic it looks like i'm calling this a liquid toggle because it's quite fluid it's almost like a jelly or a liquid and we're going to be learning how to create that so we're going to start in figma we're going to bring it into after effects we're going to recreate it after effects we're going to be using all these beautiful curves things like this and we're going to learn how to create this and learn how to use after effects now there is a caveat with this that we do need to use after effects and i don't believe there is an open source solution for this um and after effects isn't the cheapest you need to either purchase the app or subscribe to the creative suite but if you were just wanting to follow along in this tutorial series you could probably download the uh trial from adobe um which i'll hopefully put above if not search for adobe and then go to their creative cloud creative suite and download the trial and you can get after effects from there um yeah so we are going to be creating this so yeah a really nice fluid toggle but again this after effects is going to export this as a video which we can then convert to a gif or something like that but gifs and videos they're not great for use in ui one they're really hard to position they're not gonna work directly with the code so actually toggling these on and off it's going to be really tricky to get that to work um for a developer to recreate this in css isn't ideal so we're going to be exporting this as a lotted file so let's learn what lottie is [Music] i've got a big fat big fat big big big listen [Music] clap you ready let's go [Music] [Music] okay so we're back and we are now on the lottie files website and we can see here this is actually a lotty i'm guessing this is possibly a lot here too or this might just be css animation but you could create this in after effects as text and export it as a lottie so you can have these animations work like this but this here is a perfect example of a lotty it's a animated graphic that is also an svg so it's pixel perfect and it's scalable to any size and also it's tiny so we can learn a bit more about that here so what is it we can see a png if we wanted to do this with png files png being an image with an alpha channel it would take 50 files and each file is probably going to be a few hundred kilobytes at least and it's pixelated so or it's rasterized so it's going to incontain pixels which means as you scale it on your site or app it's going to look pixelated if it scales same with the gif if we can see it's 375 kilobytes it's actually a really small animation here as well um and it doesn't look that great but this lottie here is only 56 kilobytes so it's absolutely tiny um if we have a look we can see it's 600 times smaller and 10 times faster to ship um than a gif and it looks brilliant it's fluid and it's really low intensity on your computer's rendering here's some more examples these are just some of the free ones that are from creators that have shared it you can download a lot of these so um you can go to discover go down to free animations and you can download these files so let's have a look at sm roni's here we can download it here um json file and you can download it as gif if you want or a video but you really want to download it as a json file and play around with it so let's have a look at some examples that i've used previously so on my website here actually if you go to worldbratdesign.com i'll try and put the link below this here this is a blotty file so it's not actually text it's animated in after effects um and then it's rendered on the website and if i do a refresh of the page you can see well let me refresh without a link already in there try that again there we go you can see it loads instantly such a small file it loads really quickly so we have no issues there it's actually smaller than if i'd used an image slightly larger if i just use text but we wouldn't have all these nice animations here again this could be achieved using css animation but i think it's much nicer as a lofty as a designer i find it much nicer to work in after effects so i can play around with the curves as much as i like and it's a great result so let's have a look at a few more okay so we are just having a look at a few different examples i recently became a evangelist for lottie and i'm going to be doing a load more videos with lottie files um as we go lots of tutorials i've used lottie files for years in my personal projects as well as my uh career if you look at some of the projects i've worked on in the past you'll see loads of examples of where i've used lottie in products so here's his one this is just an animated graphic that i created a little while ago um as part of a celebration this was part of a onboarding sequence when you completed it we had a nice um illustration to go along with the messaging once a form was completed um going into a bit more what lottie files uh feel free to read this it's on my website it's on my blog easy to find um again i've already shown you this one so this is another example again this is a lottie loading here this isn't a video this isn't a gif this is actually the lottie file being played here's another example of a password screen um motion graphic of an email just uh again part of an onboarding sequence and a nice parcel or present animation here is a pretty cool one using face id and touch id again examples um which are kind of more along the illustrated or graphic side um but you can use lottie for ui as well easily so yeah just a quick summary of what we're going to be doing in this uh video series we're going to be creating animations in figma directly um as kind of rough mock-ups of what we're going to be creating in after effects we're then going to take those designs all those design blueprints um over into after effects we're then going to be creating these animations in after effects and i'm going to be showing you how to do all these and stretch and squashes and how to use the curves how to blend between colors all these nice things to get you kickstarted using lottie in your design workflow which i think will put you heads above the rest of designers who are just able to create stuff in figma as mock-ups and then hand it over to the developers this will give you a leg up on other designers because you'll be able to actually create these animations code ready to ship to put straight into the app or your website or your digital product without any need for the developers to recreate your animations in css no need to use horrible gifs or videos that are going to be sluggish slow to load um and also intensive on your operating system or cpu or whatever it is being used um so yeah this this is a really exciting series i'm really really keen to get going we're going to start off with just this toggle but if the if out there you you like what we're doing here we can do we can bring this to whatever you like really we can bring we can be looking at kind of closed menus hamburger menus anything really that you can think of we can do um as an animation and we can get this shipped so make sure you uh subscribe and like this video make sure you watch the rest of the series this will be a step-by-step series uh with videos coming out frequently um make sure you go check out lottie files and read the documentation there there's loads of tutorials on their site and their youtube for you to learn more and i'm really excited to get going with this so see you in the next video