From Figma to Lottie - UI/UX Animations Made Easy

[Music] Lottie allows you to create and use excellent animations especially for micro interactions and they recently push an update that allows you to export Lottie animations from within figma itself so I'm going to show you how to create this menu interaction here first in figma then we're going to export it and that'll show you how to control it via JavaScript in an actual web project so let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright here I am in figma with a new document we don't have a frame yet so we're going to hit F on our keyboard and we're just going to drag out hold while holding shift a perfect square um so you know something around 300 by 300 will work for the width and height all right at this point we're going to do a hamburger menu so it simply consists of three lines typically and we're going to stylize ours a little bit different so hit L for the line tool and then we're going to hold shift and just kind of drag out a line roughly around there after you have that line you're going to come up here and you wanted to Center that here within this Frame horizontally after that we're going to go to something like I don't know 15 for the stroke at width and then also we're going to have round on the end caps right there okay so I'm going to move this down a little bit more in the center and then we're going to hold shift and ALT and then just drag down probably somewhere right around there and then hit Ctrl D to duplicate that one more time all right so now with all those three we could take these and just get them centered until we get that Center little notification so at this point I the starting animation I want it to look like this I'm going to hold shift and bring this top one to the center hold shift bring this top line or the bottom line rather to the center as well all right so that looks pretty good to me I might make these actually a little bit thicker around 19. okay all right so now at this point this is what we want it to look like while we're hovering over it and so we want to get some guides real quick so shift R will get you these guides and we'll create a horizontal guide right here right where the anchor points are to be and you can also hit shift R again let's get over here get the Anchor Point over here they should snap to where the actual anchor points of the path are we'll create one right here and then also drag one right down there as well okay so this is going to make our life easy when we go to animate these Strokes to make sure everything's kind of uh symmetrical Ctrl D now and that will duplicate it this was this is going to be the frame of what happens when we hover over the animation and so for this I'm simply going to double click onto this bottom path take the Anchor Point and drag it right there to the intersection of those grids or the rulers or the guides whatever you want to call them and we're just going to make them grow out real quick and then the final State um of this animation when it's hovered being hover over is going to change into an X so the idea is like they hover over a navigation drops down and then it allows them to close it by clicking X or probably just moving off so in this case um we an X only has two lines but we have three so we need to do something to change this middle and hide it this middle line so if we drag it over here something like this and then we'll take the opacity to zero now we only have two lines we could double click this Top Line we'll drag it over here double click this one the bottom one and drag this up here okay so now we have our animations shift R to get rid of the guide View and now what we have is a couple options we can go to plugins and then we go to Lottie files if you have it installed already if not just go to find more plugins choose just do a search for Lottie files install it it's going to ask you for an account which is free at lottiefiles.com and then log in at that point once we have it loaded up we could select our frame one come over here to export to Lottie and we can actually just click export to Lottie and what this will do is give us some predefined animations like rotate you can pulse and again this is ignoring the animations that we want because we haven't defined those yet but this could be just a quick way to get animation without actually having to animate but if you want more find control over your animation you can create your own like we're about to do here so what we do is we go to prototype up here and then over here we're going to drag this over drag a connection and for the interaction details on click or whatever that doesn't matter we don't need that what we do need is we're going to choose a smart animate about 300 milliseconds and that should be good so now I'm going to move this over and finally we have a connection from frame one to two then two to three um and this is the exact same thing so now what we can do is if we go here we have a flow starting point you want to click that to make sure you have flow one right there now at that point we simply go over here let's go back here and if we choose select prototype flow flow one and there you go this is the animation as you can see it's just continually looping over and this is what we want so if we click save to workplace work pla workplace private animations let me hit save okay great so now at this point we can actually open this up in Lottie and we can then download it and integrate it on a project which I'll show you how to do now all right now at this point I am at lottefaz.com in my workspace and this is the one that we just created if we click it we can see it in action and it's going crazy looping and all that good stuff so over here we have four different options and really just split up into two one is just minifi minimized or optimized essentially if you click this and you don't have an account I you're going to have to get an account in that way but otherwise you can download just the regular Lottie Json or the dot Lottie which we're not going to get into I'm going to click that and now I see in my folder here we have our new one that was just downloaded okay so now now that you have it downloaded to your desktop we want to go to index type in index.html to create one exclamation point Enter to get some quick boilerplate we're gonna do link CSS main.css here and then for our markup um let's just kind of style this like how it might be in a real app so we'll just do like a section here we'll do a nav element and then we'll have an a element inside of a we're going to have two columns we'll use display Flex to get them in a two column sort or orientation the first one is going to be the container for our Lottie animation we can just use a div element for that and a div element of Icon and just leave it empty that will become our selector in a second then we're going to have a span element that will hold our text menu so we'll have our icon and then menu next to it typical pattern same old same old so now we're going to go ahead and we want to include the Lottie script the Javascript file lottie.min.js so I just typed in Lottie CDN at Google and found this right here and this will work just fine of course you can use npm or whatever to install that in a more robust environment but now we're just going to do some JavaScript right here so for our JavaScript what we want to do is we want to First access our uh icon right here so we're going to say const we'll just say icon equals document.queryselector class icon great now we have access to that and now we're going to use Lottie load animation in fact my gith co-pilot automatically filled it in for me so um this isn't all correct though so our container certainly is icon that's what we want render is SVG we want that as well we don't want to Loop it we're going to change that to false autoplay will be false as well because it starts playing it's just going to go to the end X date we don't want that all right now the path though we want to get that file that we downloaded we want to get that into here I'm going to rename that and we're going to name this here uh to menu all right so now that that's named menu we can come over here and modify this to menu.json now let's save it I'm going to right click open with live server you're going to need the live server extension if you don't have that you can just install it over here under the extension section and there we go we have a very large SVG graphic this is where the CSS will come into play let's get this before we make it animated with JavaScript and all that let's get this set up with our CSS so I'm going to create a new folder called CSS main.scss for SAS and then we're going to click watch SAS you'll need this the live SAS compiler extension over here as well to get that working and by the way we don't really need SAS for this little example but I'm going to assume that in a more robust environment you'd have it installed anyway um for body we're just gonna I'm just gonna paste in a few uh properties for this first rule set we're using uh enter display grid Place content Center we only have this one element to feature so we might as well Center it in the viewport and then finally we also have nav a and what we're going to do is uh we're going to do a couple things again I might as well just paste this in display Flex align item Center that's vertically just to get that menu um type Center aligned in relation to the uh what do you call the actual icon font size 1.5 Ram blah blah blah blah and then finally I do want to I well we're going to leave this right here and just see what this looks like uh to begin with all right so this is way too large and to fix that we can just um specify our icon selector and we can set a width or yeah a width of let's say 1.8 m units let's say that we'll go back there we go that's much better so I'll just zoom up here and then I want to add a little bit more white space between them so I'll just do gap of like 1.5 M units actually that's a little bit too much I think we'll do point yeah more like point three or so that's much better so now what we want to do is we want to add an event listener of mouse enter all right you don't want to use Mouse over because it'll fire every single time the mouse moves over it we only want it to move a fire once once you move into that element um and then what we're going to say is we're going to open this up and we're going to say lottie.play now let's see what happens just when we do that alone get this over and there we go all right so it just goes all the way forward and stops and it doesn't work again so let's figure out what we can do opposite so what we can do is take this right here duplicate it Mouse over or wait Mouse leave rather and then what we're going to say is Lonnie dot set Direction negative one now what this will do is reverse it so it's it's it's going to be kind of like a seamless situation so if I hover over it we reverse look at that now now it doesn't work again why is that happening well we need to take this set direct Direction and we have to set it back to the default position of one or this other to fall I would I guess you'd say default Direction so now when we hover over it look at that and then finally if we think that's a little bit too slow you can also set lottie.set speed let's just do like three this will make it three times as fast as what it currently is and look at that now of course there's a lot of other stuff that you can do with the JavaScript here so I suggest just take a look at the docs for all the different methods and events that you can tie into especially in order to create a multi-step sort of Animation where you have different points in the animation timeline that you perhaps that you do find in figma and you can you can make something more robust in that regard so anyway I hope you found that useful uh if so definitely check out designcores.com all the courses that are available here especially the UI ux courses and I will see you all very soon goodbye

Channel: DesignCourse

Views: 31,703

Keywords: ui/ux animation, ui/ux, web animations, javascript animations, lottie, lottiefiles, lottie tutorial, lottie javascript, gary simon, designcourse

Id: ZLSdqE-60hw

Length: 13min 41sec (821 seconds)

Published: Tue Jun 13 2023