Simple Burger Bounce animation (Figma to Lottie!)

guys what's up so in this video I'm going to be sharing this animation that I created in Lottie files a lot of people feel like bouncing effects or effects like these uh aren't really possible in figma well they are and you don't have to do a lot of stuff you don't have to do a lot of manual calculation I feel like this can be done in just a few minutes so let's just get into it before you ask like I actually downloaded this burger from uh free pick so you can obviously go ahead and download it I have freemium account so I can download it as well and use it if I want to but yeah you can just go ahead and download it then you're gonna get an illustrator file like this I'm just going to ungroup everything and then I'm gonna have this particular group I'm just going to bring it directly within figma so I already have it designed within figma but I'm going to delete it so I'm going to delete it so I can show you how to do it from scratch so here we have the burger and I can just go ahead and actually scale well first of all I'm gonna make the burger a bit smaller so let's go ahead and make it like 250 by 250 pixels let's just add an artboard all around it whatever that heightened width is you can definitely decide that yourself now the first thing that we need to do is we need to remove this Frame inside of this because if you have frames within frames in a Lottie animation right now it doesn't work so what we're going to do is we're going to remove it then we're going to go ahead and actually start grouping things so this is going to be our top bun so I'm going to say this is our top bun and I'm going to lock it so it's much easier to select the lower items then I'm going to group this I'm going to say this is going to be our ketchup I'm gonna just gonna move it right below the bun lock it as well then we have the lettuce so let's see if the lettuce is selected yes it's selected but I feel like this other thing is selected as well so I'm actually just going to select the cheese first so this is our cheese and let's just move it a bit on top uh and lock it and then we're gonna basically say this is our lettuce let's just drop it move it above the cheese and then we have this meat I'm gonna group it this is our meat let's go ahead and then we have the lower portion of the bun so I'm gonna say this is going to be our bun so here we have everything now we can obviously go ahead and unlock it I've basically just again and we can also just go ahead and group everything here into a bun so if you're using multiple frames or like multiple objects within a particular animation and a Lottie animation you can grip them but you cannot frame them so that's really important so now this is our frame first let's just go ahead and actually move it here actually let me just move this outside and I'm going to copy this and paste this here so what I'm going to do here is I want it to be at the bottom and I'm going to resize this group if I'm resizing the grip so as many of you know we don't use grips in figma right when we're designing UI and stuff but groups are really useful in this particular instance so this is going to be the default State let's say it's going to start from this and then it's going to bounce up so when it's bouncing up we basically just wanted to go somewhere here maybe and then we need to position things a bit accordingly so I'm going to say that this is going to be straight maybe this one is going to be slightly flipped actually let me see what that flipping should be maybe this should be five percent or sorry minus five percent this lettuce can be a bit much maybe minus eight percent then we have sorry I meant the cheese then we have something like this we're gonna say this is going to be -10 then we have something like this we're going to say this is going to be minus I don't know 12 and then we have this one we're going to say this is going to be minus 14 or something right or maybe it can even be 15 minus 15. okay so we have everything now we're just going to grab this button first of all and I'm going to move it a bit up actually on the right then we have this I'm going to move it here then we have this move it here and then here and maybe I'm going to move it here and a bit at the bottom and I'm going to reduce this rotation a bit so maybe we have an animation like this right pretty simple animation and that's all you need to do I'm just going to go ahead and I'm gonna first of all move it here I'm gonna add a smart animation and let's just preview it first because obviously we need to make sure that it looks good at least on our screen before we export it to Lottie so let's see how this looks if we click it we have something like this I think this looks pretty good and obviously we can tweak this animation any way we want now I'm just going to go ahead and move this last one here as well and I'm going to say after it reaches to the top it's going to come to the bottom as well and I think this should be it now I'm going to open the Lottie files plugin and wait for the plugin to load so again it says login via the browser so I'm going to log in and again it says I'm logged in so now hopefully this is going to go this is going to work then I'm going to select the flow that I have here and let's see this looks like this and I think this looks even better than the animation that I created honestly so the one thing that you see in this animation is your the burger is a bit disappearing at the bottom so we're just going to move it a bit upwards and maybe just a bit down like this slightly up I guess so we have this animation it looks pretty good I'm going to save it to the workspace to show you how this looks let's just go ahead and actually save it to my private animations save it and then once it's saved we can actually just go ahead and have a look at the link so here's the link we can just click on this to actually view it and here we basically have our animation and I think it looks good yep and if you want to move the burger a bit at the top we can definitely do that as well but this is how you create a simple bouncy animation in figma

Channel: AM Design

Views: 3,226

Keywords: figma for beginners, figma to lottie, lottie, lottiefies, ui, ux

Id: UPYbLo3XeAc

Length: 5min 53sec (353 seconds)

Published: Sun Jun 18 2023