Advanced Prototyping and Interaction Design in Figma for UI/UX Designers

1. Introduction: If you are a UI UX designer and want to take your UI design skills to the next level by mastering prototyping and interaction design, then this course is for you. Hi, my name is Arash and I'm a UI UX designer. I also teach UI UX Design at the University of Economics and Human Sciences in Warsaw. In the past few years, I helped over 40,000 students around the globe to become designers and launch their design careers. I realized that many junior designers like prototyping and interaction design skills. Which are essential for any project nowadays. That's why I created this practical course design a specifically to help you learn how to prototype and design interactive elements in Figma like a pro. We will start with the basics of prototyping and animation like what it is and why it matters, how animations are created in Figma, and the different types of UI animation. Then we will move on to more advanced topics and you will learn about the best prototyping practices in Figma, how to create complex micro-interactions, and how to make your UI elements interactive. In addition, we will craft popular advanced animations and interactions inspired by Apple products. By the end of this course, you'll be able to create over 20 different types of micro-interactions and animations for different use cases. If you are ready to master prototyping and interaction design, I'll see you in class. 2. Course Structure: [MUSIC] Hi there, welcome to the first lesson of this course. In this video, I'm going to walk you through the structure of the course so you know what to expect and how to get the most out of it. The course is split into three practical sections, basics, intermediate, and advanced. We will start with the basics of prototyping like what it is and why it matters, how animations are created etc. You will learn about different types of prototyping and we will start creating basic prototypes in Figma. Then we will move on to the intermediate level where you will learn about the best practices of prototyping in UI/UX design. By the end of this section, you will be able to create different types of prototypes including micro-interactions. Once you have learned the fundamentals of prototyping, it will be time to move on to the advanced section. In this part of the course, you will learn how to create complex prototypes and micro-interactions that will take your design projects from good to amazing. If you're familiar with Figma and its prototyping tools, you can skip the basic section and jump into the intermediate and advanced sections. To get the most out of this course, make sure to practice what you learn in the videos otherwise you will not be able to master your prototyping skills. I know that for some people, prototyping could be a little bit complicated, but there's nothing to worry about because you can always reach out to me and I'll help you figure it out. If you're ready, let's jump right in. 3. What's prototyping: [MUSIC] Before we dive into creating prototypes, it's crucial to know what prototyping actually means. Prototyping is a process that UI UX designers use to quickly test ideas for user interfaces and experiences. It allows them to create interactive wireframes or mock-ups to get feedback from users before diving into expensive development work, but why bother with prototyping? Prototype testing can save you time and money by eliminating the need for costly coding time and the risk of releasing a product or feature that nobody wants. It also helps to showcase your ideas in an interactive way so you can get valuable feedback from stakeholders, potential customers, and other important decision-makers before investing too much time and money into development. What's the best way to go about prototyping? Generally, we have two types of prototyping. Number 1, paper prototyping. This is an inexpensive and fast way to test ideas quickly, draw out each screen of your interface on paper and then use it as a basis for user testing. It's great for generating feedback early in the design process, but may not always be realistic enough when it comes to simulating real-world usage scenarios. Number 2, digital prototyping. This type of prototyping uses tools like Figma or ProtoPie to create digital mock-ups that look and feel like real user interfaces. They are much more realistic than paper prototypes. They make it easier to test usability and gain insights from users. In this course, we will focus on digital prototyping as it is essential for any UI UX design project. In the next video, we will talk about the different types of UI animation. See you there. 4. Types of UI Animation: [MUSIC] In this video, we're going to talk about different types of UI animation. From the southern like animation that you see on Instagram to the advanced scroll animation you see on Apple's website, animation plays an important role in UI design, because not only does it help to draw attention and guide users through the interface, but also it helps to create a more memorable and enjoyable user experience. Generally, we have four types of UI animation, loading and progress, state changes, navigation and micro-interactions. Let's start with loading and progress. This type of animation indicates that a process is happening in the background and it can be a good way to keep the user engaged and aware of what's happening. It could be used while the user is waiting for a response from the server or while performing a long task. Now let's move on to the state change animation. UI elements could have multiple states, like hover, pressed, disabled, etc. State animation indicates when a user performs an action like hovering over a button or clicking on a button. Consider this button. What you're seeing is the default state. But look what happens when I hover over it. You see, it became brighter. So, here we had a transition from the default state to the hover state. Next we have the navigation type. Navigational animation is used to help users navigate through the interface. It serves as a visual cue and helps to create a smoother experience when navigating through the different sections of an app or a website. Let's take a look at an example. Here we have App Store, and we have a few cards here. Look what happens when I tap on a card. You see, I was taken to the detail page, but the transition was so smooth. Imagine we didn't have this smooth transition. We could still find what we're looking for, but the experience wouldn't be that enjoyable. Finally, we have micro-interactions. Micro-interactions animation is used to indicate feedback to the user for certain actions. It could be like a pulse animation when you click on a button or a drag animation when you try to remove an item from a list. To give you an example, let's take a look at this button. When I click on it, its shape changes and we see this loading spinner, and finally this icon appears. This sequence of animations is a micro interaction animation. Now that you have a better understanding of the different types of UI animation, we can start talking about the prototyping process. See you in the following video. 5. Basics of Prototyping in Figma: In this video, we're going to start talking about the prototyping process in Figma. But before we create our very first prototype in Figma, let's see how animations are created on computers. What's animation basically? Well, it's a series of still images displayed one after the other in quick succession that takes us from one point to another and gives us the illusion of movement. In order to achieve this animation effect, computers use something called keyframes, which are basically snapshots of different moments or states in the animation process. In the past, animators had to manually draw each of these frames, which was quite time-consuming. But now keyframes can be created quickly and easily in the design software. Many animators still draw each frame of animation, and it's called the stop-motion technique. Let me give you an example. Let's suppose we want to move this car from point A to point B in two seconds. The only thing we need to do is to create two keyframes to indicate the starting point and the ending point. All the keyframes in between will be generated automatically. It's that simple. I like to call it the journey concept. But why are we talking about all these? Because the same concept can be applied when creating prototypes in Figma. Let's take a look at these two screens. What we want to achieve is to make this button interactive so that when I click on it, I should be taken to the next page. Let's use the journey concept here. What do we need? We need the starting point, which happens to be the left screen. We also need the ending point or the destination, which is the right screen. Finally, we need to specify the duration of this transition and we're done. Now when I click on this button, I'll be taken to the ending point immediately. This is the simplest form of animation. If you really comprehend this journey concept, I assure you you can create complex prototypes with ease. Now let's create a new design file in Figma and see how you can create a simple prototype. Since the main objective of this course is not to teach you UI design, I already prepared the design files, so we could just focus on the prototyping process. To proceed with the course, you need to download the project I prepared for you and import it to Figma. To do that, you just need to drag this file and drop it into your Figma dashboard. Now let's open it up and see what we have here. For each lesson, there is a page right here, and inside each page, you can find the required assets for that lesson. Within this project file, if you head over to the Pages section and you open up this page, basics of prototyping in Figma, you can find these frames inside this page that I already prepared for you. Here at the bottom we have one more frame. But basically, we're going to use these frames to create a simple prototype. One thing you need to keep in mind when it comes to creating prototypes in Figma, is that the way you can create prototypes is by using frames. You cannot just connect a simple shape to another shape in Figma. It's not going to work because that's how Figma creates prototypes. Whenever you want to create a prototype, you need to make sure to have a frame. Here as you can see, I have a homepage frame and this icon in the layer's list indicates that this is a frame, it's not a rectangle. Let's start by creating a very simple prototype, a navigational prototype. It's quite popular. Imagine you design this website and here you have a few cards, here you have this navbar, and you have these links, and you want to connect these pages together. In that case, you can create a navigational prototype, and it's quite simple. The only thing you need to do is use the journey concept. You need to know your starting point and the destination and create a connection between these two points. Here we have this Contact Us button, right in the navbar. The way it should behave is like this. When I click on it, I should be taken to this Contact Us page. Let's create this simple interaction. First, we need to select this button as our trigger, because most interactions need a trigger. There are some exceptions that we will talk about in the upcoming videos, but most of the time we need to have a trigger. In this case, this Contact Us button is going to be actionable. This is going to be our trigger. I'm going to select it here. Then I'm going to head over to the Prototype tab right here. As soon as you head over to the Prototype tab, if you hover over the boundary of this element, you see this plus icon appears. This plus icon allows you to create a connection between the starting point and the destination. Now I'm going to zoom out. Our starting point here is this homepage frame. We don't need to change anything and our destination is going to be this Contact Us page. While this button is selected, I'm going to hover over this button. I'm going to click on this plus icon and drag just like this. As soon as you do that, this arrow appears and it allows you to connect these two frames together. Now if I hover over this frame, as you can see they are connected just like this. As soon as I drop it there, this Interaction details window pops up. I'm going to close it down for now. We are going to get back to it in a few minutes. We just created a very simple interaction. As you can see now here right next to the name of this frame, we have this box and inside we have flow one. We've created a flow, but what's a flow? Imagine you have a complete design, it could be a website or an app, and you want to connect all pages together. Usually what we do is we create different flows within our prototype so we could play a specific flow whenever we need to. A flow is basically a network of frames that are connected together. Imagine you designed an app, and you want to prototype the sign-in and the registration process. You want to prototype the whole user journey for that particular flow. In that case, you create a flow for creating an account for logging in, for logging out. For another part of that app, you can create another flow, for example, when the user clicks on a product and he or she should be taken to the detail page of that product. It could be a totally different flow. It's within that prototype, but you have different flows. If you need to just preview one specific flow, you don't need to just start from the starting point of your prototype and just go through all pages. That's why we have these flows. Now, I'm going to hit this Play button right there, and we will be taken to the Preview page. Now, if I hover over this button, as you can see my cursor changes to this pointer icon, which means that now this element is actionable. It's interactive. Here, I'm going to click on it. There we go. I was taken to the Contact Us page. This is the simplest form of prototype in Figma. We just created this connection between these two pages. But what if we want to take it to the next level? What if we want to animate it? Because at the moment, there is no animation here. Look, as you can see, as soon as I click on it, I'll be taken to this Contact Us page instantly. To do that, we need to adjust the preferences of our interaction. Here we created this interaction and now it's time to adjust the preferences. To do that, you just need to select this button, this Contact Us button. All right, make sure that it's selected in the layers list. Here on the right side, as you can see, we have this interaction section. Right under it, we have this click interaction that we just created. If I just click on it, this Interaction details window pops up. Alternatively, you could just click on this arrow and this window pops up. That's totally up to you. Let's see what we have here. Right at the top, we have this drop-down menu which allows us to specify the type of trigger we are looking for. We have different types of triggers. We have On click, On drag, While hovering, While pressing key, Gamepad, mouse, Enter, Mouse leave, etc. Here we have this after delay trigger which is not enabled by default. We will talk about it in the upcoming videos. Don't worry. For this interaction, we need this on click trigger, because we want to make sure that this button is clickable. We don't want to set the trigger to While hovering because if I set it to While hovering, as soon as I hover over this button, I'll be taken to the Contact Us page, and that's not what I want. The trigger is On click. Here we have the type of transition. As you can see, it says Navigate to, we have again, different types of transitions. Most of the time we need to set it to Navigate to, because we want to be taken to the destination from the starting point and, here as you can see the destination is specified Contact Us page. You can adjust it if you want, but since we connected this button to this Contact Us page, here we have Contact Us. So far, so good. Here at the bottom we have this animation section, which is very important. This section allows you to adjust the type of animation you are looking for. Here by default, it's set to instant. That's why when I clicked on this Contact Us button here, I was taken to this page instantly, because the type of animation here is set to instant. If I open it up, you can see that we have different types of animation. We have dissolve, we have smart animate, move in, move out, push, sliding in and slide out. Well, let's change it to dissolve for a second. As soon as I do that, these two options appear. Here we have the easing method or the velocity of our animation. We're going to talk about it in a few minutes. For now, I'm not going to change it, and here we have the duration. When it comes to creating micro-interactions, the unit is usually milliseconds, so here we have 300 milliseconds. If you want, you can increase it or decrease it. If I want this transition to happen in precisely one second, I need to increase this value to 1,000 milliseconds, just like that. Now, if I play this flow once again, look what happens. I'm going to click on this Contact Us button and there we go. Now we see this dissolve animation, and it's happened in precisely one seconds. The duration of this transition was one second. Depending on how fast or how slow you want your animation to be, you can adjust this value here. Now let's change the type of animation here to move in. As soon as I do that, as you can see, we have these arrows. It allows you to specify the direction of this animation. Here in this window, you can preview your animation. As you can see, it shows that B moves into the A screen from right to left. You can set it to, from left to right, from top to bottom and from bottom to top. I'm going to leave it as is, and now if I just click on this Contact Us button, look what happens. There we go. This second page moves into our first page. We can set it to move out, push, sliding, and slide out as well but these are not that important. You can go ahead and give them a try. Now let's create another simple interaction. Here, as you can see, we have this project page, and here on the home page we have these recent projects. Imagine you want to make this card, this project one card interactive. To do that, as you know, you just need to select this group, Project 1 and while you are in the Prototype tab, you need to just create a simple interaction and connect it to your project page, just like this. Here, again, you need to specify the trigger. I'm going to set it to unclick. That's fine. The type is going to be instance. I'm not going to animate it now. Here, if I just click on this card right now, as you can see, it's an interactive. Up until now you learned how to create a simple connection between two different frames. Now we're going to talk about another feature of Figma, which is this smart animate option. It's very powerful. It allows you to create complex micro-interactions in seconds. Let's go ahead and see how it works. Well, I'm going to scroll down here, and as you can see, I already prepared this frame. Inside, we have this circle, and also we have two texts layers, A and B. Nothing fancy here. Well, let's see what we need to achieve. Imagine you want to move this circle from point a to point B. How should we do that? Well, just think of the journey concept we talked about before. For any animation, you need to have the starting point and the ending point, and finally, you need to connect them and specify the duration, or let's say the speed of your animation. Well here we have our starting point. This circle is placed right here at point A. Now we need the destination. For that, I'm going to go ahead and select this frame, this smart animate frame and I'm going to duplicate it. Hit Control D or Command D. Here, we have two identical frames, now. Now, on this second frame on this duplicated frame, I'm going to select this circle and I'm going to move it to point B. Hold down the Shift key and just move it to the right side, just like this. Now we have our starting point and our destination, our ending point, and the next thing we need to do is to just connect these two frames together. But what should be the trigger of this animation? For now, I'm going to select this circle as our trigger. Once I click on it, it should be moved to point B. Now I'm going to select it and I'm going to hit over to the Prototype tab and let's connect these two frames together. To understand it easily, I'm going to select this frame here, and just in the layer's list, I'm going to rename it to A as our starting point and this one is going to be named B. We created this interaction. The trigger is unclick, that's fine, but the type of animation is set to instant. I'm going to change it to smart animate. The way this smart animate works is like it takes your starting point and your destination and it creates the key frames in-between automatically. You don't need to worry about what's going on in between. You just need to tell Figma, this is going to be our starting point and this is going to be my destination. Just take this circle to this point in one second, for example or less. Here I'm not going to change the duration, that's fine. Now we have the second flow. I'm going to hit Play, and let's see how it works. As you can see here, you have a list of flows, so you can easily move between these flows if you want to. Here, if I click on this circle, look what happens? There we go, it moved from point A to point B. It works perfectly. Now imagine you want to make this animation faster. To do that, you just need to select your interaction and adjust this duration here. I'm going to decrease this amount to 500 milliseconds. Let's give it a try. There we go. It's much faster now. There is an important point that you should keep in mind about this smart animated feature. Well, when you use smart animate, the name of your layers matters. Here is why, here on this A frame, as you can see, we have the circle, we have these two texts layers. On this second page, we also have circle A and B. That's why the animation works properly. If I change the name of this circle on this second screen, on this B frame to something else, let's change it to, let's say Circle 2. Now we just broke the connection between these two elements. Figma now thinks that these two circles are two separate circles, and that's not what we want. Look what happens if I play this animation now. I'm going to click on it. You see that, we don't have that animation anymore because we just broke the connection between these two screens. You need to keep this point in mind. Many people make this mistake. They create their starting point, they create their ending point, and they connect everything properly however, the animation doesn't work. That's because they don't have the same layers names on both these screens. Please keep this point in mind, it's very important. Now that you learned how the smart animate works. Let's talk about the easing method, here, this option that we skipped. If I open up this drop-down menu, as you can see, we have many different options and these are very important, especially when you want to create a realistic micro interaction. But why are these so important? Well, by default, chances are this linear option is selected for you. Well, these easing methods define the acceleration of your animation, but what does it mean? It's so confusing. Let me explain. Here if I set it to linear, and I play now, now I'm going to click on this circle.. We forgot to change the name here, so let me remove this two here, just like that, and I'm going to click on it once again. There we go. I'm not sure if you've noticed or not, but now we had a linear movement. What does it mean? It means that the speed of this animation is constant and it's not realistic because objects don't move with a constant speed. That's why we have all these other options. If I just select this interaction, here we have ease in, ease out, ease in and out, etc. Here we have gentle, quick, bouncy, slow, custom spring. These different easing methods allow us to make our animation look much more realistic. If I change this easing method to easy now, the way this animation plays is like this, it starts with a lower speed and then as it approaches the destination, it speeds up. Just like this, you see, it's much more realistic, isn't it? If you change the easing method from ease in to ease out, you will get the opposite. It starts fast and then it slows down. Let's give it a try. There we go. Obviously you can go ahead and check out every single one of them depending on the use case, you can change this easing method to whatever easing method you want. In the upcoming videos, I'm going to use a few of them to show you how you can utilize them properly and make your micro-interactions look more realistic. But if you want to get the definition of every single one of these easing methods, you can head over to the Figma website. Here they have a blog post and they explained every single one of these easing methods. As you can see, we have this linear movement. We have ease in, just like this. Then we have ease out and so on and so on. You can take a look at this page, if you want to. I'll put the link in the resources section for your reference, and that's basically all about smart animates. In the upcoming videos, you will learn how to utilize this smart animate properly to create complex animations. I'll see you in the next video. 6. Animated Like Button: [MUSIC] Welcome back. In this video, we're going to create this animated like button in Figma. That's what we are going to achieve. I want to make this icon animated. When I click on it, this animation plays just like this. Let's get into it. Within the project file, you imported to Figma already, I'd like you to go ahead and find this page Animated Like Button. Inside you can find two different icons. Here we have two types of icons: we have an outline icon and a solid icon. We need both of these icons for this animation. Why? Because we need to have two different states. Let's go ahead and create a frame. I'm going to hit A on my keyboard to select the frame tool. Here I'm going to create a custom size frame, something like this should work. Let me rename this frame to A, as our starting point. I'm going to go ahead and duplicate this icon and bring it inside this frame. Make sure that it's placed inside your frame when you check out your layers list. I'm going to go ahead and align it to the center in the alignment section, just like that. That's going to be our starting point. Now, if you think about the journey concept that we talked about before, you know that we need a destination as well. For the destination, I'm going to go ahead and select this frame. I'm going to hit Control D or Command D to duplicate it. Here in the destination, we need to have this solid icon. I'm going to duplicate it and bring it right here. I'm going to make sure that it's placed right above this outline icon in the layer's list. In your layer's list you need to have something like this. Heart solid, which is placed above heart outlined. I'm going to name this frame B. We have our starting point, we have our destination as well. Here's the thing. If I go ahead and select this icon and make it interactive, we won't get this animation just like this. Why? Because here in our starting point, we don't have this solid icon. We only have this outline icon. Let me show you how it works. If I just make this outline icon interactive, I'm going to select it, head over to the Prototype tab here. I'm going to hover over this boundary here and try to connect these two frames just like this. Once this Interaction details window pops up, I'm going to make sure that the trigger is set to On click. Because I want this icon to be clickable. Here it says navigate to. Here we have our destination frame B. That's fine. The type of animation should be Smart animate. But here's the thing, if I just go ahead and play this flow, look what happens. Let me make it a little bit larger. I'm going to make sure that it fills the screen just like this. I'm going to click on it. You see that it just fades in. Because we don't have this solid layer in our starting point. How can we fix that? To fix that first, we need to just grab the solid icon copy it, hit Control C. I'm going to select this frame and paste it here, hit Control V or Command V. But we don't want it to be visible on this page. What can we do? We need to somehow make it disappear. If you take a look at this animation here, you see that our solid icon scales up quickly and then we will see this state. I'm going to select this solid icon here. I'm going to hit K on my keyboard to select the scale tool. If I go back to the design inspector, you will see this scale section appears here. I'm going to set the scale here to 0.01 to make sure that this solid icon is not visible. You need to make sure that your layer's names are the same on both pages. You see here I have heart solid, here I also have heart solid. Heart outlined and heart outlined. That's so important. Otherwise, Figma can not figure it out. Now let's check it out and see how it works. I'm going to click on it, so far so good. We have our solid icon scaling up just like this. But here we have a few issues. First, it's so slow. When it comes to micro-interactions, speed matters. Otherwise, instead of creating a good interactive element, you are going to make a bad user experience because nobody wants to wait for this icon to be animated slowly. It should be quick. Let's fix the speed first. I'm going to select this, go to prototype. I'm going to click on my interaction here and let me modify the speed here to 100 milliseconds instead of 300 milliseconds. Let's give it a try once again. Much, much better. But if you take a look at this icon that I already showed you, there is one difference between this icon and this one that we just created. If you pay enough attention, you can see that this icon scales up and then it scales down a little bit to have this bounce effect. How can we create that? Well, to create that, you may say that we can go ahead and change the velocity here. Instead of ease out. You may say we can set it to bouncy. Let's see if it works. You see the issue. We get our bounce effect. However, as you can see, this bounce effect repeats a few times quickly. That's not what we want. I don't want it to repeat multiple times. That's what I want to achieve. If I click on it, it just scales up, and scales down. We cannot use this balance effects really here. I'm going to set it back to ease out. What we can do is this. We could have a third page here, a third state. I'm going to select this B-frame, duplicate it, hit Control D or Command D, and I'm going to call it C. You need to make sure that there is no connection between this page and this C page. We want to go from A to B. Then here on the B frame, I'm going to scale this solid icon up. I'm going to select this solid icon, hit K and just scale it up here, maybe to 54 something like this. Then we're going to go from B to C quickly. We click on it, our solid icon scales up and the dimension will be changed to 54 by 54. Then we go from here to here, and it scales down to 44 by 44 pixels, our initial dimension. In order for this to happen properly, we need to have an after delay trigger. To do that, I'm going to select this whole frame inside of this icon. I'm going to head over to prototype and then connect these two frames together just like this. Here by default, the trigger is set to On click. I'm going to change it to after delay. It should be Smart animate, and the duration is going to be 100 milliseconds. Now it should work properly. Let's give it a try. I'm going to click on it. Here we have an issue. The problem is this after delay. We need to set it to one millisecond because we want to go from this state to this state instantly. We don't need to have any delay in between. Let's give it a try once again. There we go, but it's still too slow, don't you think so? Let's fix that. I'm going to select this outline element here, head over to interactions, click on it. Here we have 300 milliseconds. I'm going to decrease it to 100 milliseconds. Let's see if it works fine. Now it works just fine. But I want it to work both ways. When I click on this solid icon, I want to be able to get back to my starting point. I'm going to select this solid and we just need to create a connection from C to A. It's going to be On click, Smart animate and 100 milliseconds. I think we are done now. I'm going to click on it. There we go. It works just fine. That's basically how you can create an animated like button. But here's the thing. We made this icon interactive. But how can we reuse this interactive element? Because if you want to use this approach, every single time we want to use this icon, we need to animate it again and again every time we want to use it in our project, which is very tedious and time-consuming and it doesn't make any sense. Instead, we need to find a way to make it interactive once and be able to reuse that interactive element multiple times. To do that, we need to use something called interactive components. If you don't know anything about components, variance and interactive components, don't worry. In the next video, I'm going to show you what variants are and how you can make your components interactive. I'll see you in the next one. 7. Variants & Interactive Components: [MUSIC] Here we are. I created a new design file and I'm going to go ahead and create a button. But before we create our button, I'm going to mention that we have actually two different types of variance. We have one-dimensional variance and two-dimensional variants. We're going to start with one-dimensional variants examples. Then as you get used to variants we will talk about the more advanced and two-dimensional variants as well. In order to create a button, you may tend to create a rectangle, then add a label to it and style it. That's fine. However, there is a better way to do that, and that's by creating a frame. First, I'm going to go ahead and hit T on my keyboard to select the Text tool. I'm going to create a text layer right here. Let me zoom in and I'm going to write button. Let me go to the text section on the right side. Here I am going to adjust the weight to probably medium and a size to 17 points and here I can set the height to 100 percent for now. I'm going to change the align to align middle. Now that our label is ready, I'm going to add auto-layout to make it responsive. To do that, I'm going to hit Shift and A on my keyboard. As soon as I do that, it will put this label into a frame. As you can see here, it says Frame 1 and here we have this Frame 1 in the layer's list as well. Well, in the auto layout section on the right side, I'm going to change the alignment to middle left. Also here we can adjust the horizontal padding, vertical padding, and also spacing between items. Well first, let me go ahead and add a field to this frame. I'm going to add a field here and let me adjust the color to something like purple. Maybe something like this should work, nice. Then I'm going to change the text layers color here. I'm going to set it to white to have a better contrast. Finally, I'm going to select my frame and I am going to increase the corner radius amount here to make it a little bit rounded, probably something like four pixels. Let me rename this frame to button. Perfect. Now let's go ahead and adjust the padding here. I'm going to set the vertical padding to 16 pixels and the horizontal padding to 32 pixels. Our button is ready and it's completely responsive. I can go ahead and adjust the label. However, I'm going to keep it as is for now. Now imagine you want to create different states of this button and you want to keep everything organized. To do that in order to be able to reuse this button, first, we need to convert it to a component. To do so, we need to select it and we can click on this Component icon here, just like that. Now as you can see, the frame, this boundary turned purple. Here you can see in the layers list, we have this four-diamond icon as well, indicating that this is a components now and you can easily go to Assets and find your local components. We can reuse instances of this component. But how can we create variants? Well, there are many ways to create variants. First, you can create different components, name them, and then turn them all into a components set. Or you can just select your first component here and just click on this button, Add variant right in the toolbar. Let me go ahead and do that. As soon as I clicked on that button, you can see that this components set has been created. Here we have this dashed boundary indicating that this is a components set. Here in the layers list, you can see that the name of our components set is button. Inside we have two variants. We have default. This is our base variant. Also, we have Variant 2. It has been duplicated for us because we clicked on that button here, Variant. Now we can go ahead and adjust the styling of this second variant. But before we do that, I'm going to explain to you how variants work. Well a components set, if you just select it, has different properties. If you just take a look at the right inspector, right here, you can see this Properties section, and here we have Property 1. If you want, you can go ahead and rename it, and we're going to do that to keep everything organized. But the way variance work is that you create different properties and then you set different values for those properties. Let's suppose you want to create different states of this button. Default, hover, pressed, disabled, etc. The name of our property is going to be State. Now, that's my components set is selected, I'm going to head over to these properties here. We already have this Property 1. Figma already created it for us. I'm going to double-click on it and I'm going to rename it to State. The name of property is state. If I just click on this icon here, Edit property you can see that the name of this property is state and we have two values inside, default here, the first one and Variant 2. A property can have multiple values, for example, default, hover, pressed, disabled, etc. Now, as you may guess, we need to go ahead and select our second variant. Here instead of Variant 2, I'm going to rename it to Pressed, just like that. I'm going to go ahead and adjust its color. I'm going to add an overlay layer to it. The opacity is set to 20 percent. That's fine. Now we have two different variants. But what if you want to add more? Well, you can just select these components set and click on this plus button here. Or you can select one of these variants and hit Command D or Control D on your keyboard to duplicate it. That's up to you. Now we have State 3. You see, I'm going to select it and I'm going to adjust its value to Hover. Then let me go ahead and change the field here. I'm going to change the color of this overlay layer to white. This is going to be our hover state. I'm going to create one more. I'm going to hit Control D to duplicate. Here this time I'm going to create a disabled variance. I'm going to select it. Let me go ahead and change its value to disabled. Then I'm going to go ahead and change its color to probably light gray, something like this should work. Now if I select these components set, and if I click on this icon, you can see that this property state has four different values, default, pressed, hover, and disabled. But how can you utilize these variants? That's so simple. Just like using a component, you can simply go to Assets. From here, you are going to create an instance of your component just like that. Here we have our button and on the right side you can see that we have this state property, and here we have this drop menu. We can change it to pressed, we can change it to hover or disabled. Can you see how easy it is to create variants in Figma? That's awesome. That was an example of one-dimensional variants. But how can you create multidimensional variants or two-dimensional variants? I'm going to go ahead and move these components set to the left side and I'm going to make it a little bit larger. Now let's imagine you want to create a new version of these buttons. However, this time you might need to add an icon to it. What I'm going to do is this. I'm going to select them all. Of course, you can do it one by one, but I prefer to select them all. Then I'm going to duplicate them, hit Control D or Command D, and just move them right here. Now we need an icon. You can use whatever icon you want. I'm going to go ahead and run the contents real plug-in here. Let me do it quickly. Using this plug-in, I'm going to add a few icons here to my project. Let me go to Icon, field. I think this icon looks good. I'm going to drag and drop it right here. I'm going to drag and drop another icon for our next example. Let me just look for a good icon. Let's look for the home icon, this one, it looks very good. Great. Now let's imagine you want to add an icon to this button. Since we made this button using auto layout, we can easily select this frame and we can just drag it and drop it into our button. But I'm going to go ahead and duplicate it first because I'm going to need these icons for our next example, and then I'm going to drag it and drop it here. As soon as I do that, you can see that my buttons height has been adjusted as well. That's not what I want, I just want this button to grow horizontally. To fix this issue, we need to select this button and from here I'm going to change the vertical resizing option to fixed height. This way, when I add more components or more elements to this button, it only grows horizontally, not vertically, and that's exactly what I need. Now if I just drag and drop it into this pattern, as you can see, the height stays the same, and let's do the same thing for these buttons. I'm going to select them all, change this option to fixed height. Now let's select this icon, change its color to white, and also I'm going to select this button and set this spacing between items to eight pixels. I can select all these buttons and set this value to eight. Now I'm going to select this icon, copy it, hit "Ctrl" "C" or "Command" "C". Select this button, hold down the "Shift" key, and select these two. Then hit "Ctrl" "V" or "Command" "V". However, we need to adjust their position. While they are selected, I'm going to hit the left arrow key on my keyboard to put them on the other side of my label and as you can see, my buttons are ready. However, we are not done. We need to create another property for these components set because we created the state property now we need to create another property for icons. How can we do that? As I mentioned before, in order to create a property, you need to first select your components set, and then here, I'm going to click on this plus button, and here it says create new property variant. I'm going to click on this "Variant" option and this window pops up. I'm going to name it with icon and then for the value, instead of naming it default or whatever else, I'm going to name it true and then create this property. I'm going to explain to you in a second what it means. Now that we created this new property, we need to go ahead and select our variance, these buttons, and we need to set the correct value for this new property. These four buttons don't have any icon. I'm going to hold down the "Shift" key and select them all, and set this with icon value to false. For these buttons, they are already set to true, but here we have another issue. As you can see, as soon as I select this button for the state property, the value is set to State8. We need to set it to default. This one we need to set it to pressed. This one we need to set it to hover and finally, this one to disabled. Now let me show you how those true false values work. Those are called Boolean values, and the way they work is like this. If I select this instance of this button, now you can see that I have two properties. I have the state, I can set it to default. Now I have this with icon property, and here instead of a drop menu I have this toggle button. The reason I've got this toggle button is because I named the value true and false. Figma automatically understands that you might need a toggle for these true and false values, those Boolean values and that's so helpful because here I can simply toggle it on and off just like that, and it works for all of these state. You see? That's how you can create multidimensional variance in Figma. Now let me show you another example. Let's suppose you want to create a radio button. In fact, let's do it together. I'm going to go ahead and create a frame. If I hit "A" on my keyboard I can select the frame tool and I'm going to hold down the "Shift" key, left-click and drag to create a frame. I'm going to set the frame size to 16 by 16 pixels, just like that let me zoom in, and then I'm going to make it completely rounded. I'm going to increase the corner radius value and let me rename it to radio button. Now I'm going to add a stroke to it and let me change its color to our purple. This is going to be the unchecked variant. I'm going to duplicate it, select it, hit "Ctrl" "D" or "Command" "D" to duplicate. Now I need to create the checked version, so I might need an ellipse. I'm going to hold "Alt" and "Shift" to create an ellipse proportionately, and let me just align it right in the center, just like that. I'm going to make it a little bit larger and then I'm going to change its color to our purple as well. I'm going to show you the other way of creating a component set now. Let me go ahead and select this radio button, and I'm going to rename it here. Here we have radio button then forward slash unchecked. For the other one, I'm going to write radio button forward slash checked. Using this naming convention, you can easily create different components and then turn them into component set and Figma will automatically create properties for you. Let me show you how it works. I'm going to select this one, turn it into a component, this one as well, turn it into a component, so now we have two different components here. Now if I select them both, here you will see this option. It says combine as variance. If I click on it, look what happens, there it is. Now we have a component set with two variants inside. The name of our component set would be whatever we wrote before the slash, as you remember, we wrote radio button forward slash checked and then radio button forward slash unchecked. Radio button is going to be the name of our components set and whatever we wrote after the forward slash is going to be the value of our property. We didn't create any property, but Figma did automatically. If I select these component set you can see we have Property 1 and we have two values, checked and unchecked. Here I can simply rename it to state and now I can simply create an instance of this radio button and here we have two different states, checked and unchecked. That's amazing, isn't it? But you may ask, can we use that toggle button here as well? Yes, if we change the values of our property to true and false, you can get the exact same toggle button here as well. Let me prove that to you. If I select this one and I set the state value to false, and then I select this one and set the state value to true, now I can select this instance, and there it is, we get this toggle button. Now that you understand how variants work, I'm going to talk about when you should not use variants. Well, I can see that many designers make this mistake of creating hundreds of variants with different icons. Well, let's suppose you create this button with this icon, and then you decide to have different variants of this button with 5, 10, 20 different icons. In that case it's not a good idea to use variants, because instead of solving a problem, you are creating a new problem. This way it's going to be so hard to organize everything. Instead, what you can do is utilizing a component property because we have variant properties and also we have component properties. We talked about variant properties, we created a few here, as you remember, now let's talk about component properties. Well, let's suppose you want to use these two icons. It could be as many icons as you want, but in this example, two is sufficient. I'm going to select this one. Let me go ahead and rename it to icon/checkmark. This one, I'm going to rename it to icon forward slash home. Now, I'm going to select them both, and I'm going to change their color to white as well. Then I'm going to turn them into a component. I'm going to select this one, turn it into a component, this one as well. If I go to assets, now I have this icon as well, this icon category. Now I'm going to use these components inside my button. I'm going to go ahead and remove these check-marks here from my buttons just like that. Let me select one of them, probably this one, duplicate it to create an instance, and just drag it and drop it inside our button. Now, I'm going to double click on this icon, and I'm going to head over to this section. If I just click on this button here, this window pops up and it says , "Create component property." I'm going to name it icon. Here, for the value, you can see we already have this drop menu. It has checkmark and home. If I click this "Create property" button, then here you will see these purple tag. It says icon. Now, while this icon is selected, I'm going to hit "Control-C or command C," then I'm going to select all these buttons, hold down the Shift key to select them simultaneously, hit "Control V or command V," and then hit the left arrow key on your keyboard to change the position of these check marks. Let me show you what's the difference now. If I select this instance of our button that we already created, here on the right side, we have another property. This one is a component property. If I want to change the icon of this button, I can simply adjust it here to home. You see I didn't create four other variants inside my component set with this new icon. That doesn't make any sense. Keep this example in mind whenever you want to create a huge design system. That's going to be so helpful. You created these different sets of this button. Now, you want to animate them. The way we usually do that is by duplicating our screen and adjusting our button and connect those screens together. But that's not the case anymore because we have this awesome feature or Figma called interactive components. Let me show you how it works. Here inside our component set, I'm going to select my base button, this one. Then I'm going to go to the Prototype tab. From here, I'm going to create a connection between these two buttons just like that. Here inside this interaction details page, I'm going to set the trigger to on click because this is our pressed variant. As you can see, you have access to the properties you just created here as well. That's awesome, isn't it? Then let's go to animate, and I'm going to set it to smart animate. Here, I'm going to set it to ease in and out back, 300 milliseconds is fine. Now, I'm going to create another interaction. I'm going to connect this base button to our hover button. This time I'm going to set the trigger to, while hovering, because this is our hover state, and the animation is going to be smart animate, and we're good to go. Now, let me select this button here. I'm going to change its state to default. The icon is going to be checkmark. Now, let's go ahead and see how it works. But before we do that, in order to be able to preview this component, first, we need to put it inside another frame. I'm going to hit "A" on my keyboard, create a frame, and just put it inside, just like this. Now, I'm going to select this button and I'm going to remove its icon because we didn't prototype these variants yet. I'm going to test this button. Let's select this frame now and hit the play button right here. Now let's see what happens if I hover over this button. You see we have this interactive button now. Now that you learned about interactive components and variance, let me show you how you can animate this icon using interactive components instead of using this approach, which is not good at all. I'm going to get rid of all these frames. Instead, we're just going to use these two icons here. Here is what we're going to do. I'm going to select this outline icon, and I'm going to head over to my toolbar and just click on this little icon which says "Create components." Now, I have a component. If you take a look at the layers list, you see that its icon changed. Also we have this purple color, which indicates that now we have a component. If I select this component and I head over to the toolbar, you see that we have this new icon with this plus icon in the middle. It says "Add variant." Now, we're going to add a variant to this component. Now, we have this component set. Our component name is heart, that's fine. We have one property here. We have property 1, and the value for that is outlined. Then we have property 1 and the value for that is variant 2. I'm going to go ahead and rename these properties and their values. I'm going to start with this one. If I just double click on this layer's name, I'm going to change it to state equals to default. For the next one, I'm going to type state equals to pressed. We need one more variant, just like what we did before. I'm going to just select this one, for instance, and click on this little icon. Alternatively, you can hit "Control D" to duplicate it. I'm going to rename this state here or here. It doesn't matter to complete. That's going to be our destination. What do we need to do? Just like what we did before using three different frames, we're going to go from our starting point to the destination here. I'm going to need to put this solid icon inside all of them. Let me just drag it and make sure that you drop it inside this variant here and just align it to the center. It's been placed here. I'm going to hit "Control C" to copy it, select this pressed variant, and hit "Control V" here to paste it inside. But in this state, we need to make it a little bit larger. I'm going to hit "K" to select the scale tool and just make it much larger, something like this. Let's paste it inside this default variant as well. I'm going to scale it down. While it's selected, just type 0.01 here to make it disappear. Now, if you head over to assets, you will be able to find this heart component under this animated like button here. You can start using it. To do that, you just need to have a frame. Just hit "A" and just create a frame just like this. Drag and drop it inside. But it's not interactive yet. If I go ahead and select this frame and I hit "Play," you can see that it's not interactive. If I just click on it, nothing happens because we didn't make any connections between these states. Let's go ahead and do that. We just need to select this default, head over to prototype, and we just need to connect it to this second variant, this one pressed. Make sure that you have the state set to pressed. Do not connect it to this heart, solid one, otherwise it won't work properly. Here, you need to have state, pressed and smart animate, 100 milliseconds. That's fine. Now, I'm going to select this pressed, create a connection between these two. Now, here, we have state complete. That's fine. Smart animate, 100 milliseconds. But the trigger should be changed from on click to after delay, and the delay should be set to one millisecond. Finally, we need to select this complete state and just connect it back to our default state. It should be on click, default, 100 milliseconds. Now, if you go ahead and try to preview it, it should work just fine. You see that? From now on, whenever you use an instance of this component anywhere in your project, it will be interactive by default. That's all for this lesson. I'll see you in the next one. 8. Animated Buttons: [MUSIC] In this video, we're going to create an interactive button together. Although you already learned about making your buttons interactive in the video about interactive components, we didn't really dive into creating an advanced interactive button, like what we have here. In the video about interactive components, you learned how to change the state of your button from default to hover just by changing the color of your button. But in this video we're going to take it to the next level. Here's what we're going to build. As soon as I hover over this button, a circle scales up to fill the hole available space within this button, and also the text color should be changed. If I click on it, I see the pressed state. That's exactly what we're going to create. If you go to the Animated Buttons page within the project file, you can find this button. I didn't use auto layout for it because first I'm going to show you the simplest form of creating an interactive button. Then I'll show you how you can make an auto layout frame interactive as well. First let's see what we need. If I just hover over this button, you can see that a circle scales up quickly. We need a circle in the default state, but it shouldn't be visible. Then in the hover state, we need that circle to scale up, and fill up the whole available space within this button. Let's see how we can do that. First, I'm going to turn this group into a component. If I just click on this "Create Component" button in the Toolbar, and then I'm going to click on this plus button to add a variant to it and basically create a component set. Here we have one property with two different values. I'm going to go ahead and rename this Property 1 I'm going to just rename it to State equals to Default. Then for the second one, I'm going to have State equals to Hover. So far, so good. We need one more variance for our pressed states, but we're going to create it in a few seconds. First, let's go ahead and create that circle. To do that, I'm just going to create a perfect circle outside this component set. Hold down the Shift key to create a perfect circle. Just like this. Then I'm going to make it white. Then in the Layers list, I'm going to drag it and drop it inside my default state. Just like this. We can't see it because we need to move it right here. As you can see, this circle is inside this variance. However, it's not masked inside this button. That's not what we want. We want it to be masked inside this button. We don't need to see this area outside this button. To fix this issue, we can simply select this variant in the layer's list and head over to the design inspector. As you can see here, we have a checkbox which says Clip Content. If I just check it, there we go. Now we have this circle masked inside this button. That's exactly what we need. The next thing we need to do is to scale this circle down dramatically to make it disappear, I'm going to hit "K" on my keyboard to select the scale tool. On the right side here, I'm going to just start typing 0.01. Hit "Enter." As you can see, it's no longer visible. Then I'm going to select this layer Ellipse 1, hit "Control C or Command C". Select this hover state, this hover variant, and paste it there, hit "Control V or Command V". It's right there, but we can not see it. Now in this state, I'm going to hit "K" on my keyboard to select the scale tool. I'm going to scale it up just like this, until it takes up the whole available space within our button. But don't forget to select your variance and check this clip content checkbox. Here we have an issue. This circle is placed above our text layer. That's not good. I'm going to go ahead and here, I'm going to select this circle and bring it down and put it below our texts layer in the layers list, the same thing here as well. But still we cannot see our texts and that's because our texts here is white as well. Now, on the hover state, as you can see, our text should be dark gray. I'm just going to go to the field section here and just make it very dark gray, just like that. So far so good. But what about the pressed state? For the pressed state, we just need to have a darker version of our hover state. To do that, I'm just going to select this hover state, hit "Control D or Command D" to duplicate it. Then here I'm going to change the value of this state property to pressed. Next, I'm going to just double-click on it to select our circle, this Ellipse 1 layer, head over to the fields section, hit this plus button to add an overlay layer to this particular variant. Here make sure that this new field that has been added to this particular variant is black and just increase the opacity to 30 percent. Now we have three different states. We have default, hover and pressed. The only thing left is to just connect these three different states. I'm going to start with the default. I'm going to select it, head over to the Prototype tab and simply connect these two just like that. Here it says change to state hover, smart animate. If I set it to 100 milliseconds, it would be too fast. It would be quite hard to really see the animation and see what's going on. I think 200 milliseconds is a good spot for that. I'm going to keep it as is. Next, I'm going to select the hover variant connect it to the pressed variant. Here again the same preferences, and click change to pressed, smart animate. Now to see whether this button works as expected or not, we need to just create a frame here. I am going to hit "A" on my keyboard, create a simple frame. Head over to the Assets tab, just drag and drop this component into this frame. I'm going to align it to the center. I'm going to select this frame, hit the play button to preview this particular interaction. I'm going to hover over it. As you can see, nothing happens. I guess we didn't change the trigger to hover here. Let me select this. Yes, it should be changed to while hovering and now it should work just fine. Cool. But since the background color is white, we can not see it properly. I'm going to select this frame and just make it black. Now it should be much easier for you to see what's going on. So far, so good. We have our default state, we have our hover state. If I just click on it, there we go. We have our pressed state as well. But here's the thing, if I just leave this button just like this, if my cursor leaves this button, nothing happens. That's not what I want. When my cursor leaves this button, I want this button to get back to the starting point, which is this default state. Well, unfortunately, the On click trigger doesn't work in the same way as while hovering. Because here, as you can see, if I just get back to the default state for a second, you can see that it works both ways. But that's not the case with the On click trigger. Here's a trick I use for my projects. I'm going to connect this pressed state back to the default state. I'm going to change the three here from On click to mouse leave. Now Figma knows that when my cursor leaves this element, it should be changed to the default state. Let's see if it works properly or not. I'm going to hover over it. I'm going to click on it. Good. Now I'm going to move my mouse around just like that. There we go. We just got back to the default state. So far so good. You learned how to create this interaction. But usually when we want to create a button, we use auto layout, to make it responsive. We don't usually use a group and a rectangle inside. It could be a little bit challenging to create such an interaction when you have an auto layout. I'm going to show you how you can create such an interaction when you have an auto layout frame. I'm going to create this button using auto layout. I'm just going to create a text layer here, and let me just type get started. To add auto layout to it, I'm going to hit "Shift and A". Let me set the padding to 16 as for my vertical padding and 32 as for the horizontal padding. I'm going to add a fill to it. It should be just like this blue. Here we just have a text layer and this is just a responsive button. Now, let me just rename it to button and I'm going to turn it into a component. Let me add a variant. So far everything worked perfectly. But now let's go ahead and add that circle to it. I'm going to just create a circle just like this and make it white. Look what happens when I try to put it inside one of these variants, maybe this default one. Look what happens. You see, it destroyed our button. We're going to fix that, don't worry. The reason it behaves in such a way is because when we have an auto layout or let's say a responsive element, when we add something else to it, it tries to take up some space, and that's not what we want. We don't want this circle to take up any space here. We want it to float. To make it happen, we just need to select it here. Head over to the design inspector and you see this plus button here. It says Absolute Position. If I click on it, look what happens. Now this circle is not taking up any space here, and that's exactly what we need. Don't forget to select your variant and check this clip content check marks. Everything else should be done exactly the same as we just discussed. I'm not going to repeat all the steps. That's all for this video, and I'll see you in the next one. 9. Animated Switches: [MUSIC] Welcome back. In this video, I'm going to show you how you can make an interactive switch just like this. Let's get into it. Please head over to the animated switches page within the design file. Here as you can see, I already designed two switches, with two different states. It's so simple. I just use the rectangle as for the background and a circle here. Also I made it responsive using auto layout. If I select this switch off-state, you can see that the alignment is set to left. If I select this one, the alignment is set to right. But the important thing is that the name of these elements, this circle and this circle is the same for both layers. Otherwise it won't work. The other difference is that for this circle here, I used a stroke and also I changed the background's color. Here to make it interactive, the only thing we need to do is this. We just need to select these two switches and head over to the toolbar, click on this little arrow and just create a component set just like that. Inside our component set, now we have two variants with one property. We have property one on and off. Let me go ahead and rename them. I'm going to rename it to state. Here we have state off. The next thing we need to do is to connect them. I'm going to select the first one and head over to prototype, connect it to the second one and just make sure that the trigger is set to on click. Since we used on and off here, we get this switch here as well. That's amazing. It's going to be a smart animate and I'm going to leave it as 200 milliseconds. We will give it a try and if needed, we can just make some adjustments later. Now I'm going to create another connection back to the off state. I'm going to create a new connection. Let's give it a try. I'm going to create a frame. I'm going to change the background's color. Also from the assets here, I'm going to drag and drop this switch just like this. Let's select this frame. Hit play, and it should work just fine. I'm going to click on it. There we go. Now you know how to create an interactive switch as well. I'll see you in the next one. 10. Animated Slider: In this video, we're going to create an interactive slider together, just like what you see here. As you can see, we can easily interact with this slider. On the right side, you see this number which is connected to our slider, just like this. Let's start and see how you can create one. Please go ahead and look for this animated slider page within the Figma project. Here as you can see, I created two different sliders. First, let me break it down for you. I haven't rounded rectangle here. It's completely rounded as my background, and also, if I just move this ellipse around, you see that I have a duplicated layer of my background here, and I just decreased its width to five. This layer is basically what we are going to animate to get something like this. So here we have two rectangles on top of each other. But this one, which is called the slider, has a much smaller width. It's so simple. When you want to create this slider, you need to make sure that this circle is aligned perfectly with the other elements. Otherwise, it won't work. For this second slider, the only things that have been changed are the position of this circle and also the width of this slider layer has been changed to 237 to reach the ending point here. But we also have to have a number here. So how can we create that? Let me show you how it's done. First, I'm going to go ahead and create a text layer, hit T, and create a text layer. Here, I'm going to have different values. I'm going to go 0-10 to 20, all the way to 100. Here's what I'm going to do. I'm going to type in zero. I'm going to hit Enter to create a new line. Then I'm going to type 10 and just continue doing that. I'm going to fast-forward this process. There we go. We have a 0, 10, 20 all the way to 100, and make sure that you align your text to write here. So just like our slider, we need to have two different states for this number as well for this text layer. Here, in our first slider, we should see zero. Here, we should see 100 and everything else will be animated by Figma automatically. So to do that, we just need to turn this text layer into a frame, in order to be able to mask these numbers. I'm going to right-click on it, and I'm going to click on frame selection. Now, as you can see in the layers list, this text layer is inside this Frame 1, and I'm going to rename this Frame 2 text. Next, I'm going to decrease the height of this frame just like this, and to mask this number, as you know, we just need to check this clip content check marks just like that. Now I'm going to align this frame with this slider, and I'm going to duplicate it, hit control D, bring it down here, and align it with this slider as well. Make sure you have the same margin between the slider in this text. Here, if I just hold down the Alt key on my keyboard or Option key, I can see the margin is set to 12. Here I need to make sure that I have 12 as well. It's eight, so I need to move it up, and now, I can select these two, this slider and this text layer, and hit Control G to group them and select these two as well. Hit Control G to group them. Now, I'm going to extend these groups and I'm going to make sure that my layers have the same name in both groups. Here I have Slider 100, Slider 0. I'm going to change it to slider for both of these groups. I don't want to run into issues when I create connections. Then we have text and text, and everything else looks just fine. Before we turn these two groups into a component set, I'm going to select this text layer within this particular frame here, and I'm going to move it up because here we need to see 100, not zero. So you can hold down the Shift key and use the arrow keys on your keyboard to move it up. Just like that, something like this should work and we're good to go. Now I'm going to select these two groups and just create a component set just like this and now we can connect these two. Here's what you need to keep in mind. When you want to connect these two, you need to make sure that you select this circle here inside this slider. In my case, it's Ellipse 1, otherwise it won't work. Make sure to select this element here, then head over to prototype, create a connection and connect it to this Group 2. The trigger should be changed from and click to on drag because we should be able to drag this element around, smart animate, and 300 milliseconds looks good. I'm going to do the same thing for this element here, Ellipse one here, and just create a connection back to our first group here, and drag, and everything else should be intact. Now let's give it a try. It should work just fine. I'm going to create a frame here. Let's make the background black, just like that. Go to Assets, drag and drop these components. Good. I'm going to just select the frame and hit Play. Okay, let's see if it works. There we go. You see everything works as expected. If you wanted to stop somewhere around here, maybe to 20 and then to 40 or 60, etc., you need to make sure to have different variance. So instead of zero and 100, you need to have a few variants in between these two values. Maybe you can add two more variants and go 0-30 and then from 30-70, and 70-100, whatever you need. Guys, that's all for this video,and I'll see you in the next one. 11. Animated Card: [MUSIC] Welcome back. If you go to App Store, you usually see a few cards related to different apps. If you touch any of these cards, you will see this smooth transition. This cards boundary expands to fill up the whole available width of the screen and then all the elements, including the image and the text layers, move up and rearrange the whole layout of the screen. When you want to close it down, you can simply drag down and it will be collapsed. In this video, I'm going to show you how to replicate the exact same interaction in Figma. Let's dive in. Here I designed this app and here we have a few cards. When I click on it, look what happens. You see we will get the exact same interaction here. When I click on it, it expands. Then the text and the image here move up. If I click on this left arrow icon, it will be collapsed. Also if I just drag it down here, I can simply collapse it by myself. It's so smooth and so easy to create. Let's start. Here if you go to the animated card page, you will see I prepared these two screens for you. Here on the homepage, we have this card, and within this card group, we have a few elements. We have this Group 2, which is this text group. Also we have this text layer and then we have our shape and our image and the shadow behind this image. The only thing you need to do here is to have the exact same layers on both these pages. Here on the detail page, I also have the card group, and inside I have this Group too. But I remove this price text, and everything else is exactly the same. I have Rectangle 4, Rectangle 3, Rectangle 5. It's so important to keep the names intact, otherwise it won't work and the rest will be handled by Figma. Now we just need to select this card, head over to the Prototype tab and just connect these two screens. The trigger is going to be on click. It's going to be smarter animate. I'm going to leave the velocity here to ease out for now, later, we may need to adjust it. Then I'm going to select this button here and just connect it back to my homepage. Again, unclick smart animate. If I just hit this Play button here to play my flow, let's preview it and see how it works. I'm going to click on this card. It works just fine. But to take it to the next level, I want to add this bounce effect to it, just like this. It's so smooth and so satisfying. To do that, we just need to select this card right here. I'm going to click on this interaction. Instead of ease out, I'm going to change it to quick. I'm going to do the same thing for this interaction. I'm going to select this button and change it to quick. Let's give it a try once again. I'm going to click on it. There we go. It looks much better. But what about the drag interaction? At the moment it doesn't work. Let's create it. We just need to select this card here on the detail page. I'm going to create a connection back to my homepage. But this time the trigger should be changed to on drag. Also it should be quick so we don't need to touch anything else. Now it should work just fine. It was quite easy, wasn't it? All right guys, let's wrap up this video and I'll see you in the next one. 12. Animated Text: Have you ever wanted to create a professional looking text animation in Figma? If so, you picked the right video, because in this video, I'm going to show you how to make this advanced text animation in Figma in just five minutes. Let's begin. To create this effect, we need two different text layers. We need the text layer as our static text, and we need another text layer as our moving text. I'm going to create a text layer. Let me write, manage your projects just like that. I'm going to make it bold, then I'm going to decrease its width like this and here we're going to put our moving texts. Now I'm going to duplicate this text, move it to the right side and here I am going to write faster just like this. This time we can change the type of this text to auto width like that. Let me bring this text down, just align it with your other text layer. Next, let me go ahead and change its color. I'm going to have a gradient for this text. Let me quickly create a gradient. I'm going to use purple and this light purple, just like that. Don't worry about the color. You can always adjust it later. Something like this should work very well. Now I'm going to double-click on this text. I'm going to hit Enter to create a new line and let's write our second word. Let's write with ease. Hit Enter, and let's write efficiently. Now we need to create somehow a mask here. We can use a mask, but instead, I'm going to show you a good trick. Instead of using a mask, we can just right-click on this text and we can click on frame selection. We're going to basically put this text inside a frame. You see now we have frame one here. Then I'm going to decrease the height of this frame just like this and just check this checkbox that says Clip contents right here. Basically we mask the other two words here, and that's exactly what we need. Now, I'm going to select these two texts. Basically we have one frame and one text layer. Right-click here and again, click on this frame selection to create another frame. Let's rename it to frame one. Now we can duplicate it. Hit Control D or Command D, once again duplicate it. Next, what we need to do is this. We need to double-click on our texts layer inside this frame that we created and we need to just move it up. I can use the arrow keys on my keyboard to move this text up just like this. If you want to perfectly align it with this text layer, you can just put it outside this frame and align it with the baseline of this other text and put it inside again, just like that. Let's do the same thing for the other texts. I'm going to select it and move it up just like that. Let me align it quickly. It's perfectly aligned and I'm going to put it inside this frame. All right so far so good. Now we need to select these three frames. We need to head over to the toolbar and click on this little arrow. This drop menu opens and we need to click on create components set. As soon as I do that, this components set will be created and inside we have our variants. If you don't know what variants are, make sure to check out my video on variants. You can find the link on the top right corner. But for now we just need to head over to the Prototype tab here, and we need to make them interactive. We need to create an interaction here. How can we do that? It's very simple. I'm going to select the first one. I'm going to left-click on this plus button and try to connect it to the next variant right here. This interaction details menu pops up. From here I'm going to change the trigger to after delay. The duration is set to 800 milliseconds. It's fine. I'm going to change the animation type from instant to smart animate. Here I'm going to set it to ease in and out back. You can choose whatever option you want here. You can choose for example bouncy quick, It's totally up to you, but I really prefer this one. It looks very good. Let me adjust the duration to maybe 600 milliseconds. Now we need to repeat this process for the other variants, I'm going to select this frame now. I'm going to create a new interaction just like this. Here change the trigger to after delay. Don't change this duration here because we want them to be the same. We don't need to change anything else. Finally, I'm going to select this one, the last one, and connect it to our first frame. Just like this, change the trigger to after delay and the rest is fine, and we are basically done. Now let me show you how you can use it. I'm going to go to Assets. From here I'm going to drag and drop my component right into my design. In case you want to modify the colors here, you can simply head over to the selection colors right here and adjust the color as you wish. You can also modify the gradient. Let me go ahead and change the gradient quickly. I really like this one. Now let's give it a try and see how it looks. I'm going to select my frame and preview it. There we go. Here is our beautiful and smooth animation. 13. Interactive Dropdown Menu: [MUSIC] Welcome back. In this video, I'm going to show you how to create this interactive drop-down menu. Here, as soon as I click on this drop-down menu, it opens and we will see these options, it allows us to select between these languages. We need to have a flag and also a simple text layer, and as you can see, we have different states of these options. We have the hover state and also we can select these languages. If I just click on this English, there we go, our placeholder text has been changed and we get this flag here as well. It's fully interactive, and it's quite useful to learn how you can create such a complex interactive component inside Figma. If you're ready, let's dive in. For this element, I decided to show you how to create it from scratch. Because if you don't understand how this drop-down menu is created, it would be quite hard for you to understand how we make it interactive. We're going to create it from scratch. But if you just go to the interactive drop-down menu page in the Figma project, you will see I already prepared these flags for you. We have four different flags with different names. The first step is to turn these flags into components. I'm just going to select them all and I'm going to head over to the toolbar here, and I'm going to click on this down arrow to open up this drop-down menu. Here, I'm going to click on Create Multiple Components, just like that. Now every single one of these flags is a component. That's good. The next step is to create the item. What you see here, every single one of these options is called an item inside our drop-down menu. For that, we just need to have a simple text layer, a flag next to it, and it should be rectangular. I'm going to hit "T" on my keyboard and the font size could be 18 points, and I'm going to type English. Next, I'm going to add other layout to it to make it responsive. Hit shift and A, and as you can see now it has been changed to Frame 1, so it's responsive now. We need a background color for that, so I'm going to add a fill to it as well. It could be white or it could be a very light tint of blue or something else. I'm going to go with blue. Let me just change the color here to a very light tint of blue, just like this, and our texts should be a very dark shade of this blue. I'm going to pick the same color here, and I'm going to make it quite dark, just like this. Let me select this frame and I'm going to call it item. What else do we need? We need a flag here, so we are going to use nested components. If I go to the Assets tab here and I head over to Animated Drop-down Menu, I see this flag category and we will see all our flag components. I'm going to just drag and drop this English flag into my item just like this. As you can see, our item is responsive because we added other layout to it. Now we just need to change the alignment. I'm going to select this item frame, and I'm going to change the alignment here to left and center, just like this. The margin between these elements could be decreased. I'm going to decrease it to four pixels, just like that. But I'm going to change the horizontal and vertical padding here as well. I'm going to set the horizontal padding to 16 and the vertical padding to 16 as well, just like this. But here's the thing. I'm going to select this item and I'm going to increase its width a little bit. Something like this should work, maybe 170. Don't worry about the dimension because we are going to change that later. For now, I just want to have a sample item here. Good. Now that our item is ready, I'm going to turn it into a component. I'm going to click on this icon here. There we go. Now it's an item component, and now it's time to add different states to this component. For that, we need a variant. While it's selected, I'm going to click on this little icon here to add a variant to it. We need to have one property in our component set and it's going to be called state. If you want to change the property name, you can simply select the whole component set and head over to the Properties section, and double-click on its name. Here the first one is going to be default. We don't need to change that. The second one is going to be hover, so I'm going to type hover here, and for this hover state, I'm going to modify the color a little bit. I'm going to add another field to it, and I'm going to change the color to this light blue, and make it a little bit more saturated just like this. So far, so good. Now I'm going to duplicate it, hit Control D or Command D and this one is going to be our selected state. Because here, when we open up this drop-down menu, we need to have the default state. As you can see, Italian is now the default state. If I hover over it, we will see the hover state, and if I click on it here, now we have the selected state. For that, I'm going to change its value here to select it and I'm going to change this new field that we just added to this hover state. I'm just going to make it a little bit more saturated, just like this. The other thing we can do is to select this text and just change its weight from regular to medium so we could easily distinguish between these different states. But we're not done because once we have this selected state, we need to have a hover state for this selected state as well. I know it sounds complicated, but here's the thing. We have one hover state for these default states. But we need to have a hover state for this selected state as well. You see when I hover over this selected state, it becomes a little bit darker, I'm just going to select this one, duplicate it, and I'm going to change its value here to selected hover. The only thing we need to do is to change its color here a little bit. Something like this should work. So far so good. We have our item with different states and now we can move on to the next step which is creating a list. We need to create this list here. For that, we just need to use this item component. If I go to Assets, here I can look for the item component and I'm going to drag and drop it right here. For the list, I'm going to duplicate this item, move it down, and make sure there is no margin between these two elements. I'm going to duplicate it twice, so in total, we need to get four different items, just like this. Now we're going to modify the contents of each item, for example, the second one is going to be Italian and since we turned the flags into components, I can simply select this instance, head over to the design inspector, and using this drop-down menu, I can change it to Italian just like that. The next one is going to be Polish and I'm going to change the flag as well to Poland just like that. Next, we need to have Spanish, and I'm going to change the flag to Spain as well, just like this. Now we have four different items and I'm going to make this list responsive as well. I'm going to select them all and I'm going to add auto-layout to them. I'm going to hit shift and A. There we go, and let's rename this frame to list. But our list is not responsive. You see here we have this issue if I try to modify the width here, nothing happens, and that's a problem because we need to make sure that our list is responsive. To fix that, we just need to select the items inside our list and we need to change the resizing option here. If I head over to the design Inspector and I open up this drop-down menu by default, it's set to fix the width. I'm going to set it to fill the container. Now if I select my list here, you can see that it's fully responsive. The next step is to turn this whole list into a component as well. I'm going to click on this Create Component button here to turn it into a component and our primary elements are ready. What else do we need? For this drop-down menu, we need to have this menu as well with this placeholder text, it says select language, and then we need to have this down arrow icon. Let's create one. I'm just going to hit "T" on my keyboard and I'm going to start typing select language. Let me change its color to something else, maybe this blue. Then just like these items, I'm going to add other layout to it. Hit "Shift and A". Here we have a frame. Let's rename it to menu, and this menu doesn't need to have a feel. Instead, I'm going to add a stroke to it. Just add a stroke to it just like this, and I can make it a little bit rounded as well. Maybe I can increase the corner radius to something like 16 pixels. I'm going to change the stroke color to the same blue. What else do we need? We need this down arrow as well. For that, I can use a plugin. Here we have Iconsax. If I just run it and look for arrow. Here, I'm going to drag and drop this arrow icon into my project. There we go and now I'm going to drag and drop it inside my menu, just like this. But it's too big for this menu. I'm going to make it a little bit smaller. I'm going to hit "K" on my keyboard to select the scale tool and try to decrease its width and height to probably 18 pixels. I think 18 looks good. Next, I'm going to change their alignment, so I'm going to select this menu and change the alignment to left center and as for the padding, I'm going to set the vertical padding to 16, because here for these items we used 16 as well, and the horizontal padding to 16 as well. Let me change the color of this icon to the same blue. There we go. But here's the thing, this menu is not responsive, so we need to fix that. To fix this issue, I'm just going to select this menu, head over to the other layout section. Click on this little icon, advanced layout settings, and here as you can see, the spacing mode is set to Packed. I'm going to change it to space between, just like this. Now our menu is responsive. What's the next step? Well, the next step is to add a flag to this as well. But why? Because here we don't have a flag. Yes, we don't have a flag here for this placeholder text. But as soon as we select one of these options, as you can see, this flag appears. What we need to do is this, I am going to just go to assets, and I'm going to drag and drop one of these flags into this menu. Then since I am going to decrease the margin between these two items, I'm going to select this flag, hold down the Shift key, select this text, and hit Shift and A. Right now we can specify this margin here without affecting the margin between these elements. I'm going to set it to four, because we used four here as well. We need to keep everything consistent. But here's the thing, for this placeholder text, we don't need this flag. For now, I'm just going to select this flag just like this, and hide it. It's there whenever we need it, but at the moment, we need to hide it. The next step is to turn this menu into a component. I'm going to rename this menu to drop down menu, just like that, and I'm going to turn it into a component. For this, we need to have two different variants. Two main variants, closed and open. I'm going to add another variant to it, just like this. For these variants, we need to have two properties. I'm going to select this drop-down menu component set, head over to the Properties section, and change the first property to state. We need one more property here, so I'm going to click on this "Plus" button and click on "Variant". I'm going to name it placeholder. It creates property, so in total we have two properties, state and placeholder. For the first one, I'm going to set the state to closed, and the placeholder text should be set to default. For this one, the state should be opened and placeholder should be also default, because we need to change it later. What else do we need for this open state? We need to rotate this icon here by 180 degrees, so I'm going to select it, and here I'm going to set the rotation value to 180, just like this. Also we need to place this list inside this open variant. I'm going to go to assets, and from here, I'm going to drag and drop this list right here. Inside our layers list, I'm going to make sure that they put this list instance inside my opened variant, just like that. It doesn't look right. That's because it's taking up space here. As you may remember, when you don't want an element to take up any space, you can just select it and click on this plus icon absolute position. Now it's no longer taking up any space, and we can specify its position. Let me just enlarge this component set. I'm going to select this list using the arrow keys, I'm going to change its position. We need to make sure that it's perfectly aligned with this drop-down menu. I can select this list item, hold down the Alt key on my keyboard, and as you can see, the left margin is set to 21. I'm going to move it to the left to get a 20 pixel left margin. Here we have a 20 pixel left margin as well. Next, we need to adjust its width, so I'm going to select this list and change its width to 250 as well. Just like this. Now, since we have rounded corners for this menu, we can go ahead and modify the styling of our list as well. For these elements, I used a 16 pixel corner radius value. We need to use the same value for this list as well. What do we need? We need these corners to be rounded. I'm going to select this top item inside this list. We need to get access to individual corners, so I'm going to click on this little icon which says independent corners. Here we need to modify these two values. I'm going to set them to 16, this one 16 as well. Then we need to select this bottom item, head over to independent corners. This time we need to modify these two values. Let's set them to 16, and there we go. Now we have a consistent styling. Now we have two variants, so we can close and open this drop-down menu. But what if I click on one of these options? If I select one of these options, this placeholder text should be changed to whatever option I selected, and also the flag should appear. What I'm going to do is this, I'm going to select this closed option. I'm going to hit Control D or Command D to duplicate it. It's placed right here, but don't worry about it. We're going to just move it around, so it's right here. I'm going to select it, and using the arrow keys, I'm going to move it to the right side. Let me just enlarge this component set dramatically, we need more space, and I'm going to place it right here. In total, we need to have four options. We need to have one for English, one for Italian, one for Polish, and one for Spanish. Here I'm going to double-click on this text, and I'm going to change it to English, and also I need to unhide this flag. I'm going to change this placeholder value to English, just like this. Next, I'm going to duplicate this to get four different items, and I'm going to modify their texts one by one. The second one is going to be Italian. Obviously the flag should be changed as well. The third one is going to be Polish, let me change the flag as well. The last one is going to be Spanish, and I'm going to change the flag here to Spain. The next step is to create our interactions. I'm going to select this closed drop-down menu. I'm going to head over to prototype, and I'm just going to connect it to this open state. It should be On click, and the animation is going to be Smart Animate. Next, I'm going to select this one and connect it back to our closed state. We don't need to change any of these options. But what about these? I'm going to select this English item and connect it to this English variant. I'm going to do the same thing for all of these options, one by one, and one more. We're almost done, but there is one more thing to do. If I just open up this drop-down menu, you see when one option is selected, when I open it up, I still see this selected option. That's exactly what I want. I don't want it to get back to the default state. Whenever I select English, for instance, and I open it up, the English should be selected by default. For that, we need to select these variants, hold down the Shift key to select them all. Duplicate them, hit Control D or Command D, move them down. Then we need to select this list, copy it, hit control C or Command C, and we need to paste it inside these variants. I'm going to select English, hit Control V or Command V, Italian as well, Polish and Spanish. What we need to do is to change the state of these options. For example for this English, I'm going to select it, head over to design, and here I'm going to change the state from default to selected. I'm going to do the same thing for Italian here, I'm going to change it to selected. For Polish, let's change it to selected. Finally, for Spanish, I'm going to change it to selected. The last step is to connect these variants as well. Just like what we did with these two drop-down menu options, I'm going to do the same thing for this. I'm going to select this one, head over to prototype, connect it to this open variant. Just do the same thing for this one, connect it back to English. I'm going to do it for all these options, because it should work both ways. There we go. Now we are done, our interactive drop-down menu should work perfectly. Let's give it a try and see if it works as expected. I'm going to create a frame here, hit A, and create a custom size frame. Then I'm going to go to assets. From here, I'm going to just drag and drop this drop down menu. Let's align it to the center, and I'm going to select this frame, hit play. Now I'm going to click on it. There we go. Our drop-down menu opens, but here we have a problem. As you can see, when I hover over these options, nothing happens. That's because we didn't connect these states within this item component set. Let's do that quickly. I'm going to select this default, go to prototype, connect it to hover. It should be While hovering and also Smart Animate. Good. For the next one, I'm going to select it, connect it to selected. It should be On click, Smart Animate. Then for this hover selected option, I'm going to select this one, connect it just like that, and it should be While hovering. Now it should work. Let's open up this drop-down menu. I'm going to hover over these items. As you can see, it works perfectly. I'm going to select English now. There we go. When I open up this drop-down menu, this English is selected by default. But here we have another issue. When I select an option, this icon is not rotating. That's because we forgot to rotate these icons here. Let me select them all, just hold down the Shift key and double-click on these icons. Go to Design, and here I'm going to rotate them by 180 degrees. Now, everything should work just fine. Let's refresh the page. I'm going to open it up. I'm going to set it to Italian, and there we go. Everything works as expected. All right guys, that's all for this video. I hope you enjoyed it, and I'll see you in the next one. 14. Animated Notification: In this video, I'm going to show you how to create an animated notification in Figma. I will be able to interact with it. If I just drag it to the left side, as you can see, this clear button appears and if I click on this clear button, it will be gone. Let's see how we can create such an interactive element. Within the Figma project, please look for the animated notification page. Here as you can see, I already prepared this detail page for you and this notification card, and this clear button card. Here is how it should work. Once we preview this detail page after maybe three seconds, this notification card should slide in, and then when I drag it to the left side, this clear button should appear and it should be interactive as well. What do we need to do? First of all, I'm going to select this notification card here. As you can see, it's a responsive frame, but I'm going to put it inside another frame. The reason is as our starting point, we need to make this notification card disappear. We need to somehow mask it and to mask it properly, we need to have a frame as well. I'm going to right-click on it, and I'm going to click on frame selection. Let's rename it to notification. There we go. Next, I'm going to turn it into a component as usual, and we need a few variants as well. But before I create a variance, I'm going to modify the height of this frame because as I said, in our starting point, we shouldn't be able to see this notification at all. Before I create the variance, I'm going to increase the height of this frame, something like this. It should work and then I'm going to add a variant to it just like this. We have two variants here. For this component, we need to have two different properties. We need to have the visible property and the clear property. Why do we need these two properties? So as I said before, this notification card shouldn't be visible and it should slide in after a few seconds. As our starting point, we need to hide it. That's why we need the visible property and the clear property is for when we need to make this button appear or disappear. Let's go ahead and create these properties. I'm going to select this notification component set and I'm going to head over to the properties section here in the design inspector. Here let's rename this Property 1 to visible, and then I'm going to hit this "Plus" button to create a new property and I'm going to name it clear, just like that. In total, we have two properties. Now as for the starting point, which is this variance, I'm going to change the value of this visible property to false because it shouldn't be visible. For this one, I'm going to change the visible property to true because it will be visible and I'm going to select these two variants now and set the clear value to false because at this stage we shouldn't be able to see this button at all. So far, so good. The next step is to somehow mask this notification card. The way we do that is like this. Since we put this node vacation card inside another frame, we can simply select it here inside our variant, and using the arrow keys, I can just move it up just like that. However, it's still visible. That's because we need to select our variance here and check this clip content checkbox. As soon as I do that, as you can see, it's gone so we somehow mask it. I'm going to go to the prototype tab and I'm going to connect this variant to this variant. The trigger should be set to after delay. I'm going to set it to 3,000 milliseconds or three seconds and here we need to have a smart animate. Let's go ahead and use this notification component and see how it works. I'm going to drag and drop an instance of it here. Let's align it to the top edge of our screen, just like this. I'm going to select this detail page and hit "Play". Here we have an issue and I think that's because we forgot to check this checkbox for this variant as well. I'm going to clip content here and let's refresh the page. There we go. Now it works properly. However, we need to have some top margin. We don't have any margin at the moment. What I'm going to do is this, I'm going to select this card here in my second variant, and I'm going to align it to the bottom instead of top. If I just refresh it now, it works just fine but here we have too much margin so maybe I can align it to the center instead. I think now we have enough top margin. The first step is done but what about the drag interaction? For that, I'm going to bring this clear button inside this variant. Just put it inside and just align it to the center and just move it to the right side. Next, I'm going to decrease its opacity to zero percent to make it invisible because here, as you can see, the clear property is set to false so we shouldn't be able to see that particular button. Now we need one more variant here. I'm going to select this one, hit this "Plus" icon here to add one more variant. What I'm going to do now is this. I'm going to select these two elements, the notification card, and this clear button, and using the arrow keys, I'm going to move everything to the left side, just like that. Let me select this clear button and increase the opacity to 100 percent to make it visible again, we need to move it to the left side. It looks good. Now, let's create an interaction between this variant and this one. To do it correctly, it's very important to select this notification card, not this variant. Why? Let me show you why. If I select this variant here and I try to connect it to this variant and I go ahead and change the trigger from unclick to undrag look what happens. You see that as soon as I drag it a little bit, this animation will be played and it's done. That's not what we want. I really want to be able to control this interaction by myself. That's why I said we need to add this interaction to this notification card itself, not to the variance. That's a very important point to keep in mind. I'm going to remove this interaction and instead, I'm going to select this notification card and I'm going to connect it to this variant. Now if I set it to undrag, everything should work properly. I can do it both ways. I can select this one as well and just connect it back to this one and set the trigger to undrag and a smart animate. Let's see if it works properly now. Now I'm able to drag it to the left or right, just like this. It works just fine. However, we have an issue here. As you can see, it's somehow masked both on the left side and right side. We need to fix that. If I just select this instance and I try to increase the width just like this let's see if it fixes the issue. It works just fine but now we have this issue. As you can see, there is no margin in-between. That's because of our constraints. Here I'm going to select this clear button and as you can see, the constraints are set to top and left. If I set it to top and right instead, for this one as well, I'm going to set it to top and right. Let's see if it works. It works, but now we have too much margin. Let me just move it to the left side a little bit. Now it looks much better, but there is one last step we need to take. We need to make this clear button interactive as well. Let's do that. The only thing we need to do is to select this variant, hit this ad variants button. Next, I'm going to select the elements inside these to hit "K" to select the scale tool and I'm just going to scale it down just like this. I'm going to set the value to 0.01. Also, I'm going to decrease their opacity to zero percent to make them disappear completely. Now, if I select this clear button here, go to prototype and just connect it to this last variant here, the trigger should be unclick, smart animate. Now it should work. Let's give it a try. There we go. Everything works as expected. Let's give it a try once again. Our interactive notification is also ready. Let's wrap up this video and I'll see you in the next one. 15. iPhone's Dynamic Island: In this video, I'm going to show you how to create this interactive iPhones dynamic island. Without further ado, let's dive in. Please look for iPhones dynamic island page within the Figma design file. Here as you can see, I already prepared a mockup for you here. Also we have two variants of our dynamic island. Basically we have one close dynamic island and one open dynamic island. What do we need to achieve here? By default, we should be able to see this closed version. When I click on it, it's background should expand and also we should be able to see all these elements inside. Here, as you can see, we have a frame and inside we have two main elements. We have this selfie camera. I'm not sure if you can see it or not, it's so tiny. Also we have this wrapper which gathers all these elements, such as this profile image and all these elements inside. As usual, we need to turn this into a component, but before we do that, I want to put it inside another frame. It's so important. If you don't put it inside another frame, you can not align everything perfectly. That's the most important point here. I'm going to right-click on it and just click on "Frame selection" to put it inside another frame. Let's name it island. Perfect. Now I'm going to turn it into a component just like this and we need one more variant. We need both opened and closed. This components set should have one property. I'm going to rename this property to state, and I'm going to select these variants, and I'm going to change this state value from default to opened. I'm going to select this variant and I'm going to change the state value to closed. Now the only thing I'm going to do is select this dynamic island frame within this closed variant. I am going to check this clip content check marks. Now, I can go ahead and modify its dimension. As you can see, this wrapper inside is now masked. Why? Because we check this clip content checkbox. What should be the dimension? Let me check it out here. The dimension should be 125 by 37. I'm going to select it once again, and I'm going to set the width to 125 and the height to 37, just like this, but we are not done. First of all, while this frame is selected, I'm going to align it to the center. It should be placed in the middle of this whole frame. You see that frame? Next, we need to go ahead and modify the selfie camera because we just destroyed it. Here we have the selfie camera. The size of that should be 13 by 13. I'm going to change its dimension to 13 by 13. There we go. Also we need to change its alignment. Here, if I select this and I hold down the Alt key or Option key on my keyboard, you can see the top padding is set to 12 and the right padding is set to 133. Here I'm going to select this and I'm going to make sure that I get the exact same padding. Let me bring it down. Here, as you can see, we have a decimal, I'm going to just remove it for this y as well. Now I can easily set the padding to 12 and the right padding should be measured against this whole frame, this outer frame, and it should be set to 133. There we go. Now let me select this dynamic island here. I'm going to go to prototype and just connect it to this one. The trigger should be unclick and the animation should be smart animate. I'm going to select this one, this variant and connect it back to this closed version just like this and smart animate. Let's give it a try and see how it looks. I'm going to go to Assets. From here, I'm going to go to iPhones dynamic island. Bring it here. Let me align it to the center and it should be placed right here. I'm going to change its default state to closed. Now I'm going to select this mock-up and hit "Play". Now I can click on it. Look what happens. The background is animated property. That's what we want. We want it to expand and collapse, just like this. However, I want this wrappers elements to scale down and fade out when we try to close this dynamic island. I don't want it to move to the right side. That's not what I want. Let's go ahead and fix that. Here, inside this closed variant, I'm going to look for wrapper and as you can see, it's placed right here. I'm going to scale it down. Let's hit K on my keyboard to select the scale tool. Then here I'm going to set the value to 0.01. Also I want it to move right here in the center and then disappear. I'm going to move it right there. The last step is to decrease the layer's opacity down to zero. Let's give it a try once again and see how it works. There we go. Can you see the difference now? That's what I wanted. We're almost done. However, I'm not satisfied with the animation. We don't have any bounce effect. If you just take a look at this one, you see we have this bounce effect, which makes the animation look way better. Let's quickly fix that as well. I'm going to select this one. Head over to Prototype, click on this interaction. I'm going to change the velocity from Ease out to Quick and the same thing for this variance. I'm going to select it and change the velocity from Ease out to Quick. Now if we check it out, everything should work. There we go. You see, now we get this bounce effect. That's all for this video. Hope you enjoyed it and I'll see you in the next one. 16. 3D Animation in Figma: In this video, we're going to create a 3D animation together in Figma. Here, as you can see, we have a credit card and look what happens when I hover over this card. You see that? As soon as I hover over this card its perspective change to this easometric perspective, and then two other cards appear. Don't worry, it's going to be much easier than you think. Let's analyze it once again. First as our starting point, we need to see only one card, this blue card, and when I hover over it, it's perspective changes just like this. Then we will see these two cards appear. We need three different steps. We need our starting point or point A, then we need point B, which is here and then we need point C, which is the final destination. Now let's start creating it. If you look for this 3D animation page within the Figma design file, you can see I already prepared for you this project. Here we have a hero section of a website, and here I prepared three different credit cards. Obviously we can go ahead and create this interaction using components and variance. However, I'm going to show you how it's done here using different frames to really understand the steps we need to take. I'm going to select these three cards, and I'm going to move them to my first desktop homepage. So far so good. Now let me align them horizontally just like that. What about the order of our cards? First, we need to see this blue card and then the purple in the middle, and finally the silver card at the bottom. I'm going to see card 3 here at the top and card 1, which was the silver one, is going to be at the bottom. Now I'm going to select these three and then just align it. This is going to be our starting point. Now while these three cards are selected, I'm going to hit Control+C or Command+C, select this second homepage, hit Control+V or Command+V to paste them here and now it's time to change the perspective of these cards to the easometric perspective. I'm not sure whether you are familiar with the term easometric or not, but let me show you how you can do that. To change these cards perspective, we're going to use a plugin called asymmetric. Here if I go to Resources and if I go to Plugins tab, you can find many plug-ins here. We have different types of plugins. We have the easometric plugin or easometric. If you don't see these plugins, that's fine because I already looked for these plugins. But here you can search for easometric. There we go. Here is the plugin we are going to use. This plugin allows you to change the perspective of your elements, whatever it is to an easometric perspective. You just need to hit Run here and hit Open Easometric. But to be able to use this plugin, you need to make sure that you only select one frame at a time. I'm going to select card 1 here. I'm going to go to a Easometric, hit Run, open easometric here, and this window pops up. Here we have different options to choose. We have left, we have top-left, we have top-right. I think we're going to need top-right. As you can see now, we have this easometric perspective for this card 1. That's exactly what we needed. Next I'm going to select this card 2 and do the same thing. You can just open it up here and select top-right. Last but not least, let's do it for this card 3. There we go. Now we have three easometric cards and I'm going to select them all and just change their alignment however I want. Now as our last step, we're going to select these cards here, copy them, hit Control+C, and just paste them right here, hit Control+V or Command+V. Then we just need to select this card 3, hold down the Shift key and use the arrow keys to move it up or down. I basically moved it up 80 pixels now I'm going to select this card one and move it down a a pixels. Hold down the Shift key and just move it down just like this. Now we need to create our interactions. Yes. First I'm going to create an after delay through here, and then we will create this hover trigger as well. I'm going to select this desktop homepage, head over to prototype and just connect it to the next page. The trigger is going to be after delay, smart animate, and it should be Ease out. I'm going to increase the duration here, otherwise it would be too fast. Let me increase it to 1,000 milliseconds. I'm going to hit play here to preview it for a second. There we go. We went from the starting point to point B, and now we need to go to point C as well. Here I'm going to select this screen and just create an interaction just like this. It's going to be after delay, Smart animate 1,000 milliseconds. For this step when we want to go from this page to the destination, we don't need to have any delay at all. I'm going to set this delay amount to one millisecond. Now let me refresh the page. Now it looks quite good, but we can take it to the next level by adding some drop shadow to these cards try to make it look more realistic. I'm going to go ahead and select these cards, all of them head over to design and here I'm going to add effects to it. I'm going to make sure that I have the drop shadow effect and let me modify its preferences. Here I'm going to set the blur amount to 100 and here the Y is going to be 50, just like this and the opacity could be decreased down to 20 percent, something like this. Now let's see how it looks. You see that it looks much better. You learned how to create this animation, but we don't have this trigger. Now let's change it triggers a little bit. Here. I'm going to select this page and remove this interaction here as well. Now, I'm going to select this card three and connected to the next page. For the trigger I'm going to select while hovering and it should be smart animate, but from here to here, we need to have the after delay trigger. We didn't need to remove that at all but let me just create it once again. It should be after delay and one millisecond and then here we need to have a trigger as well. What kind of trigger? For that we could use the mouse leave trigger. So what I'm going to do is this. I'm going to select these three cards and I'm going to add a trigger to all of them. Let's see whether it works or not. While they are selected, create a connection back to the first screen and a trigger is going to be mouse leave. I'm going to play this flow once again. I'm going to hover over it. There we go, and now look what happens. You see that? It works just fine. However, it's quite slow. I'm going to decrease the duration here. Let me select this one and change the duration from 1,000 milliseconds to maybe 500 milliseconds and for these triggers as well, I'm going to set it to 500, this one to 500 as well and finally, for this one, I'm going to set it to 500. Let's give it a try once again. I'm going to hover over it, there we go. I'm going to leave. It looks beautiful, doesn't it? Now as a challenge, I want you to go ahead and recreate this interaction using interactive components. I'll see you in the next video. 17. Loading Animation: [MUSIC] Welcome back. In this video, I'm going to show you how to create an interactive button with loading animation. Look what happens when I click on this Pay button. You saw that? When I clicked on that Pay button, a spinner animation appeared but once the processing was done, this animated ticker icon appeared. Let me play it once again. I'm going to click on it. We see this spinner and finally this tick animation. Let's dive in and create it. Within the Figma project file, please go to the loading animation page and as you can see, nothing is here because I want to show you how to quickly create the spinner from scratch. To do that, the only thing we need is an ellipse. I'm going to choose the Ellipse Tool, hold down the Shift key, left-click and drag to create a perfect circle. The size doesn't really matter, but I'm going to keep it at 24 by 24 pixels. Next, I'm going to zoom in just like this and when you hover over it, you see this little circle which says Arc. I'm going to click on it. Now while it's selected, I'm going to head over to the design inspector and as you can see here, we have a few properties to modify. You see this zero percent ratio, I'm going to increase it. Here, if I increase it to 20, look what happens. You see now we have a hole in the middle and we can easily control this ratio. I'm going to change the thickness to something like this. I think 75 percent looks good and next I'm going to add a gradient to it. I'm going to head over to feel and here I am going to change the type from Solid to Angular. I'm not going to use linear, I'm going to use Angular to get this gradient. That's exactly what we need for a spinner. Now I'm going to change the direction of this gradient just like this because the starting point should be here and we are basically done. This is going to be our spinner. I'm going to call it spinner. Now it's time to create that animation. That spinner animation. To do that, as always, we're going to use a component set. Let me turn it into a component just like this and then we need to have a few variants. I'm going to click on this plus button to add a variant. What do we need? We need to select the spinner inside and rotate it, but we cannot rotate it by 360 degrees. That's not how it works because that way, Figma cannot create that spinner animation, that loop animation we are looking for. So what do we need to do? Well, we need to rotate it by 90 degrees clockwise. I'm going to hold down the Shift key and make sure you select this spinner layer within your variant. Don't select your variant itself. I'm going to select this spinner and here I'm going to change the rotation value to minus 90 to rotate it clockwise. Next, I'm going to select this variant too, and I'm going to duplicate it once again. Here, I'm going to double-click to select the spinner and just rotate it by 90 degrees. We need to get minus 180. Here you will see 180 because when you have 180 over 360, it doesn't matter whether you have minus or plus. That's why Figma automatically changes it to 180. The only important thing is that you see this shape. Next, I'm going to select this variant, hit plus, double-click to select the spinner and just rotate it by minus 90 degrees. Here we need to get 90. We have four different variants, and now we can start connecting them. I'm going to select this default variant, head over to the Prototype tab, and just connect it to this one. It should be after delay, and the delay is going to be one millisecond. Here, I'm going to change the duration to 300, and I'm going to repeat the same thing for this again after delay, one millisecond, and I'm going to do it for this one as well, after delay, one millisecond and finally, I'm going to connect this last variant back to our first variant. Because we want to loop this animation. Here after delay, one millisecond and we are done. Let's test this animation quickly. I'm going to create a frame just like this. Let me change the background's color to black, head over to assets, and from here, go to loading animation and drag and drop an instance of this component here. Perfect. Select this frame and play it. It's working, but I'm not satisfied with its duration, its speed. I'm going to make it a little bit quicker. I'm going to select all of these variants, head over to prototype and I'm going to change this value 300 milliseconds to 150 instead. Let's see if it works much better. It looks much better now. Our loading spinner looks fine. Now it's time to create that button. For that, I'm just going to hit T on my keyboard, create a text layer and the font size is going to be 17 points and let's type Pay because we're going to create a pay button, hit Shift and A to add auto-layout to it and I'm going to align it to the center. This button should have a background color of black. Just like this and also the vertical padding is going to be 16 and here I'm going to increase the horizontal padding to something like 70 for now. It looks just fine. Later we can just modify the size when we create an instance of this components. This is going to be our default variant. I'm going to rename it to default, and I can make it a little bit rounded as well. I'm going to set the corner radius amount to something like 12 and let's turn it into a component. Now we need a few variants. I'm going to add a variant to it and this second variant is going to be named loading. Perfect, and here is where we need to add this loading spinner. I'm going to go to Assets and from here I'm going to just drag and drop this loading spinner into my button here. But here we have a problem. As you can see, the width of this button has been changed. That's because the resizing option of this button is set to honk. I'm going to change it to fixed width, and just decrease the width to 170, just like this, make sure that you have fixed here as well and as for the margin between these two elements, I'm going to set it to maybe eight pixels. We have our default state, we have our loading state. Let's go ahead and connect them and see how it works. I'm going to go to prototype, create an interaction just like this and the trigger should be on click, smart animate and a duration could be 150, that's fine. The only thing left is to create a frame and give it a try. Here we have this default button. I'm going to select this frame. Hit Play. Let me click on it. There we go. It works, but here we have another problem. The height of our button has been changed as well. We need to fix this issue as well. You know what to do here. As you can see, the height is set to 53. I'm going to change its resizing option to fixed height and here I'm going to change it to fixed height as well and the height is going to be 53. Let me refresh the page once again. It looks very good. What's the next step? When we click on this Pay button, once we see that loading spinner, we need to see this tick animation as well. We can create this tick animation in Figma, but it's going to be so time-consuming and it's not ideal. Instead, we are going to use a plugin which is called Lottie animation. Lottie provides you with animated elements that you can use in your projects. Basically what it allows you to do is to convert an animation to a GIF file and just use it in your project because Figma plays GIF files. Here I'm going to add one more variant, and then I'm going to go to Resources, Plugins and just look for Lottie. You see here we have Lottie files. I'm going to run it. I'm already logged in. Make sure to create an account and login to your account and here in the search bar, I'm going to look for tick. Here, as you can see, you have multiple options. You can go to the next page and just explore different options here. I'm going to just go to the previous page and for this interaction, I'm going to use this one. I think it looks quite good. Here we can preview the animation and also you can customize it. If you want, you can customize the color, the background's color, whatever you want. Here since my button is black, I'm going to change the background's color to black as well and then I'm going to insert it as GIF, just like this. I think their small size would work. Hit Insert and as you can see, I get this black background. In your case, you may see that tick icon, but here is how you can change the preview here. If you select this and you go to the field section, just click here and you see this option at the bottom. If you use this slider, you can just select the preview because I'm going to be able to preview the last frame here, and then I'm going to scale it down. Here the width and height of this spinner are set to 24 by 24. I'm going to select this one and set the width and height to 24 as well and then I'm going to replace it with this spinner, just like this. Here let me select this spinner and remove that. The only thing we need to do now is to create a connection between these two. I'm going to select this variance. I'm going to go to prototype and just connect it to this one. It should appear after delay. Here I'm going to set it to after delay. Eight hundred milliseconds looks fine, and it's going to be smart animate. I also want to get rid of this text, I am going to remove this text as well and now let's give it a try and see how it works. I'm going to hit pay. There we go. It works just fine. But here we have this issue, as you can see, it's looping again and again and again. That's the issue with Lottie animation. Unfortunately, I couldn't find an option to disable this looping behavior. However, I was able to fix this issue using a trick. What I want to do is this, I'm going to select this one and just add one more variant and then I'm going to get back to the Lottie files here and just look for this particular animation. I'm going to look for tick. There we go, Open it up, change the background's color. But this time I don't want to insert it as GIF. I'm going to insert it as SVG. When you insert it as SVG, basically you will get a static icon and that's exactly what I need now, I'm going to insert it as SVG. There we go. Let's get rid of this one and I'm going to just select it, scale it down. I'm going to hit K on my keyboard to select the scale tool and set the width and height to 24, just like this and now I'm going to select this one and connect it to the last variant. Here we need to have after delay and it shouldn't be smart animate. I'm going to set it to instance because once the animation is done, I want to instantly see this static icon. Now I think it should work just fine. I'm going to play it once again. Hit Pay. There we go. It worked just fine and by the way, this button is responsive. Now if I want to modify its size, I can just select this instance here and I can simply adjust its width to whatever I want. I can adjust its height as well and it would work just fine. All right guys, let's wrap up this video. Hope you enjoyed it, and I'll see you in the next one. 18. Animated Mesh Gradient: In this video, we're going to create an animated mesh gradient inside Figma. Basically, a mesh gradient is what you see here. There are a few gradients blended together. As you can see, all these colors are moving constantly. Let's see how you can recreate this animated mesh gradient in Figma. If you go to the animated mesh gradient page within the Figma project file, you can see that I already prepared this screenshot of this Stripe website as our reference. In order to create this animated mesh gradient, first we need to create that mesh gradient. To do that, we need a frame. I'm going to hit "A" on my keyboard and I'm going to pick this desktop frame here, and to create this gradient. What we need is a few random shapes, a few random blobs to create these blobs, I'm going to use a plugin called blob. Here I'm going to go to the plugins tab, and from here I'm going to look for blob. There we go. This is the plug-in that I'm going to use. You can use any other plug-in you want, or you can even create random shapes using the pen tool that's up to you. But I prefer to use this plug-in to just speed up the process. I'm going to run it. Here, as you can see, it allows us to control the complexity and the uniqueness of this blob. I'm going to hit "Insert" to add one blob. There we go. I'm going to modify the complexity to just make it a little bit more unique. It insert, and I'm going to repeat this process again and again and just modify these two variables to come up with new and unique shapes. Let me do that quickly. I think that's enough for now. We have many different blobs. Now what I'm going to do is feel this whole desktop frame with these blobs. I'm going to put one right here. It's not inside our frame, don't worry, we're going to move them inside later. I'm going to put one right there, maybe make it a little bit smaller. Put it right here, and just do the same thing for the whole frame. I'm going to fast-forward this process. There we go. Our frame is filled with these blobs. I'm going to select them all in my layers list. I'm going to make sure that they are inside my frame. Just like this. The next step is to change the color of these blogs one-by-one. I'm going to select this one, head over to feel and using this eyedropper, I'm going to pick this red color and I'm going to do the same thing for all the other blobs. Maybe purple for this one, for this one I'm going to pick yellow. I'm going to fast-forward this process. There we go. Now we have random colors for these blobs. Now we need to blend them together. I'm going to select them all, hit "Control G" or "Command G" to group them. Then head over to the effects section here, hit this plus button and I'm going to add the layer blur effect to it, just like this. Now from the advanced settings, I'm going to increase the blur amount dramatically and I'm going to make sure that they smoothly blend together. Just like this. I'm going to increase it even more. Something like this should work. I can now go ahead and modify the size of these blobs and also change their order here depending on my needs. Something like this should work. We're almost done. However, this gradient looks quite flat. It doesn't have any texture. I'm going to add some noise to it to do that, I'm going to use another plugin called noise. Let me look for it here. There we go. I'm going to run it. Here you can adjust this noise however you want. You can modify the density, you can modify the contrast, etc. For now, I'm just going to modify the density. I think something like this should work. I'm going to hit this tick icon just like this. As you can see now, this noise has been added to my canvas. It's not inside the frame yet. I'm going to move it inside just like this. I'm going to scale it up just like that. But it's black. It doesn't look good. What I'm going to do is this, I'm going to decrease the opacity dramatically. I'm going to set it to maybe 10 percent. I can even decrease it down to maybe six percent, it looks good. I'm going to move it inside this group. Let me call this group gradient. That our mesh gradient is ready, it's time to animate it. The only thing we need to do is this. We need to just select this desktop, duplicate it, and then on the next screen here as our destination, we need to move these blobs around. I'm going to select this one, for example this vector and move it down and move this purple one up and make it larger. Just like this. I can move this yellow one up as well. I can change its order and make it much larger, just like this. Then I'm going to move everything else around one by one. We just want to let Figma know that these blobs should be moved and should be resized. I'm going to select this desktop one, head over to the prototype tab and just create a connection between these two frames. The trigger is going to be after delay. Obviously, the delay is going to be one millisecond, and the type of animation should be smart animate. Here the duration should be 10,000 milliseconds because we want these blobs to move so slowly. Just like this, and to loop this animation, I'm going to select this second frame and connect it back to this first frame. Everything else here should be intact. Now let me hit this Play button and let's see the result. All these colors are moving around smoothly. If you want, you can go ahead and add more colors to this gradient and even adjust the blur amount. Now let's see if we can somehow mask this gradient, like what we have here on this stripe website. It's so simple. I'm going to create a rectangle here, just like this, and while it's selected, I'm going to hit "Enter" to enter the edit mode, I'm going to grab this bottom right node and hold down the Shift key and move it up just like this. I can grab this one as well and move it down. Hit "Done" next in the layer's list, I'm going to move this rectangle one and put it below our gradient group. We shouldn't be able to see that. Before we mask this gradient, I'm going to select this rectangle one, hit "Control C" and select this second frame and hit "Control V" and bring it down as well, because we need to have this layer on both screens. Next, I'm going to select these two layers, the gradient group and this rectangle that we just created, head over to the toolbar and hit this button just like this. Now as you can see, we have this mask. Let's do the same thing for this screen, good. If I just select this desktop one and hit "Play", as you can see, we have this animated mesh gradient masked inside this shape. Guys, that's all for this video. Hope you enjoyed it and I'll see you in the next one. 19. Scroll Animation: [MUSIC] Apple's website has been a great source of design and interaction inspiration for many UI UX designers because of its amazing learning pages with smooth animations. In today's episode, I'm going to show you how to recreate the Apple Studio Display learning page, including this smooth animation in Figma. Let's dive in. If you go to apple.com and open up the Mac menu here, you can open up the display's menu. From here, if you select Studio Display, this learning page loads. If I scroll down, you will see that this animation plays. It's very smooth. Finally, we will get to this point. If I continue scrolling down, look what happens. The Studio Display appears smoothly and finally these two texts layers fade in. Let's analyze it first. We need to make sure that we have this image so I already downloaded this image. Also this Studio Display image should take up the whole available width and height of our screen, just like what we see here. Right in the middle, we need to have this text layer. Once that transition happens, this text layer should fade out and this Studio Display should be scaled down, and finally, these two texts layers should fade in. Let me show you how you can do it quickly in Figma. Here I already prepared this Apple Studio Display image and also I prepared these two texts layers. For this animation, I'm going to hit A and I'm going to create a custom size frame. Here I'm going to set the width and height to 1920 by 1080 respectively, just like that. Then I'm going to drag and drop this image inside this frame just like this. You need to make sure that it's scaled up like that because we just want to see the wallpaper at the moment. Then we need to bring this text right here. Let me drag and drop it. I'm going to make it white like that and I'm going to align it to the center both horizontally and vertically. That's step one. Next, I'm going to select this Frame 1, I'm going to duplicate it, hit Control D or Command D, bring it down just like this. In this step, we need to scale these two layers down. I'm going to hold down the Shift key and select them both. Now I'm going to hit K to select the scale tool, hold down the Shift key and Alt key to scale them down proportionately, just like that. I'm going to scale it down and also I am going to move them up. Next, I'm going to select this text layer and I am going to set its opacity to zero percent because it needs to disappear. Next, I'm going to duplicate this frame once again, bring it down. This time I'm going to move this frame up just like this. Here we need to place these two texts layers. So I'm going to bring them right here. It looks good. But in order to animate these texts layers, just like what we see here, we need to make sure that these two text layers are also placed on the second frame. I'm going to hit Control C or Command C, select Frame 2, hit Control V or Command V but these two texts layers should be masked somehow. I'm going to hold down the Shift key and space bar on my keyboard and bring them down just like that. Now, they are still inside Frame 2 but we cannot see it. We're almost done. We just need to add the interactions. I'm going to select this Frame 1, I'm going to head over to the prototype tab right here. Now I can simply connect these two screens just like that. I'm going to set the trigger to key. Here, I'm going to hit the right arrow key on my keyboard and the animation is going to be smart animate, ease out. Let's set it to 1000 milliseconds, It's going to be enough, I think. Let's do the same thing for this screen. I'm going to connect them. It's going to be key, smart animate and 1000 milliseconds. Let's give it a try and see how it looks. Good. I'm going to hit the right arrow key on my keyboard. Nice. As you can see, we had this smooth animation once again. Here we have an issue. These texts layers appear but they need to fade in. We need to make one adjustment here. If you just head over to Frame 2 and we select these two texts layers right here, then we can decrease the opacity to zero percent. Now it should work just fine. Let's give it a try once again. Good. There we go. Now we have this beautiful smooth transition. 20. Animated Tab Bar: [MUSIC]. In this video, we're going to create an animated tab bar together, just like what you see here. Let's get asserted. So here in the Figma project file, you need to go ahead and look for the animated tab bar page. And inside you can see that I already prepared a few icons for you. So usually for a tab, or we need to have two different states for our icons, we need to have the default state and selected state. So for that reason, here I prepared two different signs of these icons, the outline sign and the solid style. Since we are going to turn them into components, it's very important to know how to name them properly, because Figma is going to categorize them based on their names. So here we have Home forward slash Solid. For this one we have home Forward slash Outline. The same thing applies to all these other icons. So the first step is to turn our icons into components. So I'm going to select them all, head over to the toolbar and from here, select Create multiple components. Next, I'm going to select these outline icons, duplicate them to just create instance of these components. I'm going to hold down the Shift key on my keyboard and using the Arrow keys, I'm going to move them down just like this. As you can see, the icons are different here, indicating that these are the instances of these components because we don't want to use the master components in our design. While they are selected, I'm going to add other layout to them. So hit Shift and A. There we go. I'm going to name it tab bar. For this tab bar, let's have a background color. I'm going to add a fill to it. It's going to be white. Let's align everything to the center. Also let's change the padding here. I'm going to set the vertical padding to 24. As for the horizontal padding, let's set it to something like 66. That's fine. I'm going to increase the spacing between to something like 54. So far, so good. Now I'm going to go ahead and make this tab bar completely rounded. Later we can change its style, but for now, I prefer to have a rounded tab bar here. Let's preview our tab bar once again, let's see what we need to have. When a tab is selected, the icon should be changed to solid. Also, we need to see this circle behind that tab. I'm going to start by creating a circle here. Let me create a circle. Just like this. Just don't worry about it. It's taking up space. We're going to fix that. We just need to change the color as well. I'm going to change it to blue, something like this. While it's selected, I'm going to hit this plus button right here, which says absolute position. There we go. It's no longer taking up any space. I'm going to make sure that it's placed above all these tabs. Otherwise, we cannot see our tabs. Let's change its dimension to 40 by 40. I'm going to make sure that it's aligned with my tab here. I'm going to move it to the left side. If I hold down the Alt key or Option key on my keyboard, you can see that we have an eight padding on all sides. Next, we need to change this icon from outline to solid. It's going to be so simple since we turned all our icons into components, I'm going to select this one, Home Outline, head over to the design inspector. Here as you can see, we have this drop-down menu, and I'm going to open it up. I'm going to change it to solid. There we go. Next, we need to change its color to white and our tab bar is ready. Now, we need to turn this whole tab into a component, because we're going to add multiple variants to it. I am going to select the tab bar and just click on this button to turn it into a component and hit this button to add a few variants to it. In total, we need to have four variants because we have four different tabs. Good. For these components set, we need to have one property, and I'm going to name it tab. Next, let's select this first variant and change the value to home, which means that the home tab is selected. I'm going to select this one and change it to bookmark. Good. Let's select this one and change the value of this tab property to notification. Finally, for this one, let's change it to message. Now we need to modify these variants one-by-one. So I'm going to start with the circle. I'm going to select it here. Hold down the Shift key and move it to the right side. Just like this. Align it with this bookmark icon. Now I'm going to select My Home icon here, change its type from solid to outline. Here for this bookmark, I'm going to select it, change its type to solid, and change its color to white. I'm going to do the same thing for all these tabs. For this one, I'm going to select the Ellipse, hold down the Shift key and move it to the right side and put it behind this bell icon. There we go. Select this Home icon and change its type to outline. I'm going to select this bell icon and change it to solid and also make it white. Finally, for this one, select it, hold down the Shift key and put it behind a message icon. Just like that, make sure that it's perfectly aligned with your icon. Change the type of this Home icon to outline. I'm going to select this Message icon, change it to solid and make it white. So we have our tab bars. Now it's time to create connections. Here is how I'm going to do it. I'm going to start with this Home icon. We need to go ahead and select this Home icon and connect it to this first variant for all these three. So while it's selected, go to the Prototype tab and just connect it to this one, the first one. Here the trigger should be on click smart animate. I'm going to set the duration to 300 milliseconds. Let's do the same thing for this one. We don't need to change anything else and this one as well. Next, I'm going to do it for the bookmark. I'm going to select this one, connect it to the second variant. Select this one as well, connect it to the second variant finally, select this one, connect it to the second variant. Now let's do it for the bell icon. I'm going to connect it to the third variant, this one as well. Finally, this one. Last but not least, let's select this icon connected to the last variant, this one as well and this one, just like this. Now it's time to check it out. I'm going to create a frame here. You can create a phone frame. I'm going to create a custom size frame for now. Let's make it black, just like this. From assets, I'm going to go to animated tab bar and just drag and drop an instance of this tab bar here, just like this, and align it to the center. I'm going to select this frame. Hit Play, and let's see whether everything works fine or not. Here, we have our Home Selected state. I'm going to click on this one. There we go. It's fully responsive and interactive. How cool is that? That's all for this video. I'll see you in the next one. 21. Animated Image Carousel: [MUSIC] In this video, I'm going to show you how to create this animated image carousel in Figma, just like this. If you're ready, let's begin. I want you to go ahead and open up this animated image a carousel page within the Figma project. Inside you can see that I already prepared these images for you. Here we have a few Apple Watches, and also here I have this text group. As you can see, we have a simple title and a subtitle here. The first thing we need to do is to create a frame. I'm going to hit A on my keyboard and I'm going to create a custom size frame. Let's set the width and height to 500 pixels, just like that. Now, I'm going to select all these images and put them inside this frame. Let me move them down just like this. But the point is, we should only see one watch at a time. I'm going to select this Frame 1 here and I'm going to make sure that this clip content checkbox is selected. Otherwise, we will be able to see these watches. Make sure to check these checkmarks. I think we can move this image up a little bit. Wherever you want to move this image up, you need to make sure to select all other images as well. I'm going to select them all and move them up. What do we need here? Right under this image, we need to have this indicator. You may think we need to have a few circles and one rectangle but that's wrong. Why? Because look what happens here. When I drag this image, you see what happens. This first indicator becomes a circle and this second one becomes a rectangle. To create such an indicator, we need to use a rectangle from the beginning. We don't need any circle. Let me create a rectangle here, just like this. Make it very small, maybe 28 by eight, something like that. Make it completely rounded. But I'm going to put it right here and then I'm going to duplicate it, hit Control D or Command D. Move it to the right side. Now, this one should be a circle. To do that, we just need to make sure that the width and height are the same. I'm going to decrease the width to eight. Now, I'm going to duplicate it once again and put it right there. Now, I'm going to select them all and I'm going to add auto-layout to them, so hit Shift and A. There we go. Let me rename it to indicator, just like this. This first one, the selected one, should be a little bit darker. I'm going to make it a little bit darker as well, just like this. Our indicator is also ready. Let me align it to the center. I can move it up a little bit. The next thing we need is the texts layers. I'm going to bring them down here. Let's align it to the center and I'm going to move it up a little bit. We created our main frame. Now, it's time to animate this frame. To do that, we are going to use variance and interactive components, as usual. I'm going to select this Frame 1 and I'm going to turn it into a component, and I'm going to add one variant to it, just like this. Let me select this components set and change the property name to slide. This first variant is going to be one. This second one is going to be two. We will add another one in a few seconds. But first, let's see what we need to do here. If I just preview this carousel, you can see that when I drag this image to the left side, it starts to rotate just like this. Then the next watch enters the frame rotating as well, just like this. Here's what we need to do. We have our starting point here and it's fine. For this second variant, I'm going to select all these images, even those that are outside this frame. I'm going to hold down the Shift key, and using the arrow keys, I'm going to move them to the left side, just like this, until we see our second watch. Next, I'm going to select this one, align it to the center horizontally. Good. But now we just move them without any rotation. To make that rotation effect happen, I'm going to select this first one. I'm going to rotate it by 30 degrees. Hold down the Shift key and try to rotate it here by 30 degrees. Alternatively, you can just specify the value here. But what about this one? Here, as you can see, when I tried to drag it to the left side, the pink watch also rotates. To make that happen, I need to head over to my first variant here. I'm going to select this second one, which is our pink watch, and I'm going to rotate it to minus 30 degrees, just like this. Our first and second variants are ready. Now, we need one more variant. I'm going to select this second one and hit this Plus button to add one more variant. This one is going to be number 3. I'm going to repeat the same thing. I'm going to select all these images just like that. Hold down the Shift key and move them to the left side. There we go. Now, I'm going to select this yellow watch and allowing it to the center. Select this pink watch here, number 2 and rotate it by 30 degrees. Just like that as you can see here, we have 30 and in the second variant, we should also rotate this third watch. We need to rotate it to minus 30 degrees. But what about our indicator? The first one is already done. I'm going to zoom in here. For the second one, what I'm going to do is this, we can not simply move this one to the right side. Why? Because here, as you can see when I try to drag this watch to the left side, just like that, this indicator, the first one transforms to a circle. I'm not changing their position here and that's exactly what we need to do. I'm going to select this second one. I'm going to go to Design and I'm going to set its width to 28, just like what we have here. I'm going to change its color to this dark gray. Then I'm going to select this one, the first one, and set its width to eight and change its color to this light gray. We need to do the same thing here as well. I'm going to select this indicator and I'm going to select this third one, increase the width to 28, just like that. Change its color to dark gray. Select this one, set its width to eight, and just change its color back to light gray. Cool. For this example, I'm not going to change these texts layers such as color. It's going to be so simple, you can just set it to pink, green, and yellow. The main point you need to learn here is how to animate this watch and also this indicator. In case you face difficulties moving these watches around, especially when you can not see these watches outside, what you can do is this, you can hit Shift and O to enter the outline view. Now as you can see, even these watches outside this frame are visible to you and it's going to be so helpful when you want to move them around. To get back to the normal mode, you can hit Shift O again. But what about the connections? Here's what you need to do. Many people when they want to create this drag animation, make a very common mistake. They select their variant here, for example this one, Variant 1. Then they try to connect it to the next one and they just change the trigger to drag. That's not going to work. If you just connect these two variants like that, the drag animation won't work as you expected. Instead, you need to select this image, this one, and then try to create a connection between these two. Now, I'm going to set the trigger to on drag. It's going to be smart animate 300 milliseconds, looks fine. Let's do the same thing here. I'm going to select this one, connect it back to the first variant. It's going to be on drag again. Let's connect this one to the third one on drag and the third one to the second one, it's going to be on drag and we're basically done. Let's give it a try and see how it looks. I'm going to create a custom size frame here, 500 by 500 pixels, just like this. From assets, I'm going to look for animated image carousel and drag and drop this into this frame, align it both horizontally and vertically. You can go ahead and put it inside any frame you want. But for this example, I prefer to put it inside this frame and just preview it. Let's see if it works. There we go. It works just fine. Our indicator is animated and also we have this rotation effect here for these watches. In case you want to use this image carousel on a mobile phone. What you can do is this. You can create a mobile phone frame here, for example, iPhone 14, just like that. Then just drag and drop it inside and simply hit K and scale it down just like this. It would work perfectly if I just select this mobile frame and preview it. You can see that it works just fine. That's the beauty of using interactive components. Guys, hope you enjoyed this lesson. I'll see you in the next one. 22. Animated Floating Action Button: In this video, I'm going to show you how to create an animated floating action button just like this. If you're ready, let's dive in. Here within the Figma project file, I already prepared these buttons for you. To create this interaction, we need two different variants, we need this closed variant and also this opened variant. Here is what I'm going to do, I'm going to select this plus button and I'm going to turn it into a component just like this and I'm going to add a variant as well to create components set. This component set is going to be named button and also, its property is going to be named state. The value of this property for the first variant is going to be closed and for this one is going to be opened. So what do we need? Inside both of these variants, we need to have these buttons as well. I'm going to select these component set and I'm going to enlarge it. But look what happens, the problem here is that the constraints for these two buttons are not set properly. I'm going to select this one and I'm going to change the constraints to top and left and I'm going to make sure that this one has the same constraints as well. Now we can easily enlarge these components set. Let me move these variants around, somewhere around here and now I'm going to select these buttons and I'm going to put them inside this closed variant. Make sure that you place them inside this variant. Now I'm going to align everything vertically, just like this and horizontally, and make sure that you place them right here. You need to align it with your plus button. Next, I'm going to move them and put them below our plus icon and plus button, so this way we can hide them. Now while you are selected, I'm going to copy them, hit Control C or Command C, and I'm going to paste it inside this open variant as well. I'm going to select this open variant and hit Control V or Command V and just move them right here. Let's see what we need to get, when it's closed, we need to see this plus icon but when it's opened, we need to see this dismiss icon instead and then these buttons should pop up. I'm going to move this closed variant up a little bit to have more room here and the first thing I'm going to do is select this icon and just hold down the Shift key and rotate it by minus 45 degrees to get this dismiss icon. That's the first step. The next step is to unhide these buttons, the folder music, and video buttons. Let me see the order here, we need to have the folder here, the music, and the video right there. I'm going to start with the folder, let me select it here, hold down the Shift key, and using the arrow keys, I'm going to move it up just like this. I'm going to hold down the option key on my keyboard or the alt key to see the margin here. I'm going to set the margin to 16. Next, let's select this music button, hold down the Shift key and move it to the left side, just like that and the margin is going to be 16. Finally, I'm going to select this video button and hold down the Shift key and move it down just like this. So far, so good, but it's not exactly what we need. As you can see here, we have an arc. I'm going to move this up here and lets place them like this. We have our open variant, we have our closed variant as well, now it's time to create our connections. I'm going to select this first one, head over to prototype, and I'm going to connect it to this second variant, which is this open variant. The tree here should be on click smart animate in 300 milliseconds. I'm going to create a connection back to this closed variant now. Let's preview it and see whether it's what we wanted or not. I'm going to create a custom-size frame here, just like this and from assets, I'm going to drag and drop an instance of this button right there. Let me align it to the center, select this frame, and hit Play. I'm going to click on it and look what happens. Something is wrong, we have our animated icon here. This button appears, but what about the others, let's see what's wrong here. Here's the problem, when I move these buttons, I accidentally placed them outside this variant. I'm going to move them back inside, and now it should work. I'm going to click on it, there we go. We see we have this animation, but there is one more thing we need to do. As you can see here, we have this bounce effect. I think it's a good idea to add this bounce effect to this button as well. To do that, we just need to select this one, head over to Prototype, click on your interaction, and from here, I'm going to change the velocity from ease out to quick. I just want this interaction to have this bounce effect. For this close variant for this interaction, I want to keep it as is out. Let's give it a try. There we go. Guys, that's all for this video, I'll see you in the next one. 23. Accordion Effect: In this video, I'm going to show you how to create an animated accordion effect for these cards just like what you see here. Here inside this accordion effect page, I already prepared for you this card. It's a simple card that I created using other layout. Let's see what's inside. Inside we have this frame. As you can see, it's also responsive. I also added other layout to it and inside here we have this icon and this text layer. The important thing here is that the resizing option of this frame is set to hog to make this card responsive just like what you see here. Apart from that, we have this divider. It's a simple line and another text layer. For this accordion effect, we just need to have two different states ; closed and opened. Let's see how we can create one. We have this open state. I'm going to turn it into a component just like this and add a variant. I'm going to select these components set and change the property name to state. Now I'm going to select this first variant. It should be opened. That's fine. I'm going to select this second one and it should be closed. For this closed variant, what we need to do is hide this divider and also this text. Finally, we need to rotate this arrow by 180 degrees. Since I used other layout for this card, it's quite simple. I'm just going to select it and just hide it in the layers list. There we go. I'm going to select this one as well and hide it. You see that when you use other layout, since your element is responsive, it's very easy to create interactive components. Next I'm going to select this icon, hold down the shift key and rotate it by 180 degrees, and we are basically done. We just need to connect these two variance now. I'm going to select this one, head over to prototype, connect it to this, and it should be on tap and smart animate. I'm going to set it too "Quick" to get this bounce effect as you can see here. Now let's do the same thing for this variance. Just connected back to the clothes variance and we don't need to change anything here. Now it's time to give it a try. I'm going to create a frame here. Let me modify the background's color. Let me change it to light blue, something like this. I'm going to go to "Assets" and from here, I'm going to look for my card. Let's drag and drop it inside just like that and I'm going to change its state to closed. Now let's select this frame, hit "Play." I'm going to click on it. There we go, it works as expected. But here's the good thing about other layout. Now I can simply duplicate this card, hit Control D or Command D, move it down, duplicate it a few times like this. Maybe once again, move it down. Now I'm going to select them all just like this and I'm going to add other layout to all of them. Hit Shift and A. If I go ahead and make this frame a little bit larger, just like this, and I try to preview it, look what we get. There we go. We have a responsive list of cards with this accordion effect. How cool is that. All right guys. That's all for this video. I'll see you in the next one. 24. What's next: Congratulations on completing the course successfully. You've come a long way and I'm so proud of you, but you may be wondering, what's the next step for you? Well, first, make sure to submit the projects you've made on Skillshare because I'd love to see what you've created. Next, I'd appreciate it if you could leave an honest review of the course so I could make it better for you. If you want to get notified about the latest course updates, make sure to follow me on Skillshare. If you want to learn more about UI/ UX design and prototyping, you can also check out my YouTube channel, where I publish design-related videos weekly. It was an honor to be your instructor in this course, and I hope to see you in my other courses. Have a beautiful day, and bye-bye.