Figma Motion Masterclass: Create Professional UI Animations

1. Welcome to the Course and What You'll Build
: Hello, and welcome to Figma motion Master Class. If you've ever designed beautiful interfaces and wished you could bring them to life with smooth animations and interactions, then this class is for you. Hi. My name is Ahmed Al Hassan, and I'm a UIUX designer with more than five years of experience designing digital product, interactive interfaces, and design systems. And throughout my career, I've learned one very important thing, and it's that great interfaces aren't just visually appealing. They feel intuitive and interactive through thoughtful motion design. And that's exactly what I'm going to show you in this course. First, we'll begin by understanding what Figma motion actually is and how it can fit into a modern designing process or workflow, involving creating files, preparing layers, organizing them, and setting them up so that we can build our animations for them. From there, we'll begin by building our animations step by step, and that includes animations that relate to the size, position, opacity. It's going to relate to timing, easing. We'll also be discussing most common mistakes when it comes to motion design and how the slightest adjustments can play a role in dramatically improving these animations and making them feel more polished and natural. Finally, you'll learn how to export your files, your videos into different formats such as gifts, MP fours, web, and SVG. Most importantly, so you can go ahead and use them in your portfolio for presentations, for development or whatever it is you want to use it for. By the end of this course, you'll learn how to design professional looking UI animations that bring personality, clarity and polish to your designs. Let's get started. 2. What Is Figma Motion?: Hello, and welcome to the very first Figma motion class. So I'm just going to give you a brief idea of what figma motion is through this very quickly made motion, okay? So let's see how this motion design looks like, and that's it. It's just going to loop a little bit, but this is Figma motion. And what you've just seen, if you're at all familiar with Figma itself probably groundbreaking. This is an extremely new feature if you're listening to this anytime around 2026, and this is basically an add on. You probably already know this, but in case you don't Figma is a design program to be put very generally, most of the time it's used for UIUX design purposes. It's used for web design, for app design, for creating any type of screen, any type of wireframe prototype. But in the recent years, it's expanded to also include a lot of different things. Creating graphics graphic designs, posters, as well as creating presentations and now also used for social media and so much more. Now with this new update, you're able to create these graphics, and it's not just a gimmick. Okay? Let me tell you that. Figma motion is a brand new feature. It's still getting on its feet, I would say, it's still at an early stage, but it's going to be expanded, it's going to be worked on and extended to become a more comprehensive feature. So let's go back a little bit and discuss what it does. So in case you're not familiar with what motion design is, what we just saw here, it basically it gives you a timeline and it allows you to create different animations. You're not only working with visuals like these text elements, but these text elements themselves are able to be animated through time. This isn't something completely new, I must say. This is something that we've witnessed with other programs like Photoshop. It also has a timeline. It's not exactly a video editing software. It is more of a photo editing software. It's called Photoshop, but it has that feature built into it. That's something that Adobe does a lot. It builds a lot of features into their programs. You can do three D in almost all of their programs, you can do some three D modeling. You can do some animations and whatnot, there's a lot of depth. But so far, FIGma has been trying to keep it minimal, and so now them coming up with this feature really opened up a lot of doors. So in this course, we're going to talk about how we can leverage this new feature to create beautiful and smooth animations. These animations are things that we can export as videos. We can export them as gifts. There's a lot to it that we're going to discuss with time, and I'm going to teach you how you can integrate that into your just to let you know, this is completely brand new. So people are just starting to learn about this, and that's why you are absolutely getting an advantage. You're getting a head start when you're listening to this course, you're taking it all in, and with this, you're going to have an advantage, as I said, being a designer who knows about the most latest features and who can also integrate them into their UIO Hix design. Without further ado, let's get started. 3. How Motion Fits into the Design Workflow: Now, before we get started and before I show you the interface of this new feature, Figma Motion, I'd like to discuss how you can use this feature and how you can integrate it into your existing workflow. So I'm going to go ahead and assume that you are already avid user of Figma. Whether you use it for your graphic design, whether you use it for web design, app design, it doesn't really matter. But you are on there, you know how it goes, you know how it works. With that information, I would go ahead and assume that you know that when you are on Figma you're able to create different types of documents. So Figma Motion isn't a new type of document. That's honestly what I thought when they first came with the feature when they first announced it. I thought that it would have a completely different interface and it would be completely separate from the design tools that we've known. In case you don't know them, you have the design file here, just a normal design file. You have a FIG Jam file where you can Jam with your colleagues, you can brainstorm different ideas, free form without stressing out too much, and you can also create slides, presentations, basically the alternative for PowerPoint. You have Figma make, which is its own type of AI, which is also very interesting. Figma buzz, which is for social media, Figma site, I'm not going to bore you. Basically, the way that you're going to access this mainly as of now, is going to be through design. When you go ahead and open up a design document like I've already done here, you're naturally going to be in the design mode. I'm hoping that you're also familiar with this. But just in case you're not so earlier, it must have been a couple of years ago, they basically introduced these new modes. So instead of just having this set of tools, completely different mode with different tools. And you also had Dev mode. We've had this for a long time, to be honest. You have these features, these different modes, and now Figma Motion is just another one of these modes. And keep in mind this is still in its Beta form. So we're going to be seeing a lot of bugs, we're seeing a lot of problems. But now let's get back to it. This is how you access it, but how do you use it? Or what would you use it for? Now, we're going to see, as I said, within the course, I'm going to show you different examples or different creations of what we could do with it. But essentially, what we used to do before with components and component animations is now going to be much more simplified with this new creation. So instead of having to do a component and then using each component variant as a keyframes, we're going to be able to move things around more flexibly and there's different usages for it. For example, if you want to create a notification animation, you want it to show up as if someone is on a screen and they suddenly get a notification. You want to show that. Perhaps you want to share your prototype, not in the normal interactive way through Figma, but rather as a video. You want to show it exactly the way that you want in the flow that you want to go with. This something that I've had personally that I felt the need to use personally with my own clients is that sometimes they're not able to navigate it. Older clients, people who are not so technical, they can't really use Figma. They don't know how to use it. They get overwhelmed. Simply walking them through the use case or the user flow by making it a video is one way to go about it. But other than that, creating these different and unique animations, it wasn't impossible. We used to all do but now it's just a lot easier to do this. That's one way you can do it. You can do notifications. You can do different animations in the background as well as someone is going through a prototype. You could do a lot of different things. You can even do somewhat like a video as if it's a real video, but it's actually just an animation you built on Figma. There's a lot of different examples, but the good news is you don't have to go far ahead, you have to go out of your way to integrate it into your workflow because it is already here. It is available it's on your computer, it's on your Figma file. You don't need to create another file for it. You just need to go to this mode. So here's an example that I'd like to show you of something that I made as soon as I saw the announcement about this feature as soon as it was released, and I'm sorry about it looping so much, but it's basically a very simple idea. It looks simple, it looks clean and smooth, and this is something that would have been so hard to do with normal Figma. Right now, with this more advanced feature, we're able to create these smooth looking animations without having to make a mess of our design documents. There's a lot going on here. We have animation of position, of size, of scale, as well as opacity and whatnot. And this is what's cool about it. You can do a lot of complex stuff without having to worry about the technicality of it. You can just treat it like a normal video editing program. As I said, to wrap this up, you don't need to go out of your way to integrate this feature into your workflow. It's already there. It's right where you want it to be, where you know how to find it, and it's not that complicated. But you still have to learn it, and this is exactly why you're here watching this course. Let's get started. 4. Navigating the Interface and Setting Up the Project File
: All right. Welcome back. In this lesson, we're going to familiarize ourselves with the interface and go about setting a project file. Now, as I mentioned in the previous lessons, this is not something you're going to go out of your way for, but rather it's something already where you know where to find. What does that mean? You're going to go ahead, open up Figma and go to Design. Just click on Design, and you're going to open a normal classic design project file. So just like that, we have a free draft. You don't need a pro subscription or anything of the like to access this feature at least for now, okay? So you're already able to access it, but I'm sure they're going to add some things that are going to be locked for pro memberships, but that's another topic for another day. So now that you're here, now you might tell me where is Figma Motion? It's right here. When you go to your toolbar down there, you're going to go and navigate. You're not going to go to draw, not to Dev mode, you're going to go to Figma Motion. As I said before, it's in Beta still, so it's still getting there. There's very few ways you can confuse yourself about this, to be honest. Before we get started, you have to know that you need something to work on. You need a file, you need an item, you need a layer to get started. I'm going to go ahead and I'm going to add an iPhone 16 screen, just like that, you see things started working just to show you the difference. When I went back and I went ahead, it was empty here and now it became filled, which tells you, all right, there's something going on, something is starting up. Let's go ahead and create an item. It could be a text, it could be an object. I'm just going to create a square right over here and I'm going to give it a color. Red. And then getting the text tool, I'm going to write Hello world. All right. So now that we've got this, we're going to center it. All right. Perfect. Now we've got these items, but they're not showing up here, right? That's such a shame. Well, the thing is, in order to make things easier, they don't show everything up in here. This is only for things that actually have motion, have animation. This area is only reserved for objects layers that already have animations within them. Otherwise, you'll see the layers right over here in this panel just like you're used. So, in order to make anything show up here, we have to go to this animations area panel section, whatever you want to call it, which is new, and you're going to add an animation. And of course, you're only able to see this when you're Figma Motion. So please make sure you're in the motion mode. So now that we added this, and I'm not going to get into the animation just yet, but it already gave us a position animation, okay? Kind of like a slide animation. And now suddenly we have some item. Let's familiarize ourselves with this dashboard with this interface, okay? We have an item here which says, T, it's an icon for text, and we have Hello World. So we can remove this animation or remove the text, all of it altogether, and you can see it says position. So this is telling you the animations that this text is having. Now, what if we decide to add another type of animation? So now it went ahead and added a scale animation. So it made it go smaller. Now you can see under Hello World, we have two different animations put in there. We can close them up or we can open it up and show it. Here you have position, you have scale, and each one has its own, I'm not sure what you'd call this exactly, but it has its own block, let's say, which you can play around with. There's the general block. This area, this object, it moves everything with it. If we make the animations very short, both position and scale, it's going to be changed. But if you change one of these the position, it's not going to change the others. This way, the position is going to change, and then the size is still going to change. The scale animation is going to happen with the same time, and vice versa. We can make it go smaller and continue to change location. That's something cool about it. You don't have a very complex interface. It's somewhat simplified and once you're done with all of these, multiple animations, you can just remove it, and then you just see this one slot. Here we have our timeline right here, this whole thing that we were playing around with, and it shows you the time. Here you have, I believe, 200 milliseconds, 400 milliseconds, 600, 800, and 1,000. Basically, you can also zoom out using this feature here, timeline Zoom, you can just make it smaller and there you go. You can make it smaller or bigger with this feature, or you can just hold Control and scroll up or down, and then it will do that for you. If you're an editor already, you probably know your way around this, it's not that different. We also have this collapse timeline option, which is going to remove all of this stuff right under there in the timeline. So if you just want to focus on the frame here and you don't have a lot of space, then do that. But if you want to go into the details, then you want to see everything around. Then we have the play button. Right here. Instead of that, you can also just press space. That's what I like to do. Right here, we have some options, turn on auto keyframes. We're going to talk about that a bit later. And here we have the current time. Very simply explain. It's the time where you're at, if you're at a second or 2 seconds. And here, of course, you have your maximum time, the duration of the whole animation that you have. Right now it's set at 2000. We can make it 3,000 and the unit is milliseconds. So you can either do that or you can expand it from here. Okay? Now, that's going to make it run. Even if there's no animation, it's going to run until the end. All right. Then of course, we have the loop option. It's turned on by default, but you can remove it, and once you remove it, it's not going to loop. Once it comes to an end, it's just going to stop. But usually, when you're working, you want to keep seeing your animations looping again and again, you can make sure that it looks very good. But we also have a third option, which is called Ping Pong. This is a very interesting option, but it's basically takes it till the end and takes it back, and so on and so forth. It's like playing ping pong, which is very interesting. I've never seen this on any other program, to be honest. I'm not sure if it's just for fun or if it actually serves a purpose, but I can imagine it can help somehow. You have the collapse layers option. If you have multiple layers and they all open and they all have multiple animations, then it would be very useful if you can collapse all the layers in. This is going to be our friend. For the rest of the course, our timeline. That's what we're going to call this whole panel. But remember that this new animation section is also very relevant because that is where we're going to add our animation. Just to further illustrate this, when we add an animation for this rectangle, we're going to see here the two objects. As you can see, you can collapse them, you can open them up and show each animation under it, or we have them both open, we can collapse all layers, and we can make sure to align them in the way that we want and the way that we find suitable. Now, there's a lot to learn and explore about this tool, but to be honest, instead of going ahead and telling you about everything and overwhelming you, I'd like you to take this journey with me and learn as we do because that is the absolute best way of learning. In the next lessons we'll be talking more about details and we'll be doing a lot more and learning more through it. Thank you very much for listening and I'll see you in the next lesson. 5. Designing the Interface Components
: Welcome back. In this lesson, we will be starting and taking the first step in creating these animations. But before we start and create animations, we have to first set up our layers, set up our design and UI. And of course, we have to build our in a very clean and smooth way so that when we want to create an animation, it would work smoothly without any complications. So today, we're going to create a toast notification. It might have other names, but it's a banner and it's going to show you the notification. I've already showed you an example of how that looks like, okay? So the information that we need to convey with this is there's going to be a picture, there's going to be a name and some information, maybe a message, what kind of notification that is I will be deciding along the way. Let's go ahead and start creating it. We're going to start by creating a frame which I've already created here. We're going to give it a fill for now and then we're going to give it some round corners. Now, I'm not sticking to any specific style or any specific type of design like the design of Apple or Android or anything of the like. I'm going to create something of our own. So keep that in mind. All right. So now we have the rounded corners, and then what we're going to do is we're going to place a picture. So I'm going to make it also a frame and I'm holding shift. I'm going to give it a fill, a reddish one just for now. I'm also going to give it rounded corners, and I'm going to try to place it perfectly, right? There we have it. And then going to get a text element and then going to write some text. So the text should be a little bit smaller. So let's make 16 maybe. 14, and then we'll type something here. So this thing could be, I mean, what type of notification are we actually getting? Let's say it's a message from someone, and so this person is called JACOB and they're sending us a message. Okay? So one thing to also know is what type of app is this being sent from? So what we could do is we could write that down as well. So we could write down just the name which is Wettap for example. And then we have a message from Jacob. We're going to switch the color, make it grayish, and then we're going to start typing the content of the message. So since it's not enough place, we're just going to put some dots. Here we have this. Let's go ahead and try to test it and try to see how it looks like on an actual phone. I'm going to put a device as 16, iPhone 16, there we go there we have it. I can see we can also extend it to the right and left as well. That wouldn't be an issue. Let's go ahead and extend it. So we can write more. So then we have some completion I'm dot, dot, dot. So here we have a nice little structure. We could play around with it, make it align a little bit better, and see how it could look like. We could also make other elements bigger like this one. But I'm actually totally fine with it looking like this. All right. And then what we'd like to do is maybe add an image of Jacob here. So any type of image would do any type of person. So here we have an image, so I'm just going to take it. I'm going to copy it and paste it here. This is Jacob, he's sending it from his phone. He's sending us a message or something. He has this very artistic nice little picture here, can look a little spooky, but that's right. Then we're going one step further is to maybe even show who this message or what platform this is being sent from. We already said WhatsApp but maybe we could add the icon of WhatsApp. We could also enlarge this photo a little bit. It's totally up to us. But what you'd like to do is make sure that the distance from up and down are the same, right? All right? So here we have the logo as an image as a PNG. So I'm going to take it. I'm cropping it a little bit. There we go. And I'm going to bring it here to the frame. To make it smaller. I'm going to put it in this frame, but I'm going to remove the clip content. This would be a nice little arrangement where we put it up here, and then you can see it says WhatsApp right next to it. It's nice. Either that or we could take this whole thing, take it out here and just write WhatsAp like that. Maybe make the logo a little smaller. We could also take this completely in this direction to the right. That is also one way we could do it. I think this way saves us a lot more space because we don't have to stack things in one way and then this area would be completely empty. Right now, we're playing around with the layout, seeing what works, what doesn't either way, we need to align these things. I'm going to choose these and put them in an auto layout together, and then I'm going to put them in an auto layout with this one so that they're aligned on the same level. I'm going to put them then in an autolayout with this text element, make sure that they're not random values, but they could be on the four, eight, 60 and scale, and so on. Here you have these on an auto, so the distance here is auto between them, and these have two or it could be four. It's up to us. But I'm going to make it two, two is okay. Then in the end, we have this whole layout. We have this whole frame. We can also make it an auto layout and then we have the picture. We have this together, and we just need to align it properly. So I'm going to make it align to the left and give it eight, maybe, and there we go. And just like that, we have a nice little notification. But I'm not super duper happy with everything going on here. Let me make the spacing a little different. And what you can do is, I mean, you can make the whole thing a little smaller, and what we can do, let's play around with it. So in terms of spacing up and down, I'm going to make it four and four. No 44, four and four. Okay? And then for this one, I'm going to make it lock the aspect ratio, make it fill the container. And then we can basically decide how big we want this thing to be and the image is going to resize with it. So now I'd like to go a step further and go deeper into the design. So I'd like to decrease the opacity here, get a nice little transparent effect here. So this is really nice, and this is something that often Apple does, and a lot of UIs nowadays, a lot of softwares do is they want to make sure that you can see some of the background, but we can't make it fully transparent, just like that, you know? And then the text has some issues in terms of readability. So we're going to build we're going to add not a shader, but rather a glass effect or background blur effect. We can go ahead and try a glass effect here, even though this might cause issues for us when it comes to making this animation and whatnot. Right now, this looks glassy a little bit. Let's test it out. So as you can see, this is pretty glassy. Which is really nice. And it's still readable to an extent. I would say this text here either needs to be black or fully white, but making it fully white when the other text is black also makes no sense. So I'm going to make it black, but I'm going to give it 50 or 75%, which is a little bit better than what we had, not perfect, but better. All right, so now we have it. You can also play around, add some shadows, drop shadow like that. Make it 15. So we're just going to pretend this is a notification that someone got. And let's say it's here in the middle and we're write the clock. So this is just some background stuff, and then we have our notification here. So now that we have this built, now we can kind of play around with it and make sure that it's suitable for us to begin animating it. Now we have something to work with, right? 6. Organizing Layers for Animation
: Alright, welcome back. So now that we have these layers, we created these layers, these different design elements, and we have a nice little notification toast toast notification setup going on. It works. It looks good. But there is one thing. When we come to animate this, we might have trouble with one or two things. And the issue lies in the layout and the organization of these layers, I would say. To illustrate this better, I have two versions here. One of them has auto layouts, while the other one has no auto layouts. It's basically left out there just as a normal frame with no auto layout. I hope you're familiar with it. If you're not Autolayouts allows us to set up certain spacings like margin, padding, and to set up things and organize them in a certain way that makes it more responsive and more automatic. So to illustrate what I mean, if we take a look at both of these, they look identical. They are exactly the same, or almost exactly. But there is one difference. One of them has auto layout and one of them has auto layout. So we can test this by changing the size. And as you can see with this one, when you change the size, things are all over the place. They're not properly set up. Now, of course, we can set this up nicely and neatly, but it can be a little hard to do, right? As you can see, the text is wrapping in a certain way, and there's a lot that could go wrong. If you try this on your own, it might be even worse. While we do this with this one, it looks a little more organized, right? We can even set it up to be a little different. It could even look better if we do it like this, for example, it looks very smooth and it has a smooth animation. While this one it needs some work. Especially, we're working here with frames. If you're working with groups or if you didn't even have any type of group, you're working with objects, layers, and whatnot, this would have been so much worse. The key here is creating and organizing your layers properly before you get started so you can have a smooth and nice animation that isn't making you walk and run all around just to make sure it's perfect. Okay? So the way to do this is, as I said, to create auto layouts. So how do you do you're going to put elements that are close together like this. You can hold the objects you want to do right click and then go to frame selection or add Autoayout directly. You're going to add an Autolayout directly, and then you're going to add an autolayout here. And then you're going to make this whole thing auto layout by clicking here. And then it's going to look a little weird. So you're going to adjust it. You're going to write eight, for example, you're going to add a little more spacing on the right, and you can make this fill if you want. It's up to you. It's still looking a little problematic because we added the fill here, we can just make it hug. And then, as you can see, it looks you know, holding shift and resizing it looks a lot nicer. And that basically makes the whole process a lot easier to do when it comes to animations. You have your whole layers organized. You don't need to worry about them. And now let's get started with animate. 7. Creating Your First Animation: Welcome back. In this lesson, we're going to create our very first animation, which I have to tell you, I have to spoil it for you. It's not all that exciting. It's not the hardest thing to do in the world. And especially if you're familiar with video editing programs, this is going to be a walk in the park. Let's get started. How do we do it? Now, there are a lot of different animations and different sources that we're going to explore. But first, let's learn our way around. Now, we already know in order to get started with animating. If you're searching here for anything about animations, you're not going to find it. The first step you're going to do is you're going to go to the Motion or the motion mode. Once you're in it, now you're in the animating workflow or workspace. So you're here now. You've got things figured out. You're going to go head to the right panel and you're going to go to the animations area here, the section. So you have two options. You can go to animations. So this offers you a set of animations that have a lot of different options. If you're familiar with PowerPoint or any type of presentation creating software, it also has a similar tab here with animations. Or you can go ahead and just click on the Plus. Now, the plus, let's rewind. You click on the Plus. It's going to give you immediately an animation. It's probably going to be a position animation and it's a regular one. That is the simplest way to create an animation. But as I said, as I mentioned, you can alternatively do this by going here and choosing an animation. Now, you can decide from the basic ones. You can say, Hey, I want to do one related to position to scale, to rotation, size, opacity. There's burstgnit these are presets. That's what we call them, and they're basically animations that are already set up for they have different types of movement, different types of speeds and whatnot. That is one very important thing for you to understand. Animation isn't just about saying move from point A to point B. We could treat it that way, but at that point, we wouldn't be good motion designers. At this point, this is what you should be aspiring for. You should try to get some good motion design going on. The way to do this is to understand that good animations are little more than just movements, just going from point A to point B. But it's about how do you get from point A to you exhilarate in the beginning? Do you ease at the end? Do you slow down at the end? Or maybe you do it all backwards. You speed up very fast in the beginning and then you slow down in the middle, you enjoy the moment, and then you speed up at the end. You end it with a bang. There's many ways to do this. Maybe you start slow and you go fast and then slow and then fast and then slow. There's a lot of different ways to go about this, but the most important thing is there should be an idea sometimes there's even a bounce. That's something that you're going to learn about when it comes to animations, there's a bounce, right? It's very common that when the animation goes, let's say, this little notification comes and then it goes to the right and then goes back, it's bouncing like a ball. It hits and comes back a little bit. All of these factors give an impression. If you're creating an app that has cute little characters and they have nice little motion. It makes sense to make it bouncy. Bouncing is fun. But on the other hand, creating an animation that should feel premium and elegant should be more slow paced. This is exactly what we're going to learn about in the next lesson. Right now, we've created our first animation. The next lesson, we're going to explore the different types of animations. 8. Animating Position, Scale & Opacity: O Welcome back. So first things first, we learned how to create an animation in the last lesson, but we didn't get to test it, did we? So let's go ahead and try to test it. I'm just going to click on plus. I'm going to get the first animation, and I'm not going to change anything about it, okay? So the way to test it, as we've learned before, is to walk this little timing thing, and you're just going to click on space, and then you're going to preview how it looks like, and it's just going to be in a loop. So as you can see, it's motion. It's not special. It's not crazy. But obviously, it's not good. It's just going from here. So this is one type of motion, and when we go into the details of it, when you click on it, you have a lot of options coming down. Don't be overwhelmed. It's not that complicated. The type of motion is picked out for us as slide in. That means it's an entrance type of animation. The object is entering the field of vision. It could also be slide out. So it would start at where it is and then it would leave to the left. Okay? So that's one thing we can set up. It can also be custom. This could be going up down, right, left, whatever we want. But let's go back to the slide because this is what we're going for. You can choose where you want it to slide in from. Is it left, from right, from top left? But let's stick with left. The notification is coming from the left to the right. Here, where it gets interesting, we can also decide the distance. If you hover here with a mouse, you can also just drag it and you can increase the distance. So let's do a little more until it's out of vision. And as you can see, now, it works a lot better. So it's out of vision, and then it comes into frame. All right, so we have a few more options that we're going to explore a bit later. For now, this is enough for us. This is a nice little position animation. What else do we have? Once we start clicking on Plus, we start getting different types of animations like scale, right? So the scale is going to increase or decrease, let's see. So when we're previewing it, it seems to be getting smaller. So you can click on it and see what it says here. So it's saying it scales in, right? So it's coming into frame and then it scales. But it seems to be getting smaller. So let's test it out and make it 200%. So yeah, that means it was 200%. It comes into frame, and then it becomes 100%. We can also change it and scale scale out. So then it goes from 100% and it scales out to 200%. So we have pretty much the same logic going around with the type and amount. And this is really nice because it makes sense. You can also just click on these four circles and you can choose which one you want. You can make it rotate. Let's see how that looks like. Must be fun. Perfect. So all of these, they can look a little silly right now, but they shouldn't be used like this. You should be thinking about them more intentionally. And for each different type of animation or for each type of scene type of use case, you should have a different animation. So you should understand that for this use case, rotation doesn't really work, but for another one, it might. We also have also have sides. So what size does it switches things around. Size works. You might say, Hey, scale and size are the same thing. But when it comes to Figma, it's not. What it does here is it just stretches out the frame itself, right? So I just brings it and stretches it out. That's what it does. What the scale does is it stretches it out in a different way. It's as if you clicked K. Let's go back to the normal editor and you click K. What K does, it allows you to scale. I opens up a tool that allows you to scale it while maintaining the scale of everything. Everything would be resized in the same exact way, but just a lot bigger. But if we do it with the normal one, if you press V, you would get the normal mouse and this way, you can scale it picture might get bigger, but the text wouldn't and it's placed awkwardly. That's one difference. So now getting back to the animations, there's a lot more to explore. There's opacity. And as I mentioned, there's all these presets that we have here. Let's go ahead and try one of them. I'm going to hide the position where for now and let's do burst. As you can see, just by adding burst, it went ahead and added multiple animations. It added four to be exact, and they are all preset with different types of speeds and things and graphs that can be a little confusing. I added opacity, rotation, scale and position. As you can see, they're all time differently as well. And it looks just like that. What's nice about these is it saves you a lot of time if you don't have time on your hands and just want something quick and something already made. But if you want to do something with your own hands, then I would recommend learning further, and that's exactly what we're going to do in the next lessons. Thank you for watching, and I'll see you in the next lesson. 9. Timing, Duration & Easing: All right, so, welcome back. So now that we've set an animation, right? We've learned how to create an animation. We've learned how to use one of the presets or to play around with different types of animations and to also use and navigate this timeline and understand how it works, right? We've done all of that, but now it's time to talk about the details. So when you go on position, right, we've talked about how there are multiple factors or multiple variables that we can play around with, if you may. Some of these variables are the type, so the type of movement, whether it's a slide in or a slide out or custom, then we have the direction. We talked about this as well as the distance. What we haven't talked about is the delay, duration, and easing. Okay? And these are not that easy to talk about. Now, yeah, sure, delay is simple. It just means how much This type of animation is going to be delayed. So we can switch this up. It's not that difficult. As you can see, we can, you know, slide it up and you can see that the animation is being delayed, right? Just as simple as, you know, as simple as it sounds like, it just gets delayed, right? It's nothing more, nothing less. But we have something, you know, we have something more. So when we choose this element again and we go to the animation, there's also duration, which also sounds very simple, right? So you have 500 milliseconds here. Then we can double that and say thousand and then the animation is simply going to be slower. No surprise there. That's also very simple. Where it can get a little complicated or challenging is the easing. Now, thankfully, with other programs, it's more difficult. With Figma, it made or it's simplified for the users with these presets. Again, you have these different presets. Now, I think on default, it's put as ease out, but there's a lot of different types. There's the linear type, which is the normal type of movement. It's a movement that is linear. It doesn't change, it doesn't accelerate, it doesn't decelerate. It's just constant, right? So you have if there's a car that's going 10 miles per hour, 10 kilometers/hour, it just keeps on driving the exact same speed, right? Think of it as a car. When you say ease out, what happens is this car starts at the same speed, stays at 10 kilometers, and then at the end, it starts slowing down, just like a normal car would, right? You don't just press on the brakes suddenly, but rather you start to slow down to decelerate, right? So that's exactly what happens. It goes and then it starts easing out. So sorry, that was ease in. We have ease out. There we go. So as you can see, it's kind of like it came in and started parking slowed down just like that. Okay? We have different types. There's ease in and ease out. So ease in is at the beginning. So when you're beginning, it starts, the car starts pulling in. It starts slowly and then exhilarates, gets faster. And in this case, it's not easing out, but we can do both. So let's see how it looks like. So this looks like a normal car. It starts slow and then picks up speed, and then it ends it also slowly. This is how it normally works. Now, we have a lot of different options where we introduce something called the bounds. So ease out back, for example. So here you have a little bit of a balance. So it goes in and then goes a little too far to the right and then it goes back. It's a kind of balance, and that's exactly what is meant to be, you know, what's supposed to be happening. You also have a lot of different presets. So go ahead, you know, try to explore them, try to understand what's best. And what's cool about this is that you have these custom options. So you can say, let's do custom, and then you can customize it. Now, I wouldn't advise you to go ahead and start playing with this just yet if you're not familiar because this can be a little complicated. But if you will, if you want to actually go and try it out, let me explain it very quickly. Okay, so you have two different options. You have a curve and you have a spring. The spring is more related to having bounces and whatnot. Okay? So let's test it out with the spring. You have this very quick bounce. You can do the speed, you can do a lot of different things. But basically, you set up the same animation in different ways. So this one, it's also having a bounce, but it's a different type of bounce. Let's see how it looks with the spring. So it looks like a spring like an actual spring springing back. So you have different types of motion. The way that you do this, you have this line. Once it crosses this line, it becomes a bounce. So if we keep it under this line, there's a very, very slight bounce, as you can see, very slight and it's because we can't see it. So if we try to decrease it, this is as much as we can decrease it. So it has zero. Almost has no bounds, okay? So this is kind of like a spring. As I said, you have to think about it with the bounce. The bounce is within it, and you can create infinite bounces like this, for example, which is crazy, but you can see it graph here. So it is like a spring. So you can decide how many bounces it's going to have right and left by increasing this amount. And once you have one, that's insane. Now, let's go back to the curve a little bit. Curve is when it gets more fancy. You can have a bounce still, but it gets a little fancier, okay? So now, as you can see, we have a bounce. It all is about these two like this curve, right? And you have two options here, two curves. And they decide a lot of things, as you can see. As I said, the curve goes above the line, it's going to be a bounce. So let's try to put this down. Put this down like that, for example, there we go. So now we're not supposed to have any bounds, but as you can see, it's more like linear, and it is because it looks like a straight line, right? So how about we make ease in a little bit, okay? So easing in means, this is the speed it's going to pick up. So it can pick up speed slowly. This is how we make it easing in, okay? Like this and then it picks up speed. So let's see. There we go. And then it picked up speed very quickly. Now, we can make it the opposite. We can make it rush in by doing the opposite. See that? Then the same thing here, if we want it to ease out, we have to put it this way. So if we want it to ease out, let's see how it looks like. So as you can see, it pulled up very quickly. It did not ease in, but it eased out a lot. Now let's do the opposite. Now what's going to happen is it's going to pull in very quickly and then slow down in the middle and then it's going to pick up speed till the end. So as you can see, very fast and then slow and then fast. And then ended the animation very quickly. I mean, if we set it up so that it doesn't loop, that's how it looks like. But it's a little too fast here. Like let's do it like this. That's it. So we can do the opposite. We can make it if we make it like this and this one like that. Then we have something more like an ease in. So as you can see, it's not that steep and in the middle, it gets really steep, really fast and then slows down. Okay. So you see. And just like that, it went ahead. You know, I eased in and it eased. Put all of that aside and ask yourself, what is this for? Why am I doing this? What's the purpose of this? And let me tell you the answer. The answer basically lies in the effect that you're trying to give, the impression. Are you trying to give an elegant, gentle impression? Then I would recommend you to have these ease out animations because you want to show that things are elegant, things are hlarating. There's a lot of innovation and speed and action, but there's also slowing down. You know, and that brings sort of elegance to whatever brand, whatever motion you're trying to put out there. And then when you go with spring, spring is more of a fun, cartoonish feel about it. It's not really that bad, but it kind of tells you, Hey, we're all having fun here. It doesn't have to be that smooth and nice and gentle, but rather, it can be bouncy. It can be fun. Think of it like animation characters, cartoons they're always jumping and bouncing all over, and that's exactly what you're doing. You have bouncy animations. I find it really cool if it's set up the right way for the right client or for the right, you know, identity. So you kind of had to ask yourself, what type of brand or what type of website or app are you building? Should the animations look funny, cartoonish, and friendly or should they be more gentle and elegant and, you know, high quality. So you have to kind of think about that. And of course, each person has their own different style. Some people do ease in, ease out, some people do just ease out. So people do a lot of different things. So kind of think about making your own style or making a specific style for the brand that you're working on. And if there's already stop motions and videos and animations related to the brand, then maybe you can try to find the style from there and just continue the same style. So very simply explain this is how you can change the motion at the duration, the easing, the delay of your animations to give a certain impression and effect. Thank you very much for listening, and I'll see you in the next lesson. 10. Sequencing Multiple Elements: So far, we have this little animation that we built here. And we talked previously about easing settings and whatnot. We're going to try not to do much about this in this lesson. In this lesson, we're going to talk more about multiple animations within one scene, which is something that you're going to be doing and you should want to do because one animation is great. Two animations, even better. Ten animations. Or maybe too much. If you do it the right way, then you can multiply these animations. You can put them on top of each other and layer them in a way that looks smooth and that works and feels professional. So this is exactly what we're doing. And if you think about any type of OS, any type of operating system that you work with, you'll realize that they often have these layered animations. It's not just a notification that comes around and like ding, but rather it's more layered. There's multiple things happening in the background. Okay. So I'm going to try to demonstrate and do this with you together step by step. So now we have this position animation. It looks great. Let's go ahead and add another animation. So I'm just going to click on the Plus button, and it's going to give me a scale animation, which is not really it doesn't look like what I want to be doing. So scale in by 120%. Instead of scale, I'm going to go ahead and see what size can do for me. Okay? So now we're working with size, and you can see it's resize in. So it's having the normal size and then getting bigger. We want to do the opposite. So we're going to do resize out. So we're going to have a different size. It's going to size in to what we have right now. I know that's a little hard to understand, and I feel like maybe they should rephrase this somehow. Don't think about it too much right now. Now that we have this, instead of resize out, I'm going to do custom. Because when you do custom, it allows you to choose if you want to do both X and Y or if you want to do width and height, it gives you these options. All right, what we're going to do is we're going to choose access and we're going to go to X. That's going to only change the width for us, which is what we want. Then we're going to come here and we're going to say the width before will be ten, and the end is going to be 100. Now let's see how it looks like. Not exactly what we want. So let's go put it the beginning or here in the middle. And I'm going to resize the width in the beginning to be negative, okay? And that's because I think zero is maybe the size that you start at. And so you need to make it much less than zero, okay? So now we come here. Oops, here's the sizing animation. That's why it wasn't showing much. So we're going to bring the size animation. We're going to put it here. We're going to extend it. Now we can check it out. So as you can see, it's opening up. It's going way beyond what we want. So we're going to make the width zero. So as I mentioned, zero is at the point where that's the width already. So that's where it was. So it's going to go from negative 244 to zero. Okay? Now, I'm going to move the animation a little bit because I want it to start a little late, and I'm going to extend here the total duration of this whole animation. So I want to see how it extends from this one circle. So I'm going to bring it right over here maybe or here. Okay. And I'm going to make it even smaller in the beginning. Okay. I zoom in a little bit. So I'm going to make it negative three, one, eight. I think this is good. Not perfect, but good. It's going to start here and then it's going to open up. But as you can see, there's a bit of weirdness because arriving here and stopping here and then it's opening up. What we'd rather want to happen is that it arrives to the middle, okay? And then it opens up. So how can we get that to happen? That is a very good question. It's not easy to do, but we're going to try to work it out. So how I imagine it to be done is, by the time this arrives here, it should be arriving in the middle. So let's do exactly that, okay? So this frame should be in the middle. So I'm going to click on the frame. I'm going to go to the editor. We're going to come here. And we're going to try to center it. Okay? We're going to put it here in the middle, but not at this moment, rather this moment. Okay? I see something's going wrong. Go to adjust this a little bit. So I'm going to bring this going to choose this and bring in the middle, okay? So now here's what's going to happen. It's going to come in the middle and then it's going to open up. And by the time right now, when the animation here comes to an end here and it starts opening up, I'm going to make this. Once it ends, the size animation starts. And once it starts opening up, it's going to like there's going to be an animation where it's going to change the position. So how do we do that? Simple, we're just going to go click and click on position here. So we're going to add another position one. And we're going to make it custom, because we just want to do a custom animation. So it's going to start from zero and then it's just going to go to the left, so negative 92. So let's see if that's going to work out. We're going to layer here till here. Let's see now. As you can see, that's exactly what we want, but not the right number. So let's try to make it work. And this is just approximating. There we go. So let's see. All right. That is really nice stuff. Now, it's still not perfect, and there's still some things to do. But I think we're already making a lot of progress. So what we can still do, we can, you know, switch the animations so that we can have a nice ease out. You can do it, you know, more custom and you can increase the easing out if you'd like. And the same thing with the size, so you can make it customized. And if you want, you can also give it a bit of a bounce. Let's see how it looks like. It's not the best mount, to be honest. So let's make it just normal. I would say it's a little too slow, so I'm going to make it faster. What's even cooler is, what if we make it overlap with this one? That's exactly where you might start winning. So it's not perfect, but it becomes more layered. It's happening at the same time. It's not one by one, but rather everything happening all at once. But right now when we do something like this, it's not working very well. Let's take it back and let's see what we can do with it. We can start changing the size, we can start changing things at different times. It's up to you, but it should look right. As you can see, this looks off. So try to make sure that it's going well. So yeah, now we have a nice little layered animation. It has multiple factors going in. We can go one step further and go into the individual elements inside of it, like these texts, for example. What we can do for them is we can add, for example, an opacity effect. So it would come we have to just align it properly, and it would go from having zero opacity to having a little bit more but as I said, you just have to align it properly. So this looks a lot smoother as if the text is fading in and it's really nice. You can also, you know, change up a lot of things within this animation just to make it look more natural, layering it, as I said. The more you put into it, the more sophisticated it looks. And, of course, at the end of the day, trying we're aiming for simplicity. We're aiming for minimalism and a lot of design. But also, we can only reach that simple, clean look by doing a lot of complicated things in the background. So, go ahead, try it out yourself and see what you can come up with from what type of layered animations you can come up with. Try to make as many as you can. But most importantly, make sure that it looks normal. It looks harmonized as if these animations are working together. Thank you very much for listening, and I'll see you in the next lesson. 11. Organizing the Timeline: Hello, and welcome back. In this lesson, we're going to talk about organizing your timeline. So what I mean about this is not just about organizing your timeline, but also making sure that the durations, the animations, they're well timed. That's what the timeline really is about. It's about timing your animations and making sure they're synchronized, harmonized in a way that feels natural and smooth and all the good things. So now, in the last lessons, we've created this nice little animation. And as you can see, we played a little bit with the animations. Okay? We played with the durations of the animations and the type. And one thing to keep in mind is that, you know, the frames are organized in this way. It's a very simple, intuitive way on the left. So basically, you have the frame that you're working on. So frame one, for example, and then you have all the types of animations that are tied to it. And you can see the maximum duration. So you can see this is how long this element, this frame is moving or changing within. And then you can see the position animation goes from this time to here, and then you have the size animation happening at the same time as another position animation. Same thing with frame five, but frame five only has an opacity animation. So as you can see, when we change the animation of frame five, it's going to drag all the other ones with it. And the same thing here is just going to stretch out all the other animations with it. So far, this is clear. We understand how these work. Let's go ahead and try to mess around with it a bit more. Let's learn about making concurrent animations as well as animations that are happening after each other happening. Basically, let's mess around with the timeline. Now, in terms of concurrent animations, these are kind of concurrent. So let's talk about creating an animation that happens after that, you know, extending the scene. So you come here, you get a message, right? Which is really nice. Looks great. Now, what happens after you get this message, right? So I'm thinking another animation that could fit it is maybe it moved out of the way. Maybe the user through to the left. Okay? So instead of slide in, I'm going to make it a slide out and I'm going to take it all the way to the left. So right now it's not making any movements, and it's because I guess the animation is outside of the timeline. So I'm going to extend the timeline here. All right. So now we can see the animation and I can play around with it. So the distance, let's increase the distance to make it go away, and there we go. Again, just like we learned, we're going to go ahead, go to the position, and we're going to try to make it more interesting. Let's see what we can do with bouncy. This bounce is not very bouncy in the way that we want it to be. I'm going to just do ease out and then I'm going to do custom. Then I'm going to customize it. Now, what's interesting, I want it to bounce in the beginning. I want the person to take it to the right and then it goes to the left. Let's see how that looks like. You see that? It went to the right a little bit, I bounced in the beginning and then went. And that kind of gives it a bit of character as well as identity. I mean, when you're touching the screen, maybe you come to touch this notification, and then by accident, you take it a little bit to the right and then you take it to where you want to take it, which is to the left. And just like that, we kind of added a different animation within the timeline. We can go ahead and expand the timeline and make another animation. So we can do that we can go to the design mode. I'm going to take this. I'm going to bring it here and I'm going to, you know, let's center it. And I'm going to write Okay. Now we have this and let's keep it centered. Then I'm going to go back to the animation to the motion mode, and I'm going to remove the other animations that this one has. As you can see, it went and copied all the animations that it had. I'm going to delete them all and I'm going to create my own and I'm going to have it be a let's see what we have here. Magnify sounds interesting. That looks really cool. But I want it to be a little bit shorter. Let's see. But we can go ahead and going back here, I'm going to put them in the same level. Then I'm going to copy it and put it here. Now this is also going to have the same animation. I'm going to add it here and let's see how it looks like. And what would be cooler, even, I'm going to bring this over here. I'm going to come here and give this another animation. I'm going to give this frame another animation, and that is going to be right here. We're going to give it a position animation. Instead of sliding in and sliding out, I just wanted to go with the Y and so it will start at zero and then it will go by 100. So we don't want to go down, but rather the opposite, we want to go negative 100, let's say, that's too much. But I think you know where I'm going with this, I'm going to click on it again. Let's do 2030. This is pretty good, but the timing isn't perfect. And I think we need to have this be on the top layer. Now I'm going back to fake my motion. Sometimes you don't see the timeline and you just have to click on any item. Now this looks much nicer. We can make it even more perfect by coming to the position and messing around with it a little bit. Example like this. And you can see how really nice this animation is, the tiny little frames, we can go examine them. Now, of course, I just want to let you know, you can see the notification coming in here. It's a different animation from what's happening here. But that is on purpose. I wanted it to look different. But obviously, if you're designing something like this, the notifications should come in a more consistent manner. But let's see how it looks like now. Okay. It looks really nice. But let me give it some time. I feel like the message is popping up is a little too fast. I'll come here and I'll move the position to here and I'll move these here. Okay. Yeah, this looks pretty good. There you have it. Hey, man, how have you been doing? Then gets deleted and then he says, don't you dare delete my message? I see what you're doing. Let's see it again. Perfect. And this is basically the way that you should be working. You should be looking at your timeline as a Playground. Go ahead and create different animations at different times. Don't worry about making a mess. Just make sure that you're having fun. And, you know, at the end of the day, you can make your timeline look more I don't know, organized. If you just collapse, instead of having these all collapse, you can put them back up, and then you can see each frame. So now we're just seeing the frames. We're not seeing all the different animations that these frames have, and then we can move them around. We can play with them in a much easier way. Thank you for listening, and I'll see you in the next lesson. 12. Looping Animations: Welcome, again, in this class, we'll be creating animations that loop. Creating animations that loop isn't that hard, but it is a subtle art that not everyone understands the meaning behind and that everyone can do seamlessly. In this lesson, I'll explain to you how you can achieve it and what's the use of it really? And, of course, there are different applications and use cases for this type of animation. So it varies. I can't give you an overview of everything. But one clear example I could give you are, you know, the reels or TikToks or whatever short form content you watch in which videos repeat themselves. They loop. And in reality, all videos loop on social media. At this point, you know, aside from YouTube, on Instagram, Tik Tok, other social media platforms, when a video ends, it goes back again and loops. But what we're talking about is giving your video a seamless look in which it doesn't look like it's looping. It feels like it keeps going on and on again if you're not paying attention. So it's basically making the end seem like the beginning. So let me explain what I mean to you. So right now, in this animation that we've built so far together, we can see a very hard cut, right? So let's turn the looping on from here, and, you know, right now, it's in loop mode. So when we play this animation, you're going to see things are happening, and then there's a hard cut. The hard cut happens right around here, as you can see. So once you reach here, things disappear suddenly abruptly, there's a very easy way to get rid of this, to fix this. The way to do it, we can extend the timeline just a little bit, and we're going to choose both these elements and we're going to give them an animation. Let's go back. We don't want a rotation animation. We want a position animation. We're going to make it slide out, and we're going to make it distance to the left. Let's choose both of them again. Let's open them up. This one, and that one. I'm going to choose this animation and this one and or distance so that they're out of the frame. You can also go ahead and customize it if you'd like, it's totally up to you. All right. Now what we have is this animation that at the end, these two that leave, we can customize it a little bit in a way to make, for example, one of them leave after the other like that. We can extend them a little bit because they might be a little too short. We can also give them a bit of we can also give them an ease in. Okay. Now look what we have now. Okay? So you get this animation, you get this message, you delete it, you get these messages, you delete them, and then it loops, but you don't feel like it loops. The whole secret lies in the fact that you're making the very last frame here look exactly like the first frame. The way that we did this is very easy. We simply made all the frames, all the elements, the changing elements disappear. Now there's nothing, and then we get back to square one, we get this message, we delete it, we get these messages, we delete them, and then we're back. This is really the secret. I mean, it really doesn't matter what you do here in the middle. All of this is irrelevant as long as you at the end, right at the end, that you make sure that the ending frames are the same as the beginning frames. Now a lot of do this, if you have a video, if you're doing an actual video, not a motion graphic, the way to do this is to get the video, put the start of the video here, and then the continuation at the beginning. This way, the video begins here, and then when you come to the end, it's going to loop very seamlessly. Okay? But this is talking as if you have a video. But in this case, on Fegma we're not dealing with a video, we're dealing with a motion graphic. Okay? So it doesn't matter what colors you have, what animations you have here as long at the end here, you have the same frame. So just illustrate this a little bit more when we come here and we get this background, I'm choosing the background. Now, we can give this an animation of the opacity, right? So we can make it fade out. So how does that happen? We're going to make it fade out and we're going to bring it right around here. And we're going to make the background black. And when we come to this fade out animation, we're going to make it 20%. Okay? So look what's going to happen now and we're going to do it like this. So right when you get the message, it's going to go dark as if you're focusing on the message. And we can go ahead and, you know, customize it, as well. Like that. But most importantly, when you come at the end, you can bring this animation, paste it here, and then we're going to make it fade in and then we're going to go back to 100%. And we can put this at the very, very end. Now look how it looks like. Well, that was not very smooth for some reason. So let's just come back here and it says, fade in amount 100%. Wh seems to be having an issue. So let's try to make it custom, and it's going to say start at zero and then end 100, so now it's working. So now look at it. So as you can see, it doesn't look like there's an ending and beginning and whatnot. But in this case, it might be clear because we put the opacity only here in the beginning, right? So what we could do about this, we could also copy this effect, bring it here. And when we delete this message right around here, we could do the opposite. We can make it, you know, do custom 0-100% and bring like this. And then we could also have the fade out around here. So now let's see. Earlier and we can make this a little bit earlier as well. As you're deleting the messages, All right. So as you can see, we made it in a certain way where it doesn't seem like the video is looping, but it is, in fact, looping. That is exactly what you want to do sometimes. Now, let's discuss the benefits. Why would you do this? One thing is for smoothness, you want to be smooth and maybe your goal is to repeat the video. There are different reasons why you might want to repeat a video. Now, when you're in TikTok, you're on Instagram on any of these platforms where they have a looping function. One reason is you want people to watch the video again and again. Maybe without noticing, maybe with noticing, but getting more views, that is one goal. Another goal of looping a video or having the video repeat again and again. It might be just an effect. You want to make it seem like groundhog day if you know the movie. You want to make it seem as if this day is never ending. It keeps repeating and repeating and repeating. I hope that helped you somehow and that you learned how to create looping videos. Thank you very much for listening, and I'll see you in the next lesson. 13. Using Keyframes: So in this lesson, we're going to talk about keyframes. A keyframe is essentially a point in time. You can think of it as a frozen point in time in which your frame or any select element is taking a position, opacity, whatever it may be. Now, when it comes to keyframes, one more thing that you need to be paying attention to. If you haven't noticed when switching between the design tab or the design mode and the motion you get these symbols, these little squares that you get on most fields that you have. And these are what we call keyframes. You've already seen them here below. And when you click on any one of them on any element, you're basically letting Figma know that you'd like to add a keyframe of this specific property at this specific place. So let me show you what that means. So now coming to this object, when I click here, when I add a keyframes, you can see the keyframe being added. And it adds an animation property, which is scale. So we didn't have this before. We had position, size, position, position, and now we have scale. So we can go ahead and changing directly from here, you can see a keyframe being created. So this is another way of using keyframes directly from this panel that you already know and love and use every day. So just keep that in mind, keyframes are not limited to this area. You don't just have to use auto keyframes, but you can also use the keyframes function right over here. So we're going to go ahead and turn on auto keyframes from here. One click is going to turn it on. The way to do this, let's come to the object right here, let me show you what I mean about this. Right now, we have this animation already going on, this is a set of keyframes. Usually the keyframe is in the beginning here and at the end. So you can see here the opacity is something here, and then the opacity changes there, ok? But we're not talking about this element. We're talking about the element right here. So now that we have it here, we can do is we can go ahead and change something, anything about this object. So we can go ahead and push it up. Right when we do that, that becomes a registered movement, an auto keyframes, if you will. You can see how it's registered and it creates a difference. Before that, there was no movement. So what we can do in this case, we can come here, take the object, we can center it, or we can just move it a tiny bit and then we can move it up and then move the timeline a little bit and then move it back down. So now let's check how it looks like. So you saw that. I went up and down, and that's basically what we did. Now, everything that we're going to do, whether we're going to switch the size or we're going to do some rotation, for example, let's see if we can do some rotation like this. It's all going to be registered as a keyframe and it's going to have an effect. Now, this looks horrendous. This is not something that you want to do. But I'm just showing you the possibilities of what you could be doing. And if we were to copy any of these elements, let's come here and let's copy one of these, I'm going to copy this one, I'm going to put it here, and let's take it and remove all the animations that it has. And we can try to make it purely, you know, use auto keyframes, okay? So now we're going to start the auto key framing. And we're going to say in the beginning, this is going to be here on the left. And then after a while, it's going to come here. And let's see what we're working with. So it's right here. You can see the keyframes here, right? So let's say I want to put it down. I can come to the first keyframe and also put it down in the same direction or same level, almost. Then you can see I'm recreating the similar animation that we had, and then I can come here. I can also add the keyframe on my own. I don't need to have this mode on. I can choose the keyframe here and I can say and then it will leave and go to the left. All right? So let's see. Maybe it should arrive a little bit earlier. We can move the keyframes and bring it here. Then once we have that, we can click on here and we can choose the type of curve that we'd like to have. For example, here we had a bit of a bounce as I remember, so we can do this. You see that? It's very similar to the animation that we had here. It's not exactly the same. That's not our goal. But I just want to show you that you could also be doing this with these type of, you know, just keyframes because it's more intuitive. It's just about move the frame, you know, put the frame, move the frame wherever you want to take it. Like in the beginning, it's here, and then you take it here, and then you resize it, whatever it may be. And it works out. And let's do the same thing with the size, right? I'm going to make it smaller now. I don't know if this is properly small. Alright, we can make it tiny bit smaller. So you can see there's a tiny frame here that became width. I'm going to bring it here. Let me show you. This one we don't want it, we're going to delete it and take this one here. A just going to make it a tiny bit smaller? Okay, now when we come here, we'll start to expand. You're going to click here, you can see the width animation and then I'm going to make it expand. All right. But now we have to change this one, the position one. You can navigate right and left so you can go to the nearest frame to the right or left. Now I came to the keyframe here, I'm going to take it to the middle. Then I'll come to this keyframe here and I'll also put it in the middle. Then we can choose both of these and make them ease in and out just like that. We also can change this one. I'm gonna make this ease a little bit more. Ease out a little bit more, yeah. And just like that, we recreated this first animation. It's not perfect. You can see that in the size of this. Let me make it a tiny bit smaller. So you can see 72. When we come here, I'll also make this 72 or 73. It's still not perfect. Let me see. Let's make it 70 or 69. All right. And then I'll come here and I make this also 69, and there we go. So just like that, you can use the auto keyframes or you can just go ahead and use the keyframes on your own to go ahead and do everything a little bit more manually. I know it feels like it's manual labor, it's manual work, but it can get a lot easier. And for people who have already have some video editing experience, this is probably more intuitive and easier for you to work with. Just to note, you'll probably not be able to see these keyframes unless you turn this mode on and you already start switching things around. Otherwise, when you look here at the opacity, I can't set any keyframes. But here, I can already play around with it because I change the position, I change the width, and so on. Just make sure you have that in mind when trying to test this feature out. Thank you very much for listening and I'll see you in the next son. 14. Common Motion Design Mistakes: If you were to ask me, what are the most common motion design mistakes that people commit, especially newbies, I would say there are three main mistakes that you need to pay attention to. Now, of course, there is a plethora, a whole sea of different mistakes that you could commit, but I'm only going to focus on these now, the first mistake and for me, it is a grave sin because I think if you are in the video editing business, this should already be basics. These are the crucial basics they should already have written down is just using linear animations. For me, that is a sin. Now, let me tell you what I mean, but we've already talked about this. When making any type of motion like this position, motion right here, I always recommend that you go ahead and use these curves and use easing, use springs and bouncing and all of these different features because they're made for that exact purpose and they're made for you to go ahead and play around with. And one of the biggest mistakes is going ahead and choosing linear. Are very few cases where linear makes a lot of sense, but it is often not the answer. Now, switching this to linear, you can probably see what I mean, comparing the first one, the one on top to the one below, you can see how soulless the movement is. It feels robotic and, in this case, it's stopping and it stops, but it doesn't really stop because there's another movement here. But let's remove this one for now and you can see how this looks. It looks super wrong. It just stops suddenly. There's no change in speed, there's no exhilaration. And with the other one, you have much better flow simply. You see how it exhilarates, it eases in, eases out, and it takes its time. Let's go back. I don't want to see this anymore. So that is one of the for me, the biggest sins that you could commit is using these linear animations. They don't have character, they're soulless, and they're not fun, and they don't really convey any idea. So please please, please try to understand these different movements and motions, whether you need to put a bounce or whether you need to ease it in or out or both. Try to understand what fits your brand pass, what fits the functionality or the video that you're doing best. There's a different character or a different stylistic choice for each video. So you just have to understand that and make sure that you're doing it with intention and not just randomly. Especially keep it consistent. Don't keep changing it up. That is one of the biggest mistakes. The second mistake is not layering. We've already talked about layering and how crucial it is when creating motion design. What I mean by layering is playing around with multiple different objects, as well as inserting multiple different animations to the same object. So we've seen this already here in the beginning, and I think we demonstrated that very well, even though it could be demonstrated even better, okay? And the way to show this to you is when an animation opens up like this, you can see, there's multiple things happening. So you can see already the size is changing. There's also position changing. It's moving to the left, or moving to the right or whatever it may be. But there's movement happening at the same time, the text here is fading in. Was not visible. Now it's visible. And yeah, in general, you have multiple things going around at the same time. Okay? And we see this same example here again at this part again. And the way you see this is as the first message is going up, the second message is popping up, it's coming into so this shows you, there's some sort of interaction. It's a delicate dance of salsa or tango or whatever dance you might want to do, but it's very delicate, it's very nice, and the two people dancing need to be playing around together. That's really what makes a motion design or motion graphic. It makes it come to life because it feels like they're talking to each other. There's at communication, a beautiful language that is happening where someone sing, Hey, I'm coming, I'm going to pop up now and then the message above it goes a little bit up so they don't hit each other. It's just perfect. It just harmonizes well. The biggest mistake is to not do that. The biggest mistake is to have these very static looking animations that don't feel harmonized. They feel more frozen, feel shy and feel in animated. That's the best way I could describe it. That's the opposite of animation, as a word, you're having something inanimate, it's not moving. Maybe it's not even living, it's not alive. It's dead. Go ahead and try to make sure that when creating motion design that you're paying attention to all the details and you're layering different animations on each object. And within the same timeline. And now, coming to the last mistake, last mistake, in my opinion, when working with motion design, other than creating awkward motions and whatnot, it's not getting the speed right. You're watching your motion design again and again and again and you're reviewing it. At the end of the day, you might be inclined to make it super fast because you've seen it all before. You don't read the messages anymore. You have some text. You don't read it anymore because you think, Hey, I've already read this, I know exactly what it says. And so you might be more inclined to making your animations go really fast. And this is something that we might have done in this animation in particular, where you can see the text is coming super fast and we don't have time to read it. Now, a lot of people might feel the pressure to do that specifically for social media because they understand, okay, people don't have very good or very long attention spans, but that is not the right way to go about this, okay? So make sure that when creating an animation, you're giving your viewer, your reader enough time to go ahead to view the animations in all its glory, all its beauty, and to be able to read the texts and the little notes and understand what's happening. Otherwise, you risk doing too much. You're moving things too fast. There's multiple things happening. The opacity of the background is changing and messages are coming in and out and being deleted and whatnot. And so this can be very confusing. And can throw your viewer, it can throw them into a world where they don't understand what's happening. So learn from me, learn from our mistakes, and try to make sure that you're giving your viewers enough time to view your animations peacefully, but at the same time, without losing attention or without getting bored. So you have to have a very fine balance between these two. In my opinion, you're never going to be able to make everyone happy. But just make sure that it works for the majority yeah, these are basically my suggestion or my view of the biggest three design or motion design mistakes that you could be doing. As I said, this is my own opinion. So take it or leave it. You know, This is just advice for me and try to keep it in mind when creating motion designs just so that you don't seem like a newbie, seem like an amateur, at the same time, so you can create impactful motion graphics that people actually like and that get engagement and views and people's attention. Thank you very much for listening, and I'll see you next time. 15. Exporting as GIF, MP4, WebM & SVG: All right. So, now you've done and you've finished your animation, and you feel very proud of it. But now you'd like to go a step further and just do the last final step, which is exporting it in order to show it because after all, if we did a lot of these great animations, we want to show them to people. We want to make use of them. Otherwise, this feature of figma, this whole motion mode is completely useless. So good news for you. We can export it, and it's very, very easy. Now, it might not be very obvious how you can get there, but let me explain it to you. And I will also explain to you the different exporting settings that you'll in order to export your video in the highest quality, but also not with absolute largest file size. So let's go ahead and navigate to that panel. The way to do this is to go ahead and click on the frame that you want to export. So you're clearly not exporting the whole file. You're not exporting multiple frames at a time. You're exporting the frame that you were working on, even though you can probably export it from multiple frames, but it's just going to be separate video. Let's look at the video for this frame. You're just going to choose it, you're going to select it. Then while you're still in figma motion mode, you're going to scroll down to Export, then it's going to have a few options for you. There's animated and there's static. I might seem like statics is empty, but it's not. You just have to click on the plus. This is the normal or classical export panel that you're usually used to. You know about this probably, you can export it as PNG, JPEG, SVG, PDF, and so on. But what we're more interested in is in the animated export function. In here, it's very much simplified for most people, which I really appreciate because I always get lost in these details of the different export settings, and I don't know how to export my videos in the most optimal way. So Figma makes this really easy for you to understand and to get around. So first, it's going to ask you, what is the format that you need? There's different formats, and of course, it depends on your usage. I am not a video expert, so I can't really give you all the details. But the most commonly used format is MP4, going with this format, you're not going to be doing anything wrong. Now, what I can tell you is that web is more suited for the web. But of course, I think this is more suited for website specifically, but I'm not sure about that. It might help you have smaller file sizes, although I'm not sure. Now, when it comes to gifts, that's something I can tell you about. You probably know about gifts. You've used them and you use them on social media here and there. And gifts are much lower quality. Usually they're compressed and they're supposed to be without audio and they basically are not the most optimal viewing experiences, let's say. It's not going to show your animation in the best way, but it's going to make sure that the size is very small. And as you can see, it also has lower frame rates. You can obviously explore it with more frame rates, but that defeats the purpose. So what I would recommend you to go with, keep it simple is MP4. If you have specific use cases for the other file types, then go ahead and try them out. The second thing is the size, you probably know about this. Normally, you just do it one X as in one times. Export it in the exact same size of this frame. But if you say this frame is too small, I want it to be bigger, then you do two X, or you can even fill it out yourself, I believe. It seems like this is a professional feature, but just keep that in mind. You also have different export settings. So you have 1080 14 42,160. These are different export settings, and they relate to the quality. So you have HD, fol HD, and so on. Now, what you could go ahead with is one X. So if you know that this is the frame that you want to export, it is basically a phone screen, then it should be more than enough. If you're worried about it, you can two exit or you can pick a very specific type of quality. Right now moving on, we also have quality. Now, this is also made to be very simple for you. So it's set to low, medium or high, and everyone's going to say, Yeah, I want the absolute highest quality, but you got to keep in mind this is going to result in a bigger file size. Now, to be fair, two MB is not that big. I'm guessing they have a really nice compression method. They really nice setup. This is really good for high quality, but you have to keep in mind this is a very short video. You also have medium, and just by going to medium, you can see we already saved 25% of the size. And if we go to low, then we saved more than half. Okay? So from high to low, we saved more than half of the file size. So you really have to think about it, although I'm not sure what the quality difference. Of course, you have frame rate. Now frame rate relates if you don't know it. It's how many frames you have per second. That's what FPS stands for. Usually, for social media, you have 30 or 25, 24, as far as I know. If you're exporting something for social media, you're not going to be able to get six tfPS there's no use in doing that. But if you want to set it up for people for websites or other use cases, you can actually show it as six tfPS then go for it. Why not? Just keep in mind that this is going to result in a higher file size. We went 50% larger here, as you can see, you need to have a professional account for that. If you do something like 12 FPS, it's going to seem a little choppy or whatever you might call it a little laggy, even though it's not, so just keep that in mind. Now, let's go ahead and try to export that. I'd like to show you the differences between the quality. Let's go ahead and do it. So one X, and let's do high. I'm going to also go ahead and export it as low. And then I'd like to export it as a gift. Now let's check the video. We first have one X high. This should look more or less exactly how we saw it. As you can see, it has a lot of frames. It's very smooth. Although I would say the quality could be better. So I can understand exporting it as two X. Now let's see how it looks like low. I can already see the quality of the image is just so different. I mean, if you look in the background as well, it looks like more compressed here. But I'm going to have to say, it's not a huge difference between high and low. Now, let's check the gift. So as I expected, you know, the gift has lower frames per second, so you generally get a more choppy view. But to be fair, if you want to show this to your team, if you're showing a very simple flow and it doesn't need to be that complicated, I wouldn't say, you know, this is really bad. It's getting the idea across, and, you know, they can see the general movement. It's not super amazing quality, but hey, it's getting the idea across. Now, as a last thing, I'd like to test exporting it as two X high and see how it looks like. Alright, so here we go. Let's see the two X high. So I can see the image is a little bit sharper, definitely. I could say that. But especially here in the dark parts, I feel like we're still getting this distortion here, which I don't really like, but I'm also being very, very particular about this. But I say, the quality we just got looks a lot better. Definitely looks a lot better with the two x version, but it's still there, not where I want it to be. And let's see the size in terms of the size. It's 3 megabytes makes sense. It's double. But this is basically how you can go ahead and export your work in order to showcase it, show it to others, and share it with them. Thank you very much for listening, and I'll see you in the next lesson. 16. Animating a Loading Circle: Hello, and welcome to another lesson of the Figma Motion course. Now, in the past lessons, we learned a lot of different techniques, a lot of different things when using Figma Motion panels and tools and features. And we did do one animation. We focused on it, and it was basically about receiving messages. And in this lesson, we're going to talk about a different type of animation. Which is a loading animation. Now there's a ton of loading animations, different ones, but we're going to start with a very simple one that we all know about and it is the circular rotating animation. Now, of course, there are different types for this animation. It's not always the same. I can have different styles, different colors, but we're going to try to keep it minimal and simple. First thing that we're going to do is we're going to go ahead and copy and paste this frame, and we're going to take it away, put it to the side. Right here. Now, as you can see, when we open this frame, we can see already that there are a few animations set up to it. So in order to get rid of them, we're going to go to the layer. We're going to go to the frame, and we're going to check the different layers. We're going to keep the image. We're going to delete everything, all we need to do is do a loading animation. I'm going to keep it as simple as possible. Now, in order to create a rotating circular animation, we're going to go to the ellipse stool and holding Shift, we're going to create a circle like that, and we're going to put it in the middle. Instead of giving it a fill, we're going to give it instead and you can make it a little thicker. Okay. There we go. Now we have an empty timeline with no animations. We'll click. Let's reload it. This looks pretty good. Now, let's get started. Now, in order to make it work, we have to split it up. It can't be a full circle. What we're going to do is we're going to touch it, and we're going to go to the design mode, and then we're going to come and see this little piece here and we're going to cut it. You can make any part. I full it could be half one. It could be three quarters. It's really up to you let's do something like this. I'm going to do something close to a quarter, 25%, and then what we're going to do is we're going to come to the stroke. You can see there's different types, but they're all leading to the same thing. What I'm going to do very simply speaking, I'm going to double click it and then I'm going to delete this point right here. All right, so now we have this piece here, and we can go ahead and start doing our animation. So we're going to come to our motion part right here, and we're going to give it an animation. Now, this could be a rotate animation, but there is an issue. You probably might notice it now, which is that it's rotating in a rather strange way, let's say, okay? So it's rotating around itself. But as you can see the center of it, the anchor is not set up properly. So what you want to do is you want to go ahead and make this into a frame. We want to enlarge this frame and we want to enlarge it as if it's a full circle, not just a part of it. What we're going to do is we're going to come to this part width, and we're going to multiply it by two, and we're going to do the same thing here. The way to do this is you can just put an asterisk and two after it, then Figma is going to do the calculation for you. Then I'm going to hold this and coming back to the design section, I'm going to align it to the bottom. Right, okay? So now it feels as if there's a full circle in here. And now when we go to the animation panel and we add a rotating animation, we're going to see something incredible is it's going to rotate as a circle, okay? So even without having a circle, we made it rotate as if there's a full circle, even though it's only a quarter. So it's very simple, very easy, but here's what you want to do. You might want to extend the animation a little bit, and it might seem too slow. But what I want you to do is I want you to go ahead to the rotation panel. You can make it clockwise and make it 360. So here's what's going to happen. It's just going to go back to the exact same place. Then come over here to easing Curve editor, and then I want you to make it curve, just like that. Actually, I would personally even decrease this a little bit and I would make it curve from down. What this means if you haven't figured it out yet, which is totally fine, it's not easy. This is easing in. What I just did, I made it ease in and then here it's going to ease out majorly. Let's see how it looks like. Very nice, very nice. Basically this is how a lot of them look like these rotating things, loading circles. So let's see how it looks like now, I just shortened it. It's much faster, which I like. Then after that, now that we've got this, we can copy this, paste it. Not the whole frame, but rather the rotating animation. We're going to put it here, and then I'll copy it, paste it here, and copy and paste it there. Now look. It just keeps loading. It's very simple, very nice, very neat. If you want to go a step further, which you might want to, what you can also be doing is you can add a number. For example, going to add 10%. Make it a bigger, and I'm just going to put it in the very middle of the whole frame. Going back to the design mode, the very center, and now we can give it also a bit of a shadow. We have 10% going on. Okay, cool. How do we animate this? Well, it's not the easiest thing I must say, but there is a way to get it done. It's a little tricky, so buckle up. But basically, what you want to do is you want to add an animation for this, which is opacity. So you want this to appear, and then you want this to also disappear. So we're going to add two animations. So the first one is opacity, and instead of it being 500 milliseconds, we can do ten. And then we're going to go ahead and do another opacity animation, but this one is going to be a fade out, and it's going to take also ten milliseconds. Okay. Now that we have this, we can go ahead, copy this and we're going to paste it right around here. Okay? So copy paste it, you can see it pasted here, and then I'm going to drag it here. Okay. Now that we have this here, I'm going to switch it up to 23%. And it would be quite nice if we also kept them all centered. So I'm going to come here and keep this centered as well. So it looks nice, but we're going to have to center them both, so perfect. And now look how it looks like. Okay? But that went a little too fast, I would say. So we can extend this or we can make another one. Let's do another one. So now we have the 23%. We're copying, pasting, and we're going to take this here, and then it's going to become 49% and then we're going to copy paste. It's going to be 83. Then lastly, copy paste it. And it's going to need 99. All right, so let's see how it looks like. Very bad. The reason is we didn't sync up the ends to the starts. So what does that mean? Now we have here an end. One of them faded out, and then the other faded in. Now we have to do the exact same thing, but it can get a little tricky. So we're going to come here and we're going to add the fade out right about here. So click on this and drag it all the way here. Then look. There's a fade out here, a very tiny section. We can, of course, try to shorten it or remove it by dragging it a little further. You can do that also by rolling up and then you can zoom in. You can see the gap a little bit. Now I'm going to fill the gap. As you can see, there's a tiny millisecond there. All right, now that we have this, we just have to sync up the other ones just like I said. Now we'll come here, we'll bring this here. And it'll sink it up. And the same in the end. It just repeats itself. But it can get a little tricky because they're so short. You got to watch out for that, to be honest. All right. And as always zoom in a bit more, bring this a bit closer. There we go. So now let's test it out. Then for this one, it doesn't need to fade out. I can just stay there. So I just going to delete this. For the last one, it can stay at 99%. You can tell it's not perfect yet. There are some of them that we can still make better. For example, the jump here, I believe, was not so ideal. And there you have it. Not perfect, but it's a nice little loading animation, and that's all you need sometimes. And of course, you can extend the time here, so it stays at 99% and doesn't repeat. And, of course, you can continue these. So as you can see, it keeps loading with 99% and so on. This is basically how you can do it. It's as simple as that, not too complicated, and there you have it. The next lesson we'll be exploring a different type of animation, which is a loading bar. It's also similar, but it works a little bit differently, but understanding how this one works, it's not going to be that difficult to understand the other one. So I'll see you in the next lesson. Oh 17. Advanced: Animating a Progress Window: In the last lesson, we learned about creating these different loading states, and one of them is this loading circle. In this lesson, we're going to learn a different type, which is a loading bar. But we're going to design this differently, not only from how it looks like the animation, but also trying to understand the user experience behind it and how it can help you. So I'm going to copy and paste this exact frame once again and I'm going to put it away just so we don't get distracted. And let's get started. So I'm going to make this into a flow starting point. I'm going to set it up here so we can see it. Then we're going to go ahead and delete these elements that we have created in order for us to have a clean slate. All right, now that we have this, let's get started with our animation. What I'd like to do, and let's first start by creating the visuals for it. What I want to do is I want to create a progress bar, a loading bar that goes from the left to the right. At the same time, I don't want it to just be that. Instead, I want it to also provide some extra information and feedback to the user, letting them know what stage they're in and what needs to be done or what is currently being done this stage and maybe giving some information or some instruction. Let's dive right into it, and then you'll understand what I mean. I'm going to create a frame, first of all, and I'm going to put it right here. I'm going to make it white for now, and then I'm going to make it circular. But actually, instead of making it completely white, how about we give it a glass effect, Okay? There we go. That's a really neat glass effect. And what I love about it is that you don't really need to work hard for it. I already does a lot of different effects for you, which is really nice. So now then after that, we want to create some bar, okay? There are different ways to create these bars, but I'm going to create it with a frame once again. And I'm going to give it to fill. I'm going to also make it have some round corners. But I'm going to give it a 20% opacity, okay? So let's put it here. Or let's see, maybe we can make it smaller. I'm going to copy and paste it and put it there. So this would basically be our progress bar, as you can see. And we can ask ourselves if we want to put it down, if we want to put it up or if we want to put it right in the middle, right? That could be also a different type of loading. And we can also think about how it may help us or benefit us in whatever way. We can also extend it till the end. What some people do is they make it really thick or big or whatever, like this. What other people do is they make it really, really, really thin. I think Apple does that, for example, if we go back a little bit, also make it really thin like that. I like this look. It's not too chunky. Let's try to stick with this look right here and I'm going to put them in a frame. So now that we have this, we're actually better yet, I'm going to paste this into that. This is going to be a frame within that frame, and we're going to give this 100% opacity, but we're going to make the fill be 10% and in this way, we can see this, okay? And of course, you don't have to make it white. You can also make it blue or any other color that you'd like, that's totally fine. It's just a color that I picked for now. There we have it. Blue is nicer. And let's see how it would look like if we give this whole thing glass effect. It might be a little too overdone to be honest with you, but we can give it maybe a stroke and make it really thin. Make the stroke also 50%, 20%. So I'm going to make this into an auto layout, actually. I'm going to extend it, and I'm going to make the frame within it smaller. But I wanted to have a fill container for the height, I wanted to fill only the height. So in this case, if I decide it's too small, I can make it chunkier like that with no problems. Now, let me take a look at it and see how it looks like on a phone screen. This looks a lot better, a little bit thicker, to be honest, but I'm not super happy with this blue. Maybe what we could do with it, we can give it a gradient, maybe. That would also show the progress that's happening. And let's see how it looks like. Looks a lot better, but it's still not there. I wonder if maybe we could give it a glow. But at this point, we're talking about details, and to be honest, that is not the most important thing ever that you want to be focusing on, right? So keep that in mind when you're designing such a thing, and I'm going to make this nut clip content, and then we have some sort of glow effect going on here. Okay? This is pretty cool, pretty nice. I'm going to go to the glass here and I'm going to have some frost that will help us with the readability or being clear. I'm just going to try to set up this globe to not be overdone. Okay. This looks pretty good. This looks really nice. I'm going to add some text now. Now that we have a bit of a basis, let's say, now we can add some text and talk about what we're doing here. I'm going to write some text here and I'm going to say transferring data. Okay. So we can either center it or keep it to the side. It's really up to us. But what I'd like to do is, I'd like to copy this, and put it a little bit down, make it a bit smaller. You know what I'm going to make this whole thing an auto layout. Okay. And I'm going to make the spacing a lot closer together and especially these should be even closer. What I'd like to add is add a bit of explanation. Keep the user in the know. I want to let them know what's going on? What's happening right now. I'm going to say patching files, 50%. Okay. So this is meant to let the user know of what is happening at this exact moment. So I'm not talking about the whole thing, yeah, we're transferring data about what is going on? Are we extracting? Are we putting files and zip files? Are we compressing them? What are we doing exactly? That's exactly what we need to be telling the user. That's one thing to keep in mind. Another thing to keep in mind is maybe adding a number. We can do this by copying this text, pasting it here, and then maybe adding it in auto layout with this one, putting it like that. But instead of having a full text, you can just write 10%. And then we can center them like that. But to be honest, I'm not really happy with this because it's not symmetrical. A step back. You know what? Let's keep it like this and I'm going to put it down instead. Let's see how it looks like now. Also still not very happy. This is a bit better, but still not there. Maybe it has to do more with the spacing. This is a bit better. Let's see what about if we put it to the left or to the right? Yeah, this might work a bit better for me, to be honest. All right, so now this looks pretty neat. Let's go ahead and get started with actually animating it. So we're going to go to the animation panel or the motion panel, whatever you want to call it. And we're going to come here and we're going to give it an animation just to show up. We want this to pop up or we want this to come on the screen. I'm just going to do a bit of a scale animation, and I'm going to add to that opacity animation, and we can give it a bit of a position animation. So we're going to make the position from the bottom. It's going to be very slight, maybe 50. We're going to give it an opacity, fade in, but it's going to be very brief, and the scale is going to be Okay. This looks pretty nice, but we're going to make the scale 90%. And we're going to choose all of these and give them this type of easing. We're going to make them ease out majorly. That looks pretty nice. That looks very neat, very smooth, okay? We can even go ahead, to be honest and give it a bit of bounce, although I'm not super happy with bounces and whatnot. Let's see. This is nice. I like this bounce. What if we do it with the position as well? Yeah, that's also nice. Now, we can bring the scale in position to be shorter, so it's a faster animation, and then you get transferring data. And instead of it starting here, we're going to make it start at 5%. And instead of patching files, I'm going to say preparing files. All right. So now we have transferring data, transferring photos and instead of data preparing files, we're going to make it clear. And we're just keeping it minimal right now. And now let's get started with animating these small little elements. So what I'd like to first start with is the loading bar itself. So with the loading bar, it's pretty straightforward. What we can do is we can Give it a size or scale animation. If we give it a scale animation, let's see how it would look like. That's exactly what we want to be honest. This is going to be resize out. Let's make it shorter. Bring it here. We get this pop up and then it goes faster, but not that fast. This is pretty nice. We can even ease a bit more if we'd like, or we can make it ease in as well. No, but I like it without easing in. When it eases in, then there's going to be a difference with the percentage. Okay? So we can try to do this in different ways. So we can do the same trick that we were doing in terms of opacity. So just like we did in the last lesson, we're just going to change the opacity in this case. The way to do this is to basically go down here or go up here and we're going to do opacity. Okay? So we're going to make it fade out just like that. Okay. But instead of it being so long, we're going to make it last for ten milliseconds. We're going to make it one millisecond. But for some reason, it's not happening. Okay, that's too slow. So what I'd like to do is I'd like to make it shorter, so I'm just going to give it one millisecond, which is going to be ten, and then you can see it goes almost instantaneously, and just as an extra measure, we can go ahead and do this to the graph, and this is going to make it disappear even faster. Okay? So now we have this. What if we copy and paste this element and make it 25%, okay? And then we're going to take it ahead and we're going to give it another opacity one, but it's going to be faded in, and it's also going to be ten milliseconds. So let's see how it looks like. So let's move this fade out there. So as you can see, it's not looking good because they're under each other. This is creating more or less a problem for us, but it's not that problematic, to be honest with you. You're going to go ahead to these together, and you're going is to just put them in a frame. So frame selection, and then you're going to put them right in front of each other, right on top of each other and you're just going to put like that. Now, we'll come to these numbers and we'll make sure they're all aligned to the right. And then we'll add another one, and we'll call it 64%. And then we'll add another one and call it 80%, and then we're going to have 97%. I don't know. I'm just putting some random numbers and then we're going to go back here and we're just going to align them properly. Here's how it should look like. Now we have the first ones aligned here. Then we're going to switch it up, bring this there, this there. Actually, this should also be here. They're going to move everything a bit further. All right. We changed the titles, but we didn't actually change the contents, so we have to take care of that. I'm just changing the content right now. So you can't see it, but a lot of times you have to do things blind. You just click on what you want to change. You click Enter and then you can change the text. Now let's see. It's accurate. I'm just going to space the bit more so that we can have more fun with them. And then we're going to try to align them properly, which is going to be a challenge. What we can do is maybe I can cut it. Choosing this, I can try to cut it, but it doesn't cut. You can just drag it just like this and then align it exactly. That just makes things a lot easier. So just hold it, bring it, and align it exactly under it, and you're good to go. Now moving on to the next victim, hold it, bring it back. And then for this one, we're just going to make it disappear much later or not at all. All right. So now let's see. Okay, perfect. Now, it seems to work. We just need to change the resizing animations to suit them as well to come at the same time. So let's see. So this one, for example, we have this 25%. This should be a lot more, so we're going to give it an amount of or even a little bit more. Give it another one here. Sounds good. And the last one here. This one's going to be a bit more. Now let's check it out. Let's see how it looks like. What I might want to do is I'm going to move all of them a bit to the back just to allow them to have their animation before the numbers change. Now, let's see how it looked like before. I think before it was nicer. Now it looks like it has lag, but this way, it's perfect. Great. Now that we have this after this animation, it's going to finish. Now normally I would recommend that you do have a window of saying all files have been transferred. Everything is good. But that's not always what companies do. A lot of times they end just saying anything. What we're going to do is we're going to do that. We're going to follow these companies leads, but just for the sake of keeping this lesson short. Now I'm going to choose this whole frame and I'm going to give it the same animations that we had before, but they're all going to be reversed in a way. So let's check it out. Instead of scaling in, it's going to scale out. Instead of fading in, it's going to fade out. And instead of sliding in, it's going to slide out. And we'll bring this here. Let's see how it looks like. Or we bring it back. There we go. All right. Now, the one thing we need to adjust at this point is the easing because now it's not doing very efficient easing in a way. So let's just choose them all and we're going to say ease in. Instead of easing out, which we had, maybe we'll do ease in this time. Let's see how it looks like, or maybe we'll ease out. Let's see how that looks like. Looks a little bit better. I'm going to see what we can do with the opacity. Let's try easing in again. I think this looks a lot nicer. All right. This looks really nice. One thing that's missing us, which is this part that tells us what's going on at this point. I'd like to switch this up a little bit, make this a little nicer. The way that I'd like to do this is I'm going to come over here to this text box and I'm going to frame it as well. I'm going to copy it and paste it again, just like we did before, but not just yet, I'm going to give it an animation. This animation, it's going to be basically opacity. So it's going to fade in. It's going to slide in from the right. We're going to make it also very minimal. Let's see how it looks like now. This is really nice. Let's give it ease out. The position is a little too much. I'm going to do 20. All right. This looks really nice. Then I'm going to give it the opposite. The exact opposite. Copy, paste this and I'm going to do it here when it moves. So let's just put this back here. We'll put it in the very beginning. And then it's going to change here. As I said, it's going to be fade out and it's going to be slide out and it's going to be maybe to the left. Let's see. All right. So we just did top left. It should be just to the left. All right. And let's see about doing ease in instead of ease out if that will make it better. So I'm just going to make it liner. Yeah, it looks a lot better, to be honest. Maybe it's easing in too much, but let's see. Maybe that wasn't Alright. Maybe make it a little faster. Okay, this looks pretty good. Now what we're going to do is we're going to copy this file and we're going to paste it and then we're going to move it right here, put it a little bit before. And we're going to give it a different text. So first we're preparing files and then compressing files and then copy paste, but not from here, but rather from here. Then we'll move it. We'll put it here. Then we're going to say transferring data and then here it's going to do something as well. As I said, copy, paste it, and bring it here, and then we can bring this fade out a little bit here. We don't want them to overlap actually, like this. Then for the last animation, we're going to bring it here. And we're going to make it fade out here. Perfect, just like that. Then we're going to write finishing up. Now, let's see how it looks like from the beginning. Okay, really, really, really like how it looks like right now. My only issue with it, to be honest, is that it's going a little too fast. We can try to fix that up, but it might be a little too late for that, but let's see what we can do for now. Alright. Okay, so now we've got this. It can be a little bit complicated to navigate all of these, but try not to worry about it too much. So I'm just going to bring these here. So let's see now. Nice. Okay, I think that might be enough. Let's see now. It's not 100% consistent, and I think we have a delay in the beginning for sure. We should start preparing files. We might want to fix that up a little bit. That wouldn't be wrong at all like this. So this is the result, and I think we did a great job. The idea is, we're doing an animation that's not just random, it's not just pretty, even though it is pretty, in my opinion. It's also thoughtful. It also has some proper UX behind it, some proper thought. And this is really what makes such a thing rich in content, in depth and inusability. And that's the whole point. So I hope you learned something out of this go ahead and try it yourself, what you can come up with. Thank you very much for listening, and I'll see you in the next lesson. 18. Class Project: Create Your Own Animated UI: And now it's time for you to create your own animated interface. For this class project, you'll create and animate a small user interface or interaction using the techniques you've learned throughout this course. You can choose any type of interface or animation for this project. It could be a mobile app screen, a website section, a dashboard component, or a simple landing page animation. It's your choice. Start by designing your user interface and organizing your layers properly. And then bring it to life using animations relating to position, scale opacity and make sure to use timing and easing to your advantage to give it a more professional look and some character. Now, remember, the goal here isn't to create the most complex animation that has ever existed. Instead, try to create a clean animation that works on improving the user experience while remaining intentional, smooth, and professional. You're finished, go ahead and export your animation as a gift or a video and upload it to the project Guild. Along with the video, you can go ahead and include a short description on what you did, how you created it, what motion techniques you used for this animation and how you believe this improved user experience. 19. Congratulations! What’s Next?: Congratulations on completing the course. Now you've learned how to take static user interface design and transform it into something more interactive and intuitive that improves the user experience. Figma motion and motion design in general isn't about making things move and look beautiful and shiny, even though that is a huge plus, but it's about guiding the user, communicating feedback, and creating experiences that are generally enjoyable and intuitive. As you continue designing and learning, try to focus on the apps and websites that you use on a daily basis and understand how they use and make advantage of animations that are thoughtful, intuitive, and intentional in a way that guides you as a user and improves your usability. And if you haven't already, please go ahead and applod your projects to the project gallery. I'd really love to see what kind of creative interactive animations you guys came up with as always, if you've enjoyed this class, I'd really appreciate if you left a review. Having feedback from you guys always helps us improve and make better content for you in the future, and it also helps other designers discover our course. Thank you so much for joining me, and I'll see you in the next class.