The easiest way to animate your UI designs (Jitter Tutorial)

Motion design is essential for making your work stand out, either in your portfolio or when you share it online, because everyone just shares static screens of their designs and very few designers can actually make their designs move. Either you're an experienced designer or a complete beginner, introducing motion into your design is such a huge opportunity to differentiate yourself. So in this video, I'll show you the easy way to create sleek-looking and professional animations from your Figma designs using this simple motion design tool called Jitter. By the end of the video, you'll be able to create similar animations that look like they were created by a world-class Design Studio, import them into your website or portfolio, or share them online if you want to, and you have another powerful skill in your toolbox. So grab a link to Design File in the description and let's create some magic together. So we're going to start in Figma. We're going to start with like a really simple animation first of all. We just do like something really simple and then we're going to go to something that is a bit more complex. So the simple one will just help us understand how to move your design files from Figma and animate them in Jitter and how Jitter works generally. And therefore the complex one, we can try to do some more interesting stuff in Jitter. So this is like a very simple, um, poster or like some kind of stats for like my YouTube. Let's say I want to like animate this and make this interesting. You can animate anything that you can create in Figma. So this could be like a frame of like your UI design, or it could be your social media graphics, or it could even be like something that you want to introduce into or put into a slide, anything that you can make on Figma, you can animate in Jitter. To do the animation and to move this from Figma, I have to use the Jitter plugin. So if you go into the plugin to manage plugin, you can search for Jitter and the plugin will come up and you can install it. But I already have it installed here. So I'll just do this and then I'll copy it. So I've copied this. Now, next thing I'll do is to go to jitter.video. Once I go into jitter.video, It just comes up and then I can create like a new file. You need to probably sign in if you don't have an account with Jitter already and do all of those necessary onboarding things. Very, very simple thing to do. In a couple of seconds, you're going to get into this particular space that I'm in right now. By the way, you can grab the design files for the Figma in the description. I've added them in there. So I'm going to paste in my design here. The one I just had from Figma, I've pasted them in here and this is what Figma Jitter looks like. Like you can, as you can see, it is very similar to Figma in the sense that it has like that same canvas here, which I think is an infinite canvas. And then on the left side here, it has like your layers. And then on the right side here, you can switch between design, which is where you actually make changes to any of these things here. Like maybe you want to change color or add something new or animate, which is where you actually do your animation. When you switch to animate, a timeline comes up. Because for any animation tool, you need to have a timeline so that it shows how your animation moves from one second to the next or from one minute to the next like that. And then you can click your animations here. And this is— so this is where you do all your animation configurations and this is where you do all your design configuration. The same way Figma has design and prototype, Jitter has design and animate. Now, Jitter just launched this powerful AI tool that really helps you to animate things. Basically, if you have no idea of animation or you don't even have any time at all and you just want the tool to do it for you, all you need to do is come here and look at the sparkles here and click that sparkle. And then you choose some kind of preset that you need here, the kind of animation that you want, just like some kind of custom presets. If it's neutral, if it's playful or cinematic. So I'm just going to choose playful here, and I'm gonna click the brainstorm button. It then gets to start generating animations for me. All right, it's all done now, and as you can see, it's created an animation. Like, if I play it, you see what it kind of did. So what it did is that it picked each of the layers that I had in Figma and animated each one. So it animated the name, it animated how the things also come into the screen, and animated the YouTube logo as well. So let me use that to explain how this interface works. So if you click this now and you look at the timeline, this is the name itself, right? So it animated the name to just sort of show up in a nice animated manner for about 1 second and 21 or 36 microseconds. So at the top here, you have like the timeline. This animation time frame is about 1 minute 88 seconds. So if I wanted to increase the length of the animation time, for example, I just need to drag this to be 4 seconds. And let's say I want this, um, other components here, like this one here, to come in at a slower pace. All I just need to do is pick the one that I want. For example, the YouTube logo is that one at the top there. And then I can pick this one, this one, and this one. These 3 here, I can pick them and then I can drag them out. What that would do is it would just slowly coming to the screen. As you can see, it just slowly comes in like that. You can see that the watch time and subscribers comes in last. Actually, something interesting here— only 20% of people that are watching this actually are subscribed to the channel. The remaining 80% are not subscribed. So if you know you're one of these 80% that's not subscribed to the channel, come on, you know what to do— hit the subscribe button and also like this video. All right, so getting back on the video, You see what then happens now? It just introduces like the animation there. And you can literally do this for any of your animations. Already this looks like really nice and really cool the way the animation comes into the screen. That's for just the power of the AI tool. It's supposed to be like your first kickstart to animation. So you can then start editing things on this timeline to see how you actually want the animation to be. So now let's do something that is more interesting. Without the help of AI. AI is obviously great in helping you launch ideas quickly, and this is already even good for something that you just want to like quickly share. It's already like a great way to, to show something. It's already interesting. But if you want to even make it more interesting, let's try something else. Quick one. This Jitter tutorial is actually the most requested video on my channel, and it got the attention of the Jitter CEO. He literally came into the comments. So I reached out to him and I asked him, I'd love to make a tutorial for my subscribers about Jitter. What are you going to offer them? And I was like, sure, I can offer them a discount. So you can use my promo code FABS25 at checkout to get a 20% discount on a full year of the paid plan for Jitter. It's such an amazing tool and the paid plan has so much more features, so much more ways that you can export your designs after you're done with it. Back to the video. So we're going to go back into Figma and we're going to do something Slightly more complex, right? So what we want to do is we want to animate this 3 sequence here. The most important thing when you want to animate in Jitter or even any animation that you want to do is you need to have planned your animation ahead of time. You need to understand, okay, this is the story I want to tell with this animation. And these are like the frames that will come into the animation. If you're able to plan your animation ahead of time, then it's going to be easier for you to lay out things in Jitter. For example, I have a plan for these 3 frames here, right? I want an animation that tells a story that you can create a knowledge base from all of these, um, content platforms here. And once you create the knowledge base and you select the content platform that you want to create the knowledge base from, it now starts to load that knowledge base, right? So I want to tell a story with that kind of animation, which is why I've created these 3 frames. So what I'm going to do is I'm going to do the same thing that we did with the other one. Copy these 3 frames into Jitter. Copy these elements, I'll take them into Jitter, and we're going to do, um, a different animation this time, something that I believe should be a bit more interesting than the first one that we just did. Okay, so we have 4 seconds on the timeline here. I can expand— I can extend it if I want to, but I guess maybe 4 seconds might be enough. I don't know yet, but like I said I already told you the story I want to tell with this animation. I think it might be better for you to actually— to show you actually what that actually looks like. So on the side of this design here, you would see the exact thing that I'm trying to create so you can visualize it. And when we are working towards it, you can understand how we are progressing towards getting to that level of animation. All right. So let's start with this. The first thing that I want to do, like I said, very important to plan. The first thing that I want to do is that we want to animate this Create Knowledge Base button. Want it to fade in, right? So I'm going to come and I'm going to try to click this button. I've clicked this button already. The button is selected. So I'm going to come here and I'm going to select New Animation. Ignore this here, it's just saying that the layer was imported as an image because it has a dashed stroke. That's why it was imported as an image. So That's not important to us. It just converted what I'd already done in Figma into an image. So I'm going to click new animation here. Interesting thing about Jitter is that it has like preset animation, right? So the AI to AI helper is like the easiest way to create an animation. The next easiest way to create an animation is this preset here. Like you can already just choose any of the presets. For example, I can choose fade in here and you can see how it just fades in the animation. Or I can go back and change it to maybe slide in, for example, and it just slides in the animation. So all of these presets are very, very helpful to help you do your animation quickly. So in this particular case, what I would like for this is for it to actually fade in. So the fade in is good, so I'll choose fade in, right? And you know that when I selected it, it told me that what kind of animation do I want to create, right? So it said You know, like when I come back here and I click new animation, it's asking if it is like in, out, or custom. In is how do you want your animation to appear. Out is how do you want it to disappear. Like in is how do you want it to come into the scene, and then out is how do you want it to leave the scene. And then you also have custom, like if you want to now do some extra things that you maybe you want to have a particular way of showing stuff that is not available in the presets. We'll use custom, we'll use the presets as well, and you see how everything comes together nicely. So we've already created a fade-in animation for these. Like, as you can see, when I play it, it comes in like that. So now the next thing we're going to do is to create the fade-out animation, right? It already comes in, we've already created the fade-in animation, and then want to add a new animation. The new animation is going to be the out because we already made it to fade in. It also has to fade out. So what happens now is it fades in and then it fades out, right? The next part of the story is to bring in this carousel of logos into the screen. But because this is going to be like the main frame that we're using for all of our designs, we have to be copying things from these other frames into this place. So it's easy for us to use just one frame for the design. So first of all, I'm going to change the title of this particular frame, the name of this particular frame, to, um, Master Animation Frame to make it easier. So now it's called Master Animation Frame. I already have like an animation that creates null image and comes in and out. So the next thing I'm going to do now is while this is fading in and out maybe at 1:38 where it's almost fading in, I can then bring in my logos. So I just click copy here and then I would paste here, right? So I've pasted it in. The next thing I want to do is now I want to give this its own animation. Basically, how is this going to come into the scene? Again, I'll click new animation. This time around, I don't want to use fade in. I want to use something different, something like maybe mask to reveal it. So you can see it just reveals it in a really subtle, clean manner. Already it's already looking good. You have like that subtle animation that reveals it. Now after it's been revealed, as you can see here, you would notice that this entire frame is like longer than this screen. So it means that there are more rectangles that has logos under here that is not showing. So I want to show those logos by using like a move animation. So it comes into this, into the screen with a mask, but then it then moves off to show like something that is scrolling like a carousel. And the reason it's a carousel is because I literally just repeated the same logos all over. So if I go there, I'll go back there now and click it again, and I'll also create new animation. Now, if you look at all of this, for everything I have here, we have fade, we have scale, we have mask, we have blur. We don't have move. So all of this is just showing how the animation comes into the screen. It doesn't show anything around movement. So that's where we need custom animation. And for the custom animation, I can then introduce a move animation. Now, Jitter does something that I don't particularly like. But it's just their opinionated take. But I think the experience here should be when I select that move, it should just allow me make changes that I want to make. So what it does is that it shows you that, okay, you've selected move. This is what happens. So it's moving towards the right, but I don't want it to move towards the right. I want to move towards the top. So I'm going to select that. And instead of having like the move value that it has here, that is X, I will just say 0. So it comes back to the center. Now I'm going to define how I want the movement to be. I want it to scroll towards the top. So I'm going to come back to the beginning of the timeline here to 239 here, and then I'll set an initial value, right? My initial value can still be X for 0. Like if you remember like your graph, when something is going horizontally, that's on the X-axis. When it is going vertically, it's on the Y-axis. So we want to change stuff on the Y-axis. To change it on the the y-axis, we're going to go towards the top. So we want it to move up, and I think that will be like -100, for example. It needs to be more, so maybe like -500. Yeah, so more like -500, but I think it's too much, so I would say -400. Or yeah, -400 looks fine. So now what is going to happen is that if I play it again, it comes into the screen And then it moves. It comes into the screen first and then it moves. And I think what has happened now is that the way it comes into the screen, it has come into the screen from the top, which is not what is intended. It came into the screen like this and then moved down actually. Which is not what we want. What I wanted to do is to come into the screen and move to, to the top. So I'll come back here and change this to— I'll come back here and change this to 400 instead. No. So this comes here, comes into the screen, and then so it comes into the screen. It's at a 0 here. Oh, okay. So I— we selected the initial value. Actually, I see what the problem is, and this is why this is great. Um, the problem here is that the initial value should be 0. Right, the initial value should be 0, which is our starting point. Then where are we moving it to? That's where the mistake happened. Instead of putting it as -400 here, it should be 2. So it should be -400 here, so it goes up. So the initial value is where you want your animation to start from, and then where do you want it to move to? So now that that is done, you can see that when the animation plays now, it comes in and then it scrolls up. The next thing is to make it look like this YouTube button was selected as part of the animation, right? So I want to select this YouTube button. So now I'm going to double tap to make sure that I get into this YouTube layer and I want to select it. So I'm going to select another new animation, which means that it would create another animation on the timeline here. For each time I select a new animation, it creates a new animation on the timeline. Here. You can already see that from the story that I want to tell, 4 seconds might not be enough to tell that story. So I need to move this to maybe like 6 seconds or even 7 seconds so we have more time. So I'll go back again into the animation, come back to where we were in the story, and then I'll tap the YouTube, and then I'll add new animation. Again, all of this, um, Custom, all of these presets are not going to work for what we want to do because what we want to do is to make this look like a selected state. So I'll go and go into custom, right? And in custom, I'll pick a selected state. And what I want to pick is a stroke. So it looks like this has a stroke on it. So it has created a stroke animation, but it didn't show anything likely because I haven't added a stroke weight. So I'll add a stroke weight of like 2. And then, or maybe 3 so that the weight is thicker. And I can even add maybe another animation to make it bigger. Or yeah, so if I, if I tap it again and I go and I add new animation again, I can go to custom and then I can add a scale animation to it. So that's too big, I can scale it to like 105, right? So what then happens now is that you can see there's a stroke here and then there's a scale here. For every animation that I add, it always just adds like the animation here and it the name of the layer as well. So if you look at our story from the beginning again, if you play it all the way from the beginning, it comes in, it scrolls up, it selects YouTube, and then it didn't play this one because that's the next one. Now I don't want it to select YouTube and then scale. I wanted to do both of them at the same time. So I'm just going to move it so they are on the same line. So if I play it again, it goes Create the knowledge base, goes there, and then it scales. So that's where we are now. Now the next part we want to add into the animation is to see how we can introduce like this loader into the animation, right? So what I'm going to do again, like I've done with the, um, previous ones, is to bring in this, copy this, and then paste it into the master animation frame here, right? I don't think it copied, so I'll just come here, come into the loader frame here. I didn't copy the main loader frame here, I copied the one inside. This is the one I copied. So copy that and then come into the master frame here, and then I paste it. So now we have this on the screen. The next thing you want to do is, after all of this animation has been completed, you can see that nothing is showing anymore. And the reason why nothing is showing anymore is that I have brought in this frame that has a white background that is covering everything. So the first animation that I have to add into these is to make sure that this frame actually appears instead of just being there, so that it's not going to cover everything because there are animation that is playing under this right now that we can't see because of this white background. So the next thing I'll do is add a new animation to these to appear. And I can use like, like again, I don't have to use custom for that. I can sort of use like some kind of appear animation or maybe like a blur in or, um, What can I use? Maybe if— maybe a fade-in might be fine, or like a blur-in. So now I'm using like a blur— I don't like the blur-in. Let me see what it looks like. I don't like the blur-in, so I'll change that to, um, like a fade-in because I think that's— that feels like simpler. And then the fade-in happens like that. Um, I can reduce it a bit so that it happens like really quick because the only reason why I'm just introducing this fade-in is just to to bring in this particular one. The main thing I want to do is to animate this loading thing here. So the next thing you want to do is to animate this one to look like something that is loading, that actually just loads, um, completely. So again, that's going to be a new animation. You guessed right, all of this can't be done with presets because you can see that with presets it's just repeating everything that we already have. The shape is the same thing, and you can use fade in, slide in, scale, roll, Mask and Blur, but that's not what we need. We need something custom because we want this to like grow. And for the custom ones, we can't use Move, we can't use Scale, we can't use Rotate, um, because that's not what we need. What we need is actually Resize. So once we select Resize, now we can come back here, pick this, come back here and, um, say that the initial value of this Set what the initial value is going to be. We want the width to be maybe 0 at first. 0 is too small. First of all, we have to set the anchor point. The anchor point is going to determine how it, um, resizes. So if the anchor point is in the center, it's going to resize from the center like this. But if the anchor point is on the right, it's going to resize from the right. If it's on the left, it's going to resize from the left and come in. I don't know if you can see my hands. I don't know what I'm doing with my hands. But anyways, we'll set the anchor point to the left because that's what we need here. And then we set an initial value of maybe 3, just so it doesn't disappear. So you can see that it starts from 3 there. And then we now set a final value of like, um, let's try 100. 100 is not enough. Let's try 300. 300 is not enough. Let's try 350. 350 feels like it's just perfect. So when you look at this now, it just animates and comes into the screen like that. The also— the cool thing that we can do with this is, you know, let's see again. Let's, let's see what the animation looks like. You see that? The cool thing that we can do with it is that I just pressed spacebar to show the animation. So for each, um, for each one, I can always press spacebar to see what the animation looks like for each one. So the cool thing we can do again with this is that we can then add like some kind of smoothness to the animation. Currently, the, the way the animation comes is like a smooth animation. You can change that to different ones. So there's like natural, there's like slowing down, and there's one that like accelerates towards the end. There's elastic, there's overshoots, you know, there's different ones. I think I like the one that accelerates like towards the end. So we have that animation there, right? So if we go back to the beginning of our of our play, of our timeline from the very beginning, and we click the master animation frame to play everything, you can see how everything plays together, right? You know, it goes there, clicks that, and then slows that. And that's it. Now we can make things a bit more interesting by adjusting things, maybe like moving things on the timeline to maybe start one animation, because it's always interesting when animation looks like they're starting before the next one finishes. So for example, maybe before this one completes, comes down here, we can already start moving it by moving this towards the back a bit like this, right? So what that means is that while it is doing that, it's already ready to move. And we can also move this one towards the side so it's closer to it. And then we can move this and this one as well so it's closer. So everything just happens like almost like in sequence immediately, you know. And it does all of that. That means our time can, can be reduced, right? If I click that master animation, you can reduce our time. Uh, you can reduce the time here, or you can just reduce it here by choosing a duration of 6 seconds, or even 5 seconds might be okay. And what just happens is that once you play it like that And it just keeps going. It just loops over and over. That's where it finishes. And then if you want it to loop, it just keeps looping over and over like that. So we have like that animation. Keep watching to see how we can actually export this in different formats to— maybe you want to put it in a portfolio, or you want to post it on social media, or if there's any other way that you want to share your work. We can click this now and go to the export panel here. We click export, and there are different formats that you can use to export here. Because this account is a paid accounts, I'm not exactly sure which of the formats you won't be able to access if you don't have a paid account. I think you would be able to access some of them, but just that it might have like the Jitter watermark. So it's going to show that you did it in Jitter. But let's say that you want to share this on social media as a video. You can export it as 4K, you can export it as 1080p or 720. Let's say you want to share it as something that loops as a GIF. I can just come here, And export, and I can choose like the settings for the export, exporting, and I can ask it to just loop. So you can see it just plays like that and it just keeps looping over and over again. Once I click download button, it downloads and I can share it as a GIF anywhere. Maybe you want to put it in like a PowerPoint slide or anything to tell a really nice story. If you want to put it in your portfolio, maybe you want to put it on Framer or you want to put it on Figma. You come here, you go to export, and then you export it as a Lottie file. And when you export as a Lottie file and you download it, you're just going to import that Lottie into Figma, or you can import that Lottie into Framer. On Framer, you can just select one of the Lottie importers there, and you can start using your file right away. And you can start previewing your designs right away there. Motion design is such a game changer and having a tool that can help you do it in such a simple way like this is just mind-blowing. So I'd really love to see how you actually implement this in your own work. Take some of your existing designs that you already have in Figma and bring them into Jitter and try to see how you can animate them. If you want to see how I actually use Jitter, Framer, and AI tools like V0 in my own work, check out this video on my 30-minute workflow for designing faster and smarter with AI, and I'll see you there.