The Ultimate Figma Prototyping & Animation Course

1. 01 Introduction: Static designs are boring. Want to make your UI come alive, learn how to create smooth interactive prototype in Figma fast. In this course, you will learn micro interaction, create engaging buttons animations, page transitions, design smooth navigation flows, smart animate, bring your UI elements to life. Hands on project learning by building real prototypes, no fluff, practical skill, whether you are beginner or UIUX designer, this course will make you a pro at prototyping and animation in no time. Take your UI design skills to the next level, enroll now and start animating today. 2. 02 Figma Basic Prototyping: Want to start designing in Figma, but not sure how to get started, let me download and install Figma in just a few steps. Open your browser and go to figma.com. To use Figma on your desktop, go to Download page and install the Figma desktop app or make or window. That's it. Now open Figma and create new file and start designing. Okay, so now as we can see, we are inside in FIGMa In this course, we will not focusing on UI design. We will be only focusing on prototyping and animation. So this is just a quick warm up video for prototyping in Pigma. If you are new to prototyping, this video is perfect for you guys to understand how exactly Pigma prototyping works. In the next video, we will start a prototyping practical project. So let's start. First, we need to select frame. So let's click on this frame. And as you can see on the right side, we have multiple presets or frames Pigma provides, so we can select iPone 16. And as we can see our frame is created, first, we need to rename this, so this is screen one. Okay. Now, simply create some elements here. So let's select our rectangle and let's draw rectangle. So as you can see, this is how we can create rectangle central line, and next, we need to change the color of the rectangle. So now let's select our first frame, press Command D on the keyboard and as we can see screen two is created. In the second screen, let's quickly change this and let's change the color of this rectangle to this green. Now, let's select our first prime, click on prototype, and as we can see, first, we need to select show prototyping settings. And here, as we can see, this is iPhone 16. So Figma, by default, select iPhone 16, mockup for us. Okay. So here we can change the color. So as we can see color the background, and we can simply change it. So let's leave it this blue color, and we can use portrait and landscape. And let's change the phone color. So let's make it teal or maybe let's use this pink color. And here we can simply change to the other devices if you want. So we have already created our pun size, so let's stick with iPone 16. Next, we need to click on our pus frame again, as we can see here, we see the plus with the circle. So let's create our pus noodle click and as we can see Figma create this link, which is called noodle. So let's drag noodle and connect it to screen now here is the fun part start. As we can see the first option is trigger, then action, then destination, animation, curve, and duration. These are the main magic parts of Pigma prototyping. First, let's select Bdpart this on tape and let's check what's happening. Let's select this and as we can see this is flow one and here is our flow one. Let's select this rename this to prototype. And here is the interaction, and as we can see, we can simply change this from here, and this is available if you want to change anything. Let's quickly click on this play icon, and as we can see our phone is appear when I tape and this is changed to this screen. This is the basic prototyping. Now let's click on this and instead on tape, let's use one. For the ORG, we will simply again, click on preview and simply drag this so it will move to screen now let's change this to while hooring and this is interesting. Let's check. While Hering, as we can see, this is on the second state and now first state, while hoing second state, and first state. So it will change while houring. So this is best for button hour effect or any how animation we want, so we can create wiling Okay, now let's quickly see the other properties while pressing. So let's click and preview, and once I press, as you can see, this will change. So let's quickly change this to key and gamepad. Okay, let's discuss the key slash gamepad. For this, we need to assign keyboard key and it will trigger the animation. So let's say if I press space bar, as we can see space is here, so it will trigger the animation. This time, let's click on this play. We can also create a separate window, and it will show our prototype. And as we can see, this is color we assign to the background, and this is our phone in a separate window. We can preview in two types. One is like this way, present way, which is a separate page, and here we can preview, and other one is like preview, and this one is present. As you can see, I'm clicking and this is not working, but once I press Spacebar and this works. Okay. So this is how gamepad work, and let's change this to mouse enter, mouse, leave, touch up, touch, down. These are the same functions like the above, you can test it and see how it is working. But the most important one is after delay. We will be using this feature the most. So let's quickly reveal this and click Select after Delay. And here we need to assign time. Like that much time we need after this time, complete the animation play Okay. So for example, we set the trigger and select the trigger after delay, and here we assign the time 800 millisecond. Let's say if we make it 1,000 milliseconds, which is equal to 1 second, and now our action is to navigate to screen two and smart animate is out live we will discuss it shortly, but let's quickly test it out. So I will be using this window again. And as we can see, after 1 second, animation play its is really cool feature. Now, let's see, we have discovered all these feature for the trigger, and now it's time to look at the action. So for the action, we will not discussing these features. We will only use this navigate to feature. And this is basically the destination. So we want Fegma to specify the destination. So this is first screen and the destination will be second screen. So it is automatically selected while we create our Okay, next, we need to define the animation. So for the animation, let's say, I select instant first. Okay. So let's start with the instant first. And let's quickly review this. So after 1 second, instantly, the state B like the second screen appears. Okay, let's review it again. After 1 second and quickly, nothing happened and just instantly screen two is appear if you want to replay our action, so just press R on the keyboard, and as you can see, it's reload again. We will be using D yard cut a lot, so no problem, you will learn very easily. Okay. So now as we can see, now let's make it dissolve. Quickly preview this. And as we can see, this is like a dissolve effect. And let's now change to Smart animate. This is the most using feature, and this is the most advanced feature if you want to create some cool looking animation, and let's select it quickly see this. Okay? So let's click on this play button, and as you can see, after 1 second, smart Animate. So the Smart animate basically creating link between the first state and the second state, and it shows like a seamless way. So in this way, as we can see, press R again to reload our animation, this is looking great. So it seems like the rectangle is small, and then it's become bigger. And this is how smart Animate Okay, but make sure that we don't need to change the color sorry, the name after rectangle. Like, for example, in State A rectangle one, here, as we can see rectangle one and State B, here is also rectangle one. If we change these two, let's say rectangle two. So now as we can see the link between these two rectangle is broken now. We have a link for the page, but smart animate will not work. As you can see, there is no movement between two rectangles. So make sure you have the same name for both rectangle and let's make it rectangle one for both. It will work. And as you can see, we can simply change this to for example, if I make this fully round, make it 99 and now let's click on Prototype. And this time, I will be using shortcut Shift spacebr let's click Shift space bar and looking great. Circle to rectangle. This is how it will work. So now select again and here, let's change this to so now we know the smart animate and you can also review these features, you can practice and Okay. Now let's move to this feature. Okay? These are the important ones. So let's start with the linear and let's quickly check this. As you can see, linear is like a smooth animation from start to end. So there will be no bouncing or anything first state and second state, both animation will work in the same flow. Now let's first check the es in feature. So let's quickly review es in and it starts slow and then become normal. So this is how es in work. This will now ease out, so ease out, for example, it will pass load and then become easier at the end. So let's quickly check this and as we can for some cases, we will be using different as we need. So we will be using this feature a lot ease in and out. It will load with ease and in the center, it will stay constant, and at the end, it will ease out. So let's quickly check this. Es in, es out. You can quickly check these features, and later in the course, we will learn these in practical way. So you can practice. And this is how the basic prototyping and stay tuned for the course. Okay? 3. 03 Figma Animation: Okay, now it's time to work on the real project, and this is basically a sign up low process, and let's start. So first, we need to select all these four frames, and next we need to click on this 90 degree and let's make it zero. And inside spacing, let's type 200. So now, as we can see, our layout is in vertical format, and this is looking perfect. Now let's start and creating our first screen animation. So for this, we need to duplicate this screen. So let's select screen and fresh Fk on the keyboard. So these blue circle appears. So now let's click on this plus. And as we can see, we duplicate or screen duplicate one more time. So this is basically for the background this is for the logo. This is for the title, and this is for the progress bar and button. Okay, so this is how we need to create copy of the same screen. And now let's quickly rename this so this one will be background. The second one will be let's make this one is Progress bar, and this one will be logo. Okay, so now as we can see, we have created multiple copy of the get started screen. So let's start from the background. We will delete all the elements, except background. So let's delete all these elements and we only need background here. Okay, in this screen, we will also remove all the elements except progress bar. And for the logo, we will refet the same process Now we need to work on the background. Here, as we can see, this is the frame and we created Ellips and for the ellipse, we apply this blue color and here is blur property. So in this frame for the background animation, we will learn how to animate background blur. Also, we will adjust opacity. These two property we will learn in this background animation. Okay. So let's select background and press Option Command K on the keyboard to create component and we can also use the shortcut. Okay, so now let's create component of background, so we can select background frame and we can click here in this icon or we can use the shortcut key. So let's use the shortcut key option command K. And as we can see, we convert this to component, and now let's create variant of the same component. So let's select background and click on this plus to create variant. And this is variant two. Now press Command D on the keyboard variant three and duplicate one more time. Now as you can see, we created four variants of the same background. Now, let's click on the background main frame, and let's add some spacing, so 100 is fine. And let's click on resize to fit option. So we need to visible all the frame inside or component frame. So now we will start from the first frame. So let's double click and select Ellipse. Let's make it slightly off the frame, something like this. Okay. And as we can see, or Ellipse frame is here outside of the frame. In the second frame, we want the ellipse to be on the left side. Something like this. In the third frame, we want our ellipse to be at the bottom in this corner third sorry, in the fourth frame, we need the ellipse to be somewhere here. This is how we create our background ellipse position and now let's change the ellipse property. Let's select ellipse and click on the layer blur and here we will make it 500 blur and also at the same time, let's change the ovacity by pressing the numbers key on the keyboard. Let's try 70% or 60% for the second frame, for the third one, let's change first the blur property. Let's make it 400 also change the opesity. So let's make it 50%. And here we need to change the blood property. So let's try 700 Okay. Now let's connect all these frame together inside prototype, and then we will review the animation. Let's click on the prototype and inside prototype, click on the plus and rag noodle to the second frame and let's change the trigger after delay and make it one millisecond action change to property variant two and animation smart animate, we will use Smart animate for the curve. Instead of easing es out, we will use linear, so we want linear animation. And for this duration, let's try 300 so then we will see the difference and we will update it Okay. So this is the basic property for the first and second frame, let's create another noodle and connect third screen, which is variant three, and this will be also after delay. One millisecond, we want instant without any delay, and let's make it smart animate linear and 300. And now let's create fourth screen, and let's make it after delay. One millisecond change property to variant four, smart animate linear. Now we need to re copy of this to preview. So let's select BgroundPFrame and press Option key on the keyboard and let's create copy of this. Now it's time to preview our animation and change it if there is any modification needed. So press Shift and spacebar on the keyboard, now press R again to replay press R again. So now our animation is looking good, but we need to reduce the speed. For reducing the speed of the animation, let's click on the prototype tape again, click after delay, and here we need to make it instead of 300, let's try 3,000 millisecond. Select the same. For the second one, we will make it 3,000. And let's change for this one to 3,000. Okay. Let's check. I think we didn't connect the last one to the first one for the loop animation once it's reached to the last frame, so it's restart again. So let's click on the last frame and connect it to the first frame again. Okay? So after a delay, one millisecond and also 3,000. Okay. So now let's select the frame again, free shift space bar on the keyboard. And as we can see, our animation is looking very smooth and gentle and our background is moving. Here is some blur animation. So in this background, we learn two type of animation like the blur property and the opacity. Change opacity and blur in this background, and we created this cool looking effect. And now let's select, click on the design tape and select this frame, press Command X on the keyboard, and let's replace it with this, click on pace to replace. And center line both vertical and horizontal, now select this frame and press Shift spacebar on the keyboard, as we can see our background is animating and which is looking per now it's time to work on the progress bar, and we will do the same thing for the progress bar, press Option Command K to convert this to component, and now let's click on the Ed variant property. Here, we need to create three variants. So press Command D again to duplicate one more time, so variant three. And now let's add some spacing between the frame. So let's click on the main frame and here inside spacing, let's type 100 as we did for previous one. So as we can see, our third frame is cut off inside this frame. So let's click on this master frame and let's select resize to fit option, so it will reveal third frame. And now as we can we will do the progress bar like it will start from this position here. In this frame, we will complete our progress bar. In the third frame, we will make it height. So for this, let's select the second frame. Now let's first check the size. So here we need to simply make it 180 to make it simple. So let's center line, and we will do the same thing here, 180 for this one, to make it easy for us to remember and 180 here, sorry, here, 180. Okay, so now we make it 180 for the second one, like the first position is here, and in the second, we need to increase the width of this rectangle. So let's make it 180. Here, our progress bar is completed, and here we need to make it zero opacity. Okay? So we need opacity to zero to finish our progress bar. Now click on the prototype and select the first frame, drag noodle to the second one and select after delay, make it one millisecond and change to this smart animate linear is fine. A let's try 3,000 millisecond here and let's make it after delay, one millisecond, smart animate, and let's make it instant. We don't need any smart animate for the hide option. We need quick instant. Let's close this. Now let's press Option key on the keyboard and drag copy of component and ship spacebar on the keyboard and now let's quickly preview perfect and high, which is looking good. Now let's repeat it again by pressing arch on the keyboard. Complete and done. Now let's select our progress bar, click on the design tape and press Command X on the keyboard and press to replace. Now centerline, as we can see here, let's select our progress bar and press Enter key and return key, and remove the background. Remove the fill, we will make it transparent. Here, we don't need background. Now let's quickly review. So as we can see or background is moving or progress bar is also animating, let's restart it again. And looking perfect, later we will also adjust the timing of each animation. Okay, so now it's time to work on the logo and create animation for the logo. So we will do the same thing. Select logo frame, press Option Command Key to convert these to component. Let's click on the plus, and I think let's create four variants for the logo. As we can see, we have created four copy of the same frame. Now let's add some spacing between the frames. So select logo frame and click 100 and as we can see our fourth frame is cut off. So let's click on the resize to fit option to visible all the four frames here. Okay. So now let's zoom in and start from the So here we need to select this first logo frame, and here we need to turn on our white fill. This is vector shape, as we can see. This is vector frame, and here is also filed, but it is not visible here. So let's turn on, and here we will make a corner radius to 99 to fully round. It is a circle. Instead of logo, we can simply rag it outside of the frame. So our animation will start from and also lock expect ratio here, let's try to use 24 for the width and height and center line. It is important to center line and we will reduce the width and height. Let's make it 24 and now select second frame. And here we will also do the same thing here and make it fully round, make it 99, align it to the bottom and here we did 16, I think, 24. So let's double the size. So let's make it 40 or 48. I think 40 is fine, so let's make it 40. And in this screen, third one, we will make it same property like turn on fill color, and also fully round it, let's slightly make it and in the fourth frame, the logo will be in the final position. So here we will add one more property and let's try transform. So let's make it 180. Now, let's quickly link frames so that we can preview the animation. Click on Prototype, select first frame, drag noodle to the second one, and let's make it after delay, one millisecond instead of instance, let's try to use Smart animate and this time we will uses in and out. Is in and out and let's make the animation smooth. So let's try 600, select the second frame, let's connect it to the third frame, after delay one millisecond is in Is out Smart animate 600. Let's quickly change it to the after a delay, one millisecond and in E out Smart animate and also 600 millisecond. Now let's quickly grab copies by pressing Option key and let's duplicate our screen, press Shift space bar, and as we can see, it's looking good and we will do the same thing for the logo to press Enter to select subframe of this mainframe and remove the background. Minus background and we want the logo animation to be transparent. Press Command X on the keyboard here, we will simply select our logo. Okay, so as we can see, we slightly need to adjust here is our background and here is our progress bar, let's drag the progress bar on the top of the background and now we can select our logo and paste to replace. Also center line, bring the logo. Now once we click on the space bar, so all the animation play at one time because we set after delay one millisecond, every element start animating at the same time. We will adjust it later. But now we will focus on only animation. So now it's time to create a title animation, so click on the title frame and press Shift on the keyboard to Zoom to selection. First thing we will do is to convert this to component by Option Command K to convert this to component. And before creating variants, let's slightly do some changes, and then we will create variants. Okay? So let's double click here as we can see original spacing, and this is basically Autolyo. So let's increase it to maybe let's make it minus. Okay? So let's try -48 central line. So now, as you can see, we remove the spacing, and this is the initial state, and we will do one more change. Okay, so let's draw rectangle. Central line. Now let's click on the effects from the drop down select layer blur. Let's make it 50 blur. Now let's quickly change the color up the blur. Let's make it the same up the background color, dark. Now Cindy to B, we need this frame at the top, rectangle at the bottom. Now select both and create mask. Now select rectangle, make it outside of the mainframe, something like this. Now we need to select our frame and create variant. Now let's create the second variant. Let's quickly create third variant and fourth. Now we need to select mainframe and we will add some spacing here. Let's make it 100. Now we can animate or second frame. Now let's adjust the second frame. Inside the second frame, we need to select rectangle and central line. Also, we will make it 32 central line. Now in the third frame, we need to do the same process central line. The previous one here is 32 and in this one, let's make it bouncy animation. Let's try eight central line. And here at variant four, we can simply align this to center, and also let's make it original size, which is 16 and central line. Okay. So now let's connect this by prototyping and create some animation. So let's click on the prototype tape. Now let's connect this to second frame. As we know we will make it animation. So after delay will work. So one millisecond, smart animate in e out 600 millisecond. Okay? So let's quickly link this and make it after delay one millisecond, and Smart animate is in is out. And let's create third and fourth link. And here, make it after delay one millisecond, and Smart is in IO and 600. Okay so now quickly create copy. So let's press Option key and create copy. Okay. Let's review this press Shift spacebar and this is how the cool looking animations. Before placing the title, we need to select the mainframe, press Enter and return key and remove the background. Okay, we don't need background with the title. Now, press Command X on the keyboard and now let's change title, right click pace to replace center line. Now, press Shift spacebar and let's quickly review our animation. Now everything is looking perfect. Okay, so now as we can see we have completed all these, so now it's time to create or button animation. So for the button, button frame and press Shift two on the keyboard to zoom in, and we will do the same thing for the button. Convert this to component by pressing Option Command K, and now let's create variant. For the variant, we will click this, and as you can see, we have created variants. So now let's create 34 variants for the button, and we will see for the animation. So now work on the spacing, make it 100. And also, as we can see, frame is cut out, so let's make it resize to fit. Okay, so let's start. First, we need to select in this first state, we need the button to be outside of the page. Let's first apply effect. Okay, let's click effects and make it layer blur. And here we will make it 50%. So it will be completely blur, also outside of the screen, something like this. In this state, button is outside of the screen. Now button appears, okay? Like this one will be hour state. So for the Her state, what I'm thinking that we can increase the shadow of the button. So once user hour are tape, basically, this is mobile, so there is no hour, but part of the class, let's think about as a web. So let's make it 16 and 32 also increase the shadow slightly, 60%. Okay. So as we can see, now once user hover on mouse, so it will increase the shadow, and this will how as a button work. And I think we don't need this stay here. So let's delete the state four variant four, and let's click on resize to fit to resize the frame. Okay. And now simply link this so that we can see is it working or not. So the first frame will link to the second variant after delay one millisecond. And smart animate is in Es out and 600, which is fine. And now for this state, I'm thinking that we don't need to link the whole page. We will simply select a specific element like this button and now click on the Plus and create noodle to third state and here, make it while hoaring. Again, this is not applicable for the mobile, but it's okay. We can Okay, so let's leave it Smart animates in Is out 600, and as we can see now, let's click on design option and create copy. Now press Shift Enter. Sorry, shift space bar. And as we can see the animation, now let's replay. So this is how the button loads. And once I hoar on the button, so you can see the shadow. We can also increase the text size and button height. We can do many things like round the buttons, but this is how you can animate button. Okay. And we will do the same thing here, click on this Master frame and press Enter and remove the background. Okay, we don't need background, and let's select this frame, Command X, and here we need to replace it with the button. So let's click on the button and pass through replace. Okay. And now let's center line. So now as you can see, let's quickly align the layer. So the first thing need to be like Tatus bar. So this is at the top and background progress bar logo. Press shipped space bar, and as you can see, everything is moving now once I click, now we need to create times. So first, we need to create background animation, then progress bar, then logo, title, and at the last, we need buttons up here. So this is how we need to create. Okay, so now it's time for the class project, and the class project is to animate the status bar and the home indicator, share it with me so that I can review Please definitely work on these two and animate it see you in the next video. Okay, so I assume that you did the class project, and I also did because if you guys don't know how to create and do animation, so I did, and let me share what I did. Okay? So let's select frame and press Shift space bar. So as you can see, this is slightly animating from outside to the frame, and this is slightly bouncing animation. Let's preview one more time, as we can see this bouncing animation and this slide in. Okay? So let's replace it with the actual status bar. So now we need to select the mainframe press And select inside frame, remove the background. We don't need background now select frame, and we will replace it with the original. So let's delete this one and let's right click Pace to replace. Okay, so far so good. So now let's quickly review our animation, and as we can see, let's click on this frame and press Shift to Zoom to selection and press Ship space bar to review it quickly. And as we can see now we have one issue. Everything is looking perfect, but every element is load so we don't need, for example, we want this immediate action only for the background and progress indicator, also for the status bar. Once these are completed, then we need to load the logo animation, and after the logo, we need to load title animation, and also after all the animation complete, we need button at the end. Okay. So let's time specific all the elements let's start. First, we need to check the background. So the background is like, click on the prototype, and as we can see, set the background to one millisecond, which is good, and it will be immediately load background animation, which is fine. And also for the progress bar, I think one millisecond is fine. So let's leave it. For the logo, now let's, for example, what I'm thinking that once this animation is complete, we need then the logo animation start. So let's see if I make it 2,002 seconds. So let's check and review press Shift space bar, and as we can see now logo is quickly loaded as the Progress also we can do one thing we can click on this and we can specific like we don't need button, so we can hide the button. We can hide the title. We can only focus on these elements like logo, progress bar, and background. So let's quickly review, and as we can see, load slightly quickly. So let's increase the time of the logo. Click on the prototype after delay, and let's make it 3,000. Now, again, let's review this Animation load, and logo start looking good. Now let's turn on the title. Simply 3 seconds for the logo. So for the title, let's double this. Let's make it 6,000 press Enter, and let's quickly review it. Progress bar, logo, why it's not working. Okay, so let's try to make it instead of six. Let's try five second, and let's see if it is working or not. It's looking good. So let's make it 5,000 for the title, and let's now specific for the button. So now an issue, don't know why this is happening. So let's make it seven second, and let's see. And it's working good. Everything is looking perfect and also the hour is working good and background is animating. And this is how we create our basic animation for our UIUX project. Now it's time to work on the second screen. So let's quickly review our second screen, click and press shaped space bar. And now, as you can see in this screen, we can animate this active state and this cursor, which will be blinking so the user can feel that this is active state. Also, once the user tape on this I icon, it will hide unhid icon, it will change our swap with the hide and unhide icon and also taping on this to check and uncheck. So let's start. We need to select this screen and press command C on the keyboard, paste it here. Let's start first active state. Let's double click and select this specific group which is steps and inside frame. So let's copy and paste it here, press Shift two on the keyboard to Zoom to selection. Now as you can see in this frame, let's expand it and let's see what inside. So here is this white circle, blue circle, and 20% transparent blue circle, which is slightly bigger like P two. So now let's simply what we can do, we can add one more circle. So let's select this wave circle and let's simply duplicate. Now we will simply make this one and make it bigger as same size like this white circle and this one will be 32. Now select mainframe and convert this to component by option Command K and let's quickly create variant. Variant two is created. Now select this component frame and increase both weight and height and align it to the center. Now let's increase the size of this wave layer which is 32, so let's try make it 64. Now, as we can see, this is 64, and we need to drop the opacity to zero. So let's click inside opacity and make it zero. Select this wave layer and increase it to 32. Now simply we need to connect it and click on the prototype and select this frame and connect it to this one. We will make it after delay one millisecond change too, and let's make this one is smart animate and linear is fine. We can also make it easy ease out, but it will not work. So let's make it linear. We want some linear effect. Also, let's try 300 for now, and then we will just Okay, and we will connect the second one again to the first one to make some loop animation. So let's click and make it after delay one millisecond, change to default smart Animate 300. Okay. And now let's simply click on the design, create copy by Option key, and simply create frame around this element. Okay, central line click on this white frame and free shaped space bar, as we can see. Now we need to slightly change the state, too, so let close this, click on the second state, click on Prototype. Instead of Smart animate, we need to make it instant. Okay. And now let's review this working grade, but we need to slightly reduce the speed. So select the first one and let's try 600 to make it slow down. And I think it's looking great. And let's press Command X, double click, right click pass to replace. And now select the screen, shipped space bar, and as we can see, this is working great. Now let's work on blanking cursor. Okay, so we need to select this cursor, which is in a separate frame. And as we can see inside frame, here is a text with the pipe symbol. Okay, so now select this whole frame, Command C, past here, convert this to component by option Command K, create variant, variant two is fine. So let's press Enter to select the inside element, which is this text and press zero on the keyboard or we can make it zero opacity here. Now simply select first one, click on Prototype and link it to the second one, make it after delay. One millisecond, and let's make it smart animate, and let's try 600 maybe is fine, which was the previous one. Let's try and connect this one back after delay, one millisecond, smart animate linear which is looking great. Okay. Now simply click and with the option, create copy, press Command X, double click, right click and paste to replace. And now let's quickly preview. I think let's slightly reduce, so maybe 400 or 500, which will work great. So let's click on Prototype, let's drag to select both. Let's make it 400. Now, select. I think it's looking more natural. Let's work on taping show and hide icon. Okay. Okay, so now as we can see, we have these two icons. Now, let's select both, and here we need to click on this arrow and select Create component sets. Okay? So now as we can see component set is created, we can simply click on this and select prototype and this time, we need to select Click. Okay? So let's select Click and Smart Animate is in is out, and let's make it 300 and now select one user tape on it again. So it will go to State one tape, hide and smart animate in is out, and let's quickly test. So let's drag one icon with the option key, and let's create frame. Let's change color of the frame to central line. Click on the frame shift space bar, as you can see, once I ho so this cursor icon is changed. Now tape on it, show and hi. Okay, now we need to simply select our icon with Command X. Let's replace it here, pass to replace. And now quickly review this as you can see this wave animation cursor is blinking and once I tape on it, so it will show the pass Okay, so now as we can see, we have created this click state. I'm thinking it's slightly different. Like, for example, if I use tape on it, so it will show the password. So let's quickly create this state. Okay. So now let's click on the design tape and select in foot field and copy, paste it here. Now, let's simply create component, click and create variant. Okay, so this is variant two. For the variant two, we need to make it fully white, so it's now 50%, and let's press zero, so it will make it 100%. Same thing for the password. Let's change it to so for example, this is my password, and now here we need a different icon. So this one is default icon, and this one will be Show password. So for this, we need to select both icon with the option key drag now delete this we don't need and simply select both and click DTH stance. Now select first one. Double click here and paste to replace and select this one, Commandx, Double click and paste to replace. Now we need to select this icon, click on Prototype. Once user tape on this icon, it will trigger on click and Smart Animate is in IO and 300, which is from the previous animation. Let's try and select this one. Click smart animate E in Es out. Now let's click on the design tape and press Option key, create copy Command X, simply double click right click paste to replace. Now let's check it again as we can see everything is animating and once I click on it, it is now showing the password, click again and it will show and hide. Let's make it. Okay, so it is 300. Let's make it 200. Let's try dissolve and linear. Let's make it instant. So for the instant, as we can see yeah, I think instant is looking perfect, and we need to stick with the instant. Okay. And now let's create tape. It will uncheck and check. Now press Command C, copy this check and paste it here, duplicate it, and let's delete the check, and let's copy the properties from this. This is basically default state, and the info is like 10% white and 20% white per the border. So let's make white, 10%, and for the stroke, make it white and try 20%. Okay? So this is default state, and this is active state and check unchecked. So let's make now select both, create component set and create copy Command X, click Right click page to replace. Now let's check again, everything's looking great. We can see the password. Okay, we didn't connect these two together, so let's click on Prototype and click click and on tape, which is, okay, let's try Smart animate. Let's use in IO, 200. Same thing for this state, connected BI is out. Let's quickly check this. Working great. And this is how this page will look like. Also, let's try and tape, we can animate the shadow. So let's quickly create. Okay, so for the button, let's duplicate it. Okay. Okay, so let's create component again and create variant. Let's add some spacing. So 100 and resize to fit. Okay, so this one is default state and this one is click state. Okay? Let's increase it. Okay, so for the click, let's click on the drop shadow, make it 16 and 32, and let's try 60%. Okay. Now let's click on the prototype and on click Is in Iso. Now let's create copy with the Option key Commandex and paste to replace. Okay, now as we can see, we have completed our step one and let's quickly preview it. Everything is looking perfect and we have changed our password and also this is working. I have changed this tate while horing now as we can see because we will test it on desktop with mouse, we need hour effect. So I changed this to hoor and everything is looking perfect. Now let's press Command. It here. Okay? This is final version of this screen, and now we need to move to step two, and let's quickly analyze screen two. Okay. So prese shaped spacebar copy and paste the active state here. So it will animate on user click on the plus, so it will show the user picture, and we will keep this input on tape. So on tape, it will show actual data, and also the phone number this is selected, we will change the button to while HringT is how we will do our step two. So let's quickly start and create our Step two. So we need to press Command C on the keyboard, paste it here. Okay, now we need grabe copy and press Command X. Let's double click and paste to replace, simply shift spacebar and as we can see, this is working, and now we need to click on this frame, Command C and paste it here. Okay. Now let's simply convert this to component and add another variant. For this variant, we need to simply remove this. We don't need this user icon, so let's delete a whole frame, and we need to make it 100%. So let's try 100 and Okay, we don't need stroke, and let's run the plug in. So here we need to search for user. Okay, so let's run this plug in female and select only female. Okay, this is looking great. And so let's select the frame, click on prototype on click Smart Animate Instant. We need to make it instant. This picture will appear. Now let's create copy and press Command X. Let's select the main frame past to replace, and now let's quickly check. So as you can see, animation is working, once I click. Okay, so one thing I noticed that we need Click on stroke, and let's make it outside two person, make it white, and let's use 20%. Okay, now let's press shift Spacebar, click, and everything's looking perfect. And now we need to create tape state for these two info. So let's select this input. Command C, paste it here. Now let's create component and create another variant. Okay, so for the initial, let's change this text to data birth, and for this one here is actual data birth. So let's make it white with 100% opacity. Now let's click on prototype, select on click Instant, and this is how this input will work. Okay, so let's create copy with option key Command X, let's simply paste to replace. Okay. So now let's test it again. Picture, click Data Brth and now we need to do it with the phone. So for the phone number, Command C, Paste, let's quickly create component by option Command K, create variant. And for this variant, let's make it. Okay. So now let's click on Prototype connect on click Instant. Press Option key, create copy Command X, simply double click paste to replace. As usual, test it again. Picture, databth, phone number, and female is also selected. We can create, but in our previous video, we have already created check unchecked. So this will work same for male and female, but leave it. Also let's replace the button. So for the button, we can create copy and Command X. Let's simply paste to replace, shift spacebar, create picture, phone number, and while Hiring, this is working perfect. And this is how our step two will look like now press Command and paste it now we need to work on this screen and for this screen as we can see, this is the final confirmation step and we need to animate this CPT, which will be here at zero point and it will move to 200% on scale. It will show some of animation. This is the final state, so let's quickly create. Now we need to select our third step and press Command C on the keyboard and let's place it here. First copy this animation and we need to command X on the keyboard and pass to replace. And let's quickly check this. It's working, and this is how we need to create one time, and we will reuse it again and again. Okay? Now, let's duplicate this screen. Now let's delete the status bar home indicator. So on this screen, we only need confiti. Now convert this to component and press Option Command K, and let's create variant first. So this is variant two. Okay, so now we have created or state one and State two, let's add some spacing, so 100 and resize to fat option. Now we need for the first state, the confity to be very small. So let's try this size. Okay, maybe let's make it more small. Next, we need to press return key and enter key on the keyboard and transform it to 180 degree. Now let's make it to the bottom of the screen and also make it outside. So the first state, we need to be outside of the screen, and in the second state, press K. Let's scale it to ten x. Okay, drag it manually. So for this state, we need to press return key again to select the inside elements. Let's make the opacity zero. Okay, and now simply create copy by pressing Option key and shipped spacebar. Okay. Now let's link this click prototype and link this after delay. Let's try 600 milliseconds wherein two smart animate eine out, and let's review it. I think it's looking good. Last thing, we need to select Master frame and return key, remove the pground and now select this frame Command X, past to replace center line and send it to BC. Okay. And now let's center line the text. Also make the button closer to the text. Okay. So now we need to press shift space bar, and this is how last screen will work. Okay, press R again. We can do a lot of things with the animation and this but let's keep it simple. And this is how the last confirmation screen and now press Command X, paste it here. So this is our updated screen. Now it's time to link all these screen together, and we will make a prototype. So we did animation and now it will link these screens to each other and make a clickable prototype. 4. 04 Prototyping: Okay, so far so good. So as we can see, we have completed our screen by screen animation, and now let's quickly recap. So this is the first screen animation. And as we can see, this is our get started page and everything is looking perfect. Now let's review our screen two, which is first step and everything's looking perfect. We can turn on and off and check check. And now let's see our screen three. As we can see, everything's looking great. Picture, data birth, and also how effect. Wow, looking great. And now let's quickly preview our third and last step. Okay, so this is also looking great. And now let's quickly start or prototyping. So for the prototyping, as you can see, this screen button is like animating, so we need to click first on prototype tape and then click on the button specific. So let's zoom in and let's double click to select the button. Now we need to click this plus, link it to the step one page. Okay. So this will be on click. Also, the destination is okay, and instead of push animation, let's make it smart animate and e in ese out and we can use dissolve. And I think normally default application dissolve looking great. So let's make it dissolve and e in ease out 300. So let's quickly check our past link, and as you can see, our screen is loading and Logo is animating text and button. Okay, now let's see the HR effect and once I click, so dissolve and now we are in step one. Okay, so this is how we need to link each page. And now let's click on this first step and simply link it to the second step. Okay, now let's check property. So on click and instead of dissolve, let's try push. So as you can see, move in and move out, push and slide in Okay. So let's try push and also check this Animate matching layer. And also curve 300 is fine. And let's quickly test. So let's click on this. And as you can see, once I click, so now on screen two. Now click this button and link it to the fourth, as you can see, navigate push. And for the step process, this is great. We can also use move in, move out. Let's move out for this and we will see which one is working, so we will apply it. Okay, so let's click and as we can see, move out. So I think we will stick with the push Okay, and everything is looking great. Now, let's quickly again, preview, as we can see, our home screen is loading. Button is working, and let's click on button. Looking great name and password. Check, uncheck, click picture, and Celebrate. Okay, let's quickly update slightly. So as we can see here, we have status bar. So for the status bar, let's create copy. As you can see, we create copy. So Command X. Let's select our status bar and home indicator. Maybe we can just delete this and right click on Status Bar page to replace, and send it to B. Now let's shift space bar, so as we can see our status bar and home indicator is also animating. So let's do for the rest of the page, page to replace, send it Beck and as you can see it animating, looking great. So let's try sind it to Ba working great because here as we can see there is blur. So Okay, great. Now let's past first, we need to delete home indicator, and now right click paste to replace shift spacebar and as we can see our status bar and home indicator is animating. Okay, so for this screen, what I'm thinking that maybe we can animate this title and button. Okay. So as you can see, we have these two elements, so let's copy paste it here, and we need to copy the exact screen. So let's now first, we need to create title animation this animation, and then we will follow the button animation. Okay, so for the title animation, let's double click or maybe just expand this. Okay, so now as we can see here, we have title and subtext. Okay, so let's copy this text, select title and paste. Now, same for this screen, select title and past text, select title and past text. As you can see, it's working great. So now let's select this subtext copy. And for this screen, here is text, and let's pase text for this screen, paste text. For this green paste text. Now we will simply select with the option key and simply drag copy. And now let's Command X, send the status bar to the bag and also Bground now select the text and past to replace. Okay. And now here is our title. Let's check the timing, click on prototype, and here you can see 5,000, which is too much, so let's try 1,000 and let's quickly preview looking great. And the same thing we will do for the button. So select button and here is the button. Now let's click on this button, click on the design. And here we will change the text, go to dashboard. Okay, copy the text, now select this button and press text here, Dashboard. Now we will do the same thing with the option key, copy Command X, and select button, pass to replace centerline. Okay, now let's review it again. Things looking great. Okay, so the buttons take too much time. Let's quickly reduce the time. Okay, so let's write 3,000. Sorry, three second. Okay. Now let's check the preview. And okay, let's try 2000. Shift spacebar and as we can see, it's looking great and we have confity animation. Okay. So now let's simply select it, and let's sit here. Okay. So now let's quickly replay again. And as you can see, this is our get started screen. Looking great. Click. This is home screen. Sorry, step one. Everything's looking great. Everything is working. Check and picture. Everything's looking perfect. Step three, congratulations. And here we are with our exciting flow. Okay? So this is how we did prototyping and also the micro animation, and also same time we focus on interaction and prototyping. 5. 05 PRO Level Portfolio Project Design: Okay, so far so good, we learn how to make interactive and animated project inside Figma, and this is the best approach to present your work in front up development team, or client or stakeholder. Anyone, this is the best way to show your work instead astatic images. This is your responsibility as a UIUX designer to show all the interactivity and all the animation, what you think about this project, you can present, and also you can, like, for example, guide them that this button on how this effect will trigger. And this is how I'm thinking about loading page micro animation so this is the best approach to present your work and place great impression on everyone. Okay? So I highly recommend to instead of static images, make it fully interactive. And once we happy all our team member and everyone, and now it is the best time to reward our hard work and present our work on social media and create fully animated and interactive portfolio, land another high paying client. Okay, so this is the perfect time. So let's so let's press FK on the keyboard and select preset for social media. And here as you can see we have social media presets. I'm thinking more about square template, so let's select Dpleht HD, which is 800 by 600. So let's start with the HD shot. Press K on the keyboard and make it two X. Now quickly rename this, so we will use one, two, three, four, and the number is fine. Next, we need to select or frame and press I on the keyboard, select I drople two, and select this dark. Okay, then we need to select our logo, press Command C and paste here, press Option V H to central line. Let's quickly change the color of or logo. Let's unlink and click select this blue color. This is our logo. Next, we need to duplicate this frame by Command D and simply place it here. Okay, so now we need to select the second frame logo and press K on the keyboard and make it two x. So this is our logo in the second state. In first state, let's change it quickly. So instead of real logo, we need to turn on fill, click and make it blue. Round circle. So 99 corner radius, as you can see, this is the initial state, and let's also quickly preview, click on prototype and link it to the second state on click Smart animate Is in Is out. Okay. And let's quickly preview. So click on play present. Okay, so now as you can see, the preview is pretty big, so let's click and change it to fill screen because up two weeks so pretty big, so let's make it fill. And now press R on the keyboard. So as you can see, this is like we didn't set or flow, so let's quickly change, click on Prototype, and click on this plus flow starting point. So this is our starting point and this is the first screen. So let's change it to portfolio. So this is our portfolio. Now let's quickly press R on the keyboard. So we set our starting point and it will start it from here. Okay? So simply click and as you can see this how it will let's quickly change initial state. Now we need to transform it to 180 degree. Let's test it again, press R, and it will reload and looking great. Now let's drop the opacity. So initial state will be empty screen, and let's quickly reload the screen again, click, and this is looking great. Now we need to simply click on Prototype, select or frame. Let's duplicate this, click on Design and duplicate screen two. Okay. And now let's again select our logo, do the same thing, make it color, select this blue color fully round. So 99 perfect. Let's press K again for the scale tool and make it this size very small, 32 by 32 central line, and now click on Prototype link second step to third step. So this on click Smart animates in is out. And let's quickly check. So press R to reload and click again, click, and this is looking great. Now let's quickly make some progress. So select screen two. So screen three and press Command D. Let's make and make some equal spacing here. Okay. And this time, we need to increase and fill the whole frame with this blue color. Okay, so press K again and let's try to use Tenex, click and select again, make it Tenex, and let's try five. Okay, so let's increase it slightly. Okay, so this is looking good. And now let's click on Prototype. Let's link it to screen four and easing ease out. Okay, let's quickly reload again. So click, click, click. This looking. Okay, so let's zoom in a typography to this screen. So click Let's type sine of flow. And as you can see, this is placed inside logo frame. So let's remove this from logo group and log this and select or text. Okay. Let's use 128, make it bold and central line. Okay, so this is the first state, and also we want don't fill, and let's make stroke white. The weight, let's try two. Now let's drop the opacity, make it zero. So let's simply duplicate this screen to five, and here it will be 100%. So let's make the opacity to 100% and quickly click on the prototype. Let's link it to this screen and on click Smart animate Es in eso. Let's quickly review. So press R, click, and as we can see, this is looking so now we need to create masking fill effect. So let's simply duplicate this screen again, and here we will do some changes. So first, we need to duplicate this text, and let's turn up this stroke, make this one to fill. Let's try fill and make it white. And now we need to select rectangle tool, place it below the text center line. Now, click on effects, labeler, and Let's try 100 to make it soap. And let's select both text and rectangle right click use as a mask. So in this state, we want the mask to be outside. Here, okay. Now let's turn on our stroke text, and here is our hidden text. Okay, now let's simply duplicate this by Command D, and here we need to align it. Select rectangle and central line. Okay, so now it is fully centered. Let's duplicate this again, and select rectangle and make it now disappear the fill, so we will use this left side direction. So it ends from the right side and goes out to the left side. Okay? And also, we need to make the opacity zero for this layer. So let's try to use opacity zero and click on Prototype. Let's quickly link our screen on click Smart animate, is in Is out, select this screen and text fills in Martinimate is in eso, quickly link this to this Okay. And now we need to preview this press R on the keyboard to reload and click logos Load, text, and height. So I notice we created one extra step, but it's okay. We can remove this step and select prototype and link it to the screen. Okay, on click Smart animate, let's quickly reload. And as you can see, click Load and it's looking great. Now let's continue our animation journey and let's click on this frame, simply duplicate it again, align it to the center and first, let's remove our text frame and select our logo for the logo press K on the keyboard, unlock logo layer. This is locked. Now we can change the size. Let's select this molest size and here we will now convert this Bround to again this circle. Let's quickly link this on click 300. Let's click on the preview. Let's simply make it fill, reload again, and simply check again, reload. So now, this is looking great and we need our screen markup. So we need to select our first screen, which is this screen, select and press Command C. Let's paste it here. First, we need to prepare our screen. Okay, so as we can see the corner is sharp, so let's first round the corner, make it 50. Now we need to make it JP. We don't need editable layers for this. So let's try to make it JP press command forward slash, and let's type stis selection. Okay, here we need to make it JPEG, as you can see this is now JPEG. Let's click this unlock expect ratio. Now let's change transformation. So let's make it 30 degree. Now click Command G to group it and inside the height, let's make sure that it is unlocked and let's type 577 3%. Okay. And this is how we make perspective. Now let's simply duplicate the JPEG. For this one, let's rename this to shadow. Effects, aber, make it 100. Now select this group Command X, place it here on this screen, turn off the opacity to zero by pressing 02 time on the keyboard, and here it is zero, and here it will be 100%. But let's select and make sure it is central line. Also, this one is central line. Okay? Now let's check this is link and press Shift spacebar on the keyboard to quickly preview, click Looking great. Also, we can preview from here, shipped space bar, click click again. This is looking great. Let's click on the design tape and simply duplicate this, and now we need to simply select this JP move slightly up and also the shade slightly down. Okay. Let's select this blur and make it 200, select logo and drop the opacity to 50% and slightly make it smaller. Okay? So now let's link this. Let's preview this. Okay? Click reload. So now we need to reset this back to original state. So for this, we need to click on the design and simply copy this screen and paste it here. Okay, and click on Prototype. So let's link this to this screen. Okay, and simply make this one is 300 smart animate Es in eso. So let's reload. It's looking great. And now we need to show two more screens here. Okay, so now we need to select these two screen and follow the same process. Let's paste it here. First, we need to round the corner, make it 50 and next we need to restize them. So let's command forward slash, and as you can see here is stis selection. Let's make this one sti selection. And now let's select both. Okay? Unlock expect ratio, make it 30 degree select first, make it groove and select this one and make it group command G. Now we need to double check everything is okay, and now select both group inside height. Let's type 57.73%. And this is now angle shape, select both JPEG with command and shape, duplicate and select this sub layer rename, make it shadow. Select click on effect. Layer Bler make this hundred. Okay, now select both layer center line and press Command X and paste it here. Okay, so now, as you can see here, we have one, two, three group. Okay. So also select central line and select this group central line. Okay, now select both group and drop the opacity to 0%, and now we need to simply duplicate this layer. We will do some magic and select these two group, make it 100%. Let's check. Okay, so this is the confirmation screen, so it need to be on the right side. Account creation screen need to be on the left side. And select the logo, press K on the keyboard and make it two X, and drop the opacity to 20%. Here we have the same layers. Okay, so now as we can see, we have already linked this, but let's connect this to the last screen and on clicks in Eso Smart animate looking great. And let's simply review this from here, shift spacebar and as you can see, it's looking great. Now we will again collapse it, then back to the original circle and then the logo of your stats it. So this is how we will create further animation. So let's duplicate this screen. This will be back to original state. So let's delete this link and let's link it back to this one because we have all the groups here which is hidden. So now let's quickly review this from here, click click again and back to original. Okay, so now as we can see, we have created this beautiful animation, and now what I'm thinking that let's make it to the original state and let's hide the screen in the next frame and then convert the circle again to the logo. So let's quickly create. Let's duplicate this. In this 14 frame, we need these frames to be zero or let's delete this and select logo, press k on the keyboard and make it smaller. So let's again select slightly smaller. Okay, so this size, and now let's duplicate this again. And here we need to again press K, and this time, we need to make it slightly bigger. Okay. And also, we need to remove the fill and make the corner radius to zero. And here we need to change transformation to 180 degree, sorry 180 degree. Now as we can see, let's quickly link this onclick Smart animate is in eso and smart animate is in eso. Let's quickly review Okay, so one last thing as we can see, we set all this trigger on click and we need to make it after delay. So let's say like 800, then let's change this one to after delay and make it one millisecond. Let's click on this one. After delay. Okay, so now let's quickly review this, click on the preview tape and let's reload press R, so let's reload and everything is so quick, we need to adjust some timing here. So after delay, let's say, if we set this to 300 and set this to 300. Okay, let's try to select Okay, so here inside Interaction, let's click, and let's try 300 for all these. Now, let's quickly review reload It's looking great. We can also increase after delay, for example, if let's change this two instead of 300, let's make it 600 and smart animate Es in ese out. And also we can change Let's make it 300 and increase the duration is 600. Let's quickly check on this present icon. Let's first fill screen, press R to reload. Let's change this to 100 and make it softer. So let's try 500 and let's quickly review again.