Web Design Class: Designing Interactive Websites with Figma & Framer

1. Introduction: Holly guys, are you interested in web design? Are you interested in building and designing interactive websites using Figma and Framer? If the answer is yes, then this course might be for you. We are going to learn Figma basic concepts like creating frames and layers, designing layout, adding text, shapes, and images, changing background color, and organizing web element using grind. Then after that, we are going to create web animations and page transitions. We are going to animate a button. We are going to create horizontal scrolling animations. Look at this. We're going to create a smooth page transitions, and we're also going to animate text. Next, we are going to create responsive design and also add auto layout. So if we reduce the size of the screent, all web elements like text and image will adjust automatically. Look at this. Next, we are going to create website navigations and also add dropdown menu. If we click on one of these, the dropdown menu will show up. Then after that, we're going to design e-commerce product page, and this product has two different colors orange and blue, and we can change the product color by clicking on this circle. For FITMAFinal project, we are going to design property management sense. We're going to create multiple pages like homepage, fitter page, pricing page, and sign up page. Look at this. Once we are done with FICMA, we will move on to Framer. Firstly, we're going to learn about Framer basic concepts like creating frames, creating layers, creating text elements, and using stacks. After that, we are going to create text animations. Look at this. We're going to create slides show, page transitions, and floating animations. Then after that, we are going to create form using Tally, and we're going to integrate the form to the website. So this is going to be useful for lead generations or reservations. Next, we are going to create responsive design in Framer. So if I reduce the size of the scrint, all web elements like text and buttons will adjust automatically. Look at this. Next, we are going to create website navigations and also add dropdown menu. So it is very similar to what we did in ICMA. For Framer final project, we are going to design a website for a cleaning service company. 2. Framer, Layer, Layout, Text, Shape, Colour, and Grid in Figma: Hi, guys. Welcome back to the course. In this video, we are going to learn the basic concepts of WCMA. Specifically, we are going to learn how to create frame and layer, how to design website layout, how to add text, shape and buttons, how to change bigground color, and also how to organize elements using grid. Okay, let's get started. Firstly, I'm going to log in using my Gmail account. Okay, it is still loading. It will take few seconds. As you guys can see, I have successfully log in. And now let's create a new page. So let's click Design and you will be redirected to the editing page. Firstly, we are going to create a new frame. So let's click this and let's click Frame. For the frame, you have many options like phone, tablet, deskcop, Mbook air, MabookP. I'm going to select descop. So this is the desktop frame size. This is how the website will look like if the user open the website on desktop. In this example, we are going to build a very simple landing page for a coffee product. Okay, let's get started. Firstly, we're going to change the big ground color from white to light brown, and actually, we're going to use gradient color. So let's click on the frame and let's click Fill. Let's click this and make sure that you select linear. For the first color, it is going to remain white, and for the second color, we are going to select light brown. So it is going to be a combinations between white and light brown. Okay, so this is going to be the Bground color. Feel free to select any color that you want. You don't have to follow me using this color. Next, we are going to upload the product image. And actually, I already created the image. I use AI to create this image. Okay, let's go back to VCMa and we are going to upload the product image. Let's click this and let's click File, and let's click Place Image. And I'm going to upload this image. Let's click Open. And I'm going to put the image right here and I'm going to make this slightly bigger. Okay, perfect. Then after that, we are going to add header navigation menu and hero sessions. Firstly, we're going to add the header. To create text, you have two options. You can press T or you can also click on the text icon. Just click this, and I'm going to put the text right here. And for the phone size, I'm going to set it to 35, and I'm also going to make this both. Premium coffee. So that's the name of the brand. Next, I'm going to add the navigation menu. Let's create another text, and I'm going to put it right here. Let's add home. And let's copy and paste this twice. And the second one is product, and the third one is about us. And I'm going to adjust the book size. Okay, so this is the navigations menu. So the user can click Home Product or About Us. Next, we are going to create hero sections. And in the hero sessions, we're going to add product name, product descriptions, product price, and also By now button. Okay, so let's add a new text. I'm going to name the product Cappuccino Coffee. So this is going to be the product name. Next, we're going to add the product descriptions. I'm going to set the phone size to 20, and this is going to be regular, not bold. And here is the product descriptions. Actually, I'm going to make the phone size a little bit bigger. 25. Okay, so now it is more feasible. So this is the product descriptions or premium coffee bean or carefully sourced and roasted to bring out the best flavor in every cup. Okay, very cool. Then after that, we're going to add the product price. Let's add another text. And I'm going to set the font size to 35, and this is going to be bold. And the product price is $20.99, and the phone color is going to be white. But if you want to use different color, it is totally up to you. And I'm going to add a By now button. So let's create a rectangle. To create a rectangle, you have two options. You can press R, or you can also click on this rectangle icon. And I'm going to place the rectangle right here. And I'm going to make this slightly bigger, and I'm going to add text and put it on the rectangle. By now. Okay, so here is the Bynw buttoned. Next, we are going to make the edge of the button a little bit round. So let's click on the button, and we're going to set the corner radius to 55. And let's hit Enter. Okay, it looks better. Look at this. Okay, we are done with this landing page. If you want to see the web preview, just click this and it will automatically open the website in another tab. It is still loading. It will take a few seconds. Okay, here is the website. Look at this. And if you want to download this web page, it is very easy. Just click this at click File and click Export. And just click. The Export button. Actually, there is one more thing that we need to talk about. If you notice when you are placing text, shape, or buttons on the web page, sometimes they are not properly aligned. So to solve this issue, we can use grid to help us align elements, maintain consistent spacing, and create a more organized website layout. Okay, let me show you how to do it. Firstly, you will need to select your frame, and let's scroll them a little bit, and let's click Layout Guide. And let's select column, and let's click this. We're going to set the count to eight. Okay, as you guys can see here, we have multiple grids, one, two, three, four, five, six, seven, eight, and it can help you to position your text or your button or any other shape. Okay, I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 3. Creating Web Animation & Page Transition in Figma: Holidays. Welcome back to the course. In this video, we are going to create web animations and page transitions in Figma. Okay, let's get started. Let's create a new file. Just click Design, and you will be redirected to the editing page. Firstly, we are going to create an animations for button. Let's click Frame, and we're going to select iPhone 17 frame. Okay, here we go. So this is the frame size for iPhone 17th. This is what the applications will look like if the user opened the applications using iPhone 17th. Let's press R, or you can also click on this icon, and let's create a rectangle. And I'm going to make the edge of the rectangle a little bit round. So let's set the corner radius to 60. Then after that, we are going to make this button as a component. If you are using MacBook, you can press Command Options K at the same time. But if you are using Windows, you can press Control O and K at the same time. And let's click Design, and let's click Properties, and let's click variant. And let's add another variant. Okay, so now we have two buttons, and we're going to change the color of the second button to light blue. So let's click this let's click Fill and let's click Libraries, and I'm going to select this color light blue. Okay, we have successfully changed the color to light blue. Next, we are going to create a connections between the first button and the second button. So let's click on the first button, and let's click Prototype, and let's add Interactions. And I'm going to select while hovering. And for the actions, I'm going to select chains to and I'm going to select far and two. So default is the first button, and far and two is the second button. And for the animations, I'm going to select smart animate. And for the easing, I'm going to select Ease out and for the durations, I'm going to set it to 300 milliseconds, but you can feel free to change this number. You can make this longer or shorter. It is totally up to you. Okay, we are done. Now I'm going to move this out, and I'm going to click on Assets, and let's click on Created in this file. And let's click on the first rectangle. And click Insert Instance, and I'm going to put it right here. And now we are going to test this animion to make sure it is working. So I'm going to click this present, and it will automatically open the website in another tab. And we will be able to test if the button is working. Look at this. So when you place the cursor in the button, the color automatically change to light blue. Look at this. Very cool. Let's close the tab, and now we're going to create horizontal scroll animations. Let's create a rectangle. You can press R or you can also click on this icon, and we're going to create multiple rectangles. Okay, here is the first one. And I'm going to copy and paste this four times. So in total, we are going to have five rectangle. And I'm going to put it right here. So this is the third rectangle. This is the fourth rectangle, and this is the fifth rectangle. So in total, we have five rectangles. Next, I'm going to change the color of the first rectangle to red. So let's click this and let's click Fill, and let's click red. Next, I'm going to change the color of the second rectangle to blue. Next, I'm going to change the color of the third rectangle to green. Then after that, I'm going to change the color of the fourth rectangle to orange. And lastly, I'm going to change the color of the fifth rectangle to yellow. Next, we are going to select all these five rectangles. So let's press Shift and click these rectangles at the same time. And next we're going to add auto layout. To add auto layout, we need to press Shift and A at the same time. Next, we are going to rename this frame one to cards. After that, let's click on Design and make sure that you enable clip content. So let's click this, and let's open the file, and now we're going to put cords inside iPhone 171. So let's move it here. And I'm going to click Prototype, and I'm going to select enable scrolling, and I'm going to set the overflow to horizontal. We are going to make this a little bit smaller, and I'm going to place the rectangle right here. And now I'm going to test to make sure it is working. Let's click present, and it will open the applications in another tab. It is still loading. I will take few seconds, and as you guys can see, we are able to scroll. Look at this. Very cool, now we're going to close the tab. Next, we're going to add animation to this rectangle. When the user place the cursor on one of these rectangles, then the rectangle is going to be slightly bigger. Okay, let's do it. I'm going to make this bigger. And we're going to make one of these card to be a component. Let's click on one of the card. And if you are using Mabook, you can press Command Options K at the same time. If you are using Windows, you can press Control old K at the same time. After making this card component, then let's click Properties, and let's click Variant. Now I'm going to add variant. Let's click this. Next, we are going to make this card slightly larger. So when the user places the cursor on this card, then it is going to be larger like this. Okay, next, we are going to add interactions between this card and the second card. So let's click prototype, and let's click Add interactions. And for the trigger, let's like while hovering, and for the actions, let's select gains two. And for property one, let's Varian two. So variant two is the second card. And for the animations, I'm going to select smart animate. I'm going to select Ease out and let's close this. Okay, now, let's click on Assets, and let's click on Rectangle two. And I'm going to put Rectangle two right here. So this is the rectangle that has been animated. So what we're going to do next is to duplicate this rectangle four times exactly the same like what we did before. So let's press Command C or Control C, and Command V multiple times. Okay, so here is the second, third, here is the fourth rectangle, and here is the fifth rectangle. Next, we are going to change the color of the second rectangle to blue. Let's click Design, and let's click Libraries. Let's click Blue. Next, we are going to change the color of the third rectangle to grind. And we're going to change the color of the fourth rectangle to yellow. And we're going to change the color of the fifth rectangle to orange. And we're going to do exactly the same thing like what we did before. We are going to click on one of these rectangle while pressing Shift. So basically, we're going to select all these five rectangles, and we're going to add auto layout. So let's press Shift and A at the same time. And now I'm going to rename frame one to animated card. Next, I'm going to click Clip Content. Make sure that you enable this. Let's click File, and we're going to put animated cord inside iPhone 17 frame. Let's scroll down and put it here. So make sure the animated card is inside the iPhone 17 frame. And obviously, we're going to make this slightly smaller, and I'm going to place the rectangle right here. So this is exactly the same thing like what we did before. Actually, there is one more thing that we need to do. Let's click on prototype. And we need to set the overflow to horizontal. So by doing so, we will enable the user to scroll horizontally. And now let's test click present, and it will automatically open the applications in another tab. Okay, it is still loading. Okay, as you guys can see, we're able to scroll, and when you place the cursor, then the rectangle is going to be slightly larger. Look at this. Very cool, right? Okay, let's close this, and now we're going to add page transitions. So let's create a new button. I'm going to create a rectangle right here and I'm going to change the color to light blue. So let's click on this rectangle and let's click Libraries. Next, I'm going to create another frame. So let's click this and I'm going to create another iPhone 17 frame, and I'm going to upload an image. Let's click this and let's click File, click Place Image, and I'm going to upload this image. And I'm going to put it right here right in the middle. So we're going to add a smooth page transition. If the user click on this button, then the user will be redirected to the second page. Let's click on this button, and let's click Prototype. And now let's add interactions, and I'm going to select on tap and for the actions, I'm going to select Navigate two and the destinations is the second frame. So iPhone 172. So that's the destinations and for the animations, I'm going to select slide end. And the duration is going to be 300 milliseconds, and this is going to be EO. Okay, now we're going to test. Let's click this. It will open the applications in another tab. And let's click on this button. As you guys can see, I got redirected to the second page, Frecle. Let's close the tab. Next, we are going to add text animations. Firstly, we are going to add a new text. You can press T or you can also click on the text icon. And I'm going to make this bolt and I'm going to set the phone size to 20 and let's type in headphone for content creators. And we're going to make this component. So if you are using Mkbook, you can press Command options K. If you are using Windows, you can press Control OdK. And now let's click on properties, and let's click variant, and we're going to add another variant. And we're going to replace content creators with everyone. So headphone for everyone. And we're also going to change the text color to Print. So let's scroll down, and let's click Fail and let's click Grint. Okay, so now the second text is Grint. Now let's click on the first text, and we're going to add interaction. So let's click prototype, and let's click Interactions. And for the trigger, let's select while hovering. And for the actions, let's select change two, and we're going to change this to Varian two. So default is the first text and Varian two is the second text. And for the animations, let's click Smart Animate, and we're going to select Ease out, and the duration is going to be 300 milliseconds. Okay, now we're going to move this out and we're going to click on Assets, and we're going to click on headphones for content creators, and we're going to place it right here. Okay, now we are going to test the text animations. Let's click Preview. It is going to open the applications in another tab. It is still loading. Okay, let's click on this button. And as you guys can see, if we place the cursor on this next, it will change from headphone for content creators to headphone for everyone, and the color also change to green. Look at this. Very cool, right? Okay, let's close the tab. Next, we are going to create one more animations using otiFles. And we're going to use AI to create the animations. So let's click Tools and let's click Prom two vector. And actually, you need to log in first. You can log in using your Gmail account. And now let's write the prom. Create a cartoon style cursor. For my agency website. Okay, so that's my prom. You can select this style. There are many options like iconography, flat vector illustration, and still many more. And in this case, I'm going to select iconography and let's click Generate. It will take a few seconds for AI to generate the vector. Then after that, we will be able to add motion to the vector. So it is going to be fully animated. Well, it didn't take too long. It only took 5 seconds or even less than 5 seconds. And here is the cursor. And now I'm going to click this Convert to Lot and you will be redirected to this page. And let's scroll down a little bit, and you can add motion. Look at this. For example, rotate. Square stretch, pulls, pop in, slide up, slide down, fade in. Zoom out. Zoom in. Very cool, right? And you can click this save to workspace. And you can also add the animations to Figma because Lodi file is integrated with Figma. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 4. Creating Responsive Design & Adding Auto Layout in Figma: Holi guys. Welcome back to the course. In this video, we are going to create responsive design and add auto layout. Okay, let's get started. Firstly, let's create a new file. Just click Create and click Design, and you will be redirected to the editing page. And in this case, we are going to use Figma AI agent to create a single product checkout page. Okay, let's write the prom. Create a single Product checkout page for wireless Power Bank. Add product name, product descriptions. Price and add to court button. Make it concise and also add product image. The Brand color is white, and the secondary color is black. And let's click generate, and it will take a few seconds, maybe 20 or 30 seconds for AI to create the product checkout page. Okay, here is the product Checkout page. Let's click File. We have two main components Product Gallery, which is the product image and product details, which includes product title, descriptions, price, and add to card button. Next, we are going to add Auto layer. So let's click on the product image, and let's press Shift and click on the product details. And let's press Shift and A at the same time. So we are adding Auto layer. Next, for the flow. Let's select horizontal. So let's click this. And for the gap I'm going to enter 64. And the linen is going to be middle left. So let's click this. Okay, now let's click on the product image. And for the dimensions, we're going to set the width to fill container, and we're going to set the height to fix size, and let's click on the product info or product details. And for the width, we're going to set this to fill container. So it's going to be the same like the product image, and for the height, we're going to set it to t contents. Okay, next, we are going to test to make sure if the design is responsive. So basically, we're going to reduce the size of the screen, and we will be able to see if all components in this website will adjust automatically. Okay, let's do it. Look at this. It automatically adjusts, right? For example, I'm going to make the screen size very small. Look at this. It automatically adjusts the screen size. In additions, you can also view this website from another device. For example, iPad. So let's click Frame and let's click IPad P 11. So this is how the website will look like if the user opened the website from iPad 11. And again, the design is very responsive. Look at this. It automatically adjusts the size of the scrint. Okay, I'm going to click Descop. So this is like the original versions. I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 5. Designing Website Navigation & Adding Dropdown Menu in Figma: Hlli guys. Welcome back to the course. In this video, we are going to design website navigations, and we are also going to add dropdown menu. Okay, let's get started. Let's click Design, and you will be redirected to the editing page, and let's click framed. And I'm going to select desktop Make Book ir. In this example, we are going to build Japanese restaurant website. So the Bground color is going to be white. And now I'm going to upload an image. Let's click this. Let's click File, and let's click Place Image. And I'm going to upload this image. Let's click Open, and I'm going to put the image right in the middle. I'm going to put the image right here. Next, we're going to create a rectangle. You have two options. You can press R or you can also click on this icon. And let's create a rectangle and put it right here on the top. For the color, I'm going to use gray, but if you want to use different color, it is totally up to you. Next, we're going to add the restaurant name. So let's add text. You can press T, or you can also click on this icon. And I'm going to set the phone size to 25, and I'm also going to make this bolt. The name of the restaurant is Hokkaido Kitchen. I'm going to make this box slightly larger. Okay, here we go. Next, we are going to add the navigation menu. Let's click text, and let's type in home. And let's copy and paste this multiple times. And let's replace homed with menu. And let's copy and paste this again. Let's replace menu with locations. And I'm going to make this slightly bigger, and let's copy and paste this again. And let's replace home with delivery. And I'm going to make this slightly bigger. And let's copy and paste this one more time. And let's put it here, and let's replace home with A. Okay, so in total, we have five home menu locations, delivery and about. Now we're going to select all these five text. So press Shift and click Home menu locations delivery and about, and let's press Shift and A at the same time. So we're going to add auto layout. Okay, next, we are going to place this right here and we're going to create a dropdown menu. So if the user click on menu or place the cursor on menu, there will be a dropdown menu. For example, sushi, tempura, udon, ramen, and matcha. Okay, now let's add the dropdown menu. So let's add a rectangle. And let's create a small rectangle. I'm going to change the color to white. So let's click this. Let's click Libraries, and I'm going to select White. Next, I'm going to add text. And let's type in food. This is just a random text, and I'm going to make this slightly bigger. Next, I'm going to block this, and I'm going to press common Options K. So we're going to make this a component. If you are using Windows, you can press Control Old K. So it is basically the same. And now let's click on properties, and let's click Variant and let's click at Variant. So we're going to create an animations and we're going to change the color to light blue. So when the user plays the cursor on one of these menu, the color will be changed to light blue. Okay. Let's click Fail. Let's type in blue. Next, we're going to click on prototype, and let's click on the first variant, and we're going to add interactions. For the trigger, let's select while hovering for the actions, select chains two, variant two. So default is the first box, and variant two is the second box. And for the animations, we're going to select Smart Animate is out, and the duration is going to be 300 milliseconds. Okay, next, I'm going to click on Assets, and let's click this created in this file. And let's click component one Food. Okay, next, we are going to copy and paste this multiple times. Actually, four times. So in total, we will have five. One, two, three, four, five. Next, we are going to replace the text. So let's replace food with Susi. Let's replace the second one with udon. Let's replace the third one with amend. Let's replace the fourth one with tempora. And let's replace the lost one with Macha. Okay, perfect. Next, we're going to block all of this, and let's press Shift at A at the same time. So we're going to add auto layout. Then after that, we're going to connect menu to frame two. So when the user click on Menu, the frame two or the dropdown menu is going to show up. Okay, let's do it. Let's click on Menu and let's click Prototype. And let's add interactions for the trigger, so on click for the action, so like open overlay, and for the overlay, select frame two. And for the position, select manual, and I'm going to place it right here below Manu and for the animations, so like dissolve. But if you want to try different animation, it is totally up to you, and the duration is going to be 300 milliseconds. And before testing, there is one more thing that we need to change. So let's click on foot. And actually, this is supposed to be while hovering, not on click. So let's fix this, and let's close this and now we are going to test this. So let's click Preview, and it is going to automatically open the website in another tab, and we will be able to test the dropdown menu. So let's click menu. As you guys can see, we are able to select one of these options, Sushi udon, Ramen, tempora, and Maja. Okay, very cool. Let's go back to the editing page. And now we're going to do the same thing for locations. So let's click this and I'm going to put it right here next to frame two. I'm going to make this slightly larger, and I'm going to copy and paste this twice. Okay, so this is the second one, and this is the third one. So for the locations, we will have three different locations. The first one is Miami. The second one is Dallas. And the third one is Denver. So we have three different locations, and let's do the same thing. Let's block this, and you can press Shift and A at the same time. So we are going to add auto layout. Next, we are going to connect locations to frame three. So if the user click on locations, these three locations will show up. Let's do it. Let's click on locations. Let's click on prototype and click at Interactions. And for the trigger, select click for the actions like open overlay, and we're going to select frame three. And the position is going to be manual. So we're going to place this right here below the locations for the animations. So like, dissolve. And it is going to be ease out and the duration is going to be 300 milliseconds. Okay, now, let's test this. Click preview. And it is going to open the website in another tab, and let's click locations. As you guys can see, three locations appears, Miami, Dallas, and Denver. Okay, very cool. I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 6. Designing E Commerce Product Page with Figma: Hello, guys. Welcome back to the course. In this video, we are going to design e-commerce product page in Figma. Let's get started. Let's create a new file. And firstly, we are going to create a new frame. So let's click this. Let's click frame, and I'm going to select Descop Make Book Air. Then after that, I'm going to create another frame. So let's press F and let's put the frame in the middle. Next, we are going to change the color from white to light purple. So let's click this. Let's click Fail. And let's click purple. Okay, so the Bground color is going to be light purple like this. Next, we are going to upload the product image. Let's click this. Let's click File. Let's click Place Image. And actually, there are two product images. Here is the first one, and here is the second one. So let's upload the first one. And I'm going to put it right here. Next, we're going to add the product name. So let's press T, or you can also click text. And the product name is Casual Sneaker. That's the product name. I'm going to set the phone size to 35, and I'm also going to make this bolt and center aligned. Next, we are going to add product description. So let's add another text. And I'm going to set the phone size to 20 and this is going to be regular, not bold. And here is the product descriptions, lightweight everyday sneakers featuring a clean white design with stylist light orange accent. Next, we are going to add the product rating. And in this case, the rating is four out of five stars, and we're going to change the color to orange. So let's click Fill and we're going to click Plays and just click Orange. Okay, so now, the star colors is orange. And we're also going to make this slightly bigger. So let's scroll down, and I'm going to set the phone size to 35. Okay, so now it is bigger. Next, we are going to add the product price. So let's add another text. And the price is $125.99. And I'm going to set the phone size to 30. And I'm going to make this bold. So it is more visible. Next, we are going to add the button. So this is going to be like buy now button or a two card button. So let's create a rectangle. You can press and let's put the rectangle right here. And I'm going to make the edge of the rectangle a little bit round. So let's set the corner radius to 75. Okay, so now, as you guys can see, the edge of the rectangle is round. Next, we're going to add text. So you can press T or you can also click on this icon, and let's add the text on the button. I'm going to set the font size to 20, so it is going to be smaller add to card, and this is going to be center aligned. Next, I'm going to change the color of the button. So let's click on the button, and let's click fail, and I'm going to change the color to dark purple. I'm also going to change the phone color to white. So let's click Fall and let's type in white. Okay, it looks better. And for A to cart, I'm also going to make this Extra bold. So the text is going to be more visible. Okay, next, we are going to click on the product image, and we're going to make this component. So if you are using Mabook, you can press Command Options K. But if you are using Windows, you can press Control Old K at the same time. And let's click Properties, and let's click variant. And we're going to add another variant. So let's click this and let's click on the second variant. And let's click Image. And actually, we are going to replace this image with the second product image. So let's click upload from computer, and I'm going to replace this image with the new one, which is the blue sneaker, right? So this is the first image, and this is the second image. Okay, next, we are going to create two small circles. One small circle is going to be orange and one small circle is going to be light blue. Why? Because we have two different products, orange and blue. So if the user click on the orange circle, then this product is going to appear, and if the user click on the blue circle, then this product is going to appear. To create a circle, you have two options. You can press O, or you can also click on this icon and click LLMs. Okay, let's create a small circle, and I'm going to change the color to orange. So just click on the circle and let's click Fill, and let's click Libras. And let's click Orange. And we're going to copy and paste this once. So you can press Command C or Command D if you are using MkbooO you can press Control C if you are using Windows. And for the second circle, we're going to change it to Blue. So let's click Fail. And I'm going to select Blue. Next, we are going to copy and paste these two circles. If you are using Mabook, just press Command C, but if you are using Windows, just press Control C and Command V or Control V. Okay, we're going to place the circles below the first product image, and we're going to do the same thing, place the second circle below the second product image. So it is going to look like this. Then after that, we're going to connect this circle with the product image. So let's click on the first circle and let's click on prototype, and let's add interactions. For the trigger, I'm going to set this to click for the actions. It is going to be chains to and for the property is going to be default. And let's click on the second circle, the blue circle, and let's click on prototype at interactions. The trigger is going to be unclicked. The action is going to be chains two, and the property is going to be variant two. So if the user click on the oren circle, this product image is going to appear. If the user click on the blue circle, then the second product image is going to appear. And we're going to do the same thing to these two circles. Let's click on the One circle, and let's click Prototype, and let's click At interactions. The trigger is going to be click. The action is going to be chins two, and the property is going to be default. So if the user click on the circle, then this product image is going to appear, and let's click on the blue circle. Click at interactions. The trigger is going to be on click. The action is going to be hint, and the property is going to be variant two. So if the user click on the blue circle, then this product image is going to appear. Okay, so we're done with this. Now let's click on Assets. Let's click on created in this file, and let's click on the product one Image and click Insert Instance. And I'm going to place the product image right here. Okay, next, we are going to test this e-commerce product page. Just click this present. Okay, here is the e-commerce product page. Here is the product title, product descriptions, ratings, price at to Cart button, and here is the product image. There are two variations. If you click on Blue Circle, then the Blue sneaker is going to show up. And if you click on the Orange Circle, then the Orange sneaker is going to show up. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 7. Designing Property Management SaaS with Figma: Hi, guys. Welcome back to the course. In this video, we are going to design property management says landing page in FICMA. Let's get started. Firstly, I'm going to create a new file. Let's click Create and design, and you will be redirected to the editing page. Next, we are going to create a new frame, just click frame, and I'm going to select desktop, Mbook air. So here is the frame. Then after that, we are going to create a rectangle. And I'm going to put the rectangle on the top. I'm also going to change the color of the rectangle to light blue. Let's click this and I'm going to change the color to light blue. Then after that, I'm going to upload the image. Let's click File. Let's click Place Image, and I'm going to upload this image, and I'm going to place this image right here. Next, we are going to add the heading and also navigation's menu. Okay, now we are going to add text. You have two options. You can press T, or you can also click on the text icon. And let's add text right here. The name of the software is Property one. This is just a random name. And I'm going to set the phone size to 25, and I'm going to make this bold. Okay, next, we are going to add the navigation menu. So let's add another text. And I'm going to put it right here homed. And let's copy and paste this multiple times. Just press Command C and command fee. If you're using Windows, just press Control C and Control fee. We are going to copy and paste this three times. Okay, let's replace home with fetters. Let's replace home with price. Or maybe pricing. And let's replace home with sign up. Then after that, we are going to add the hero sections. Let's add another text, and I'm going to create a headline. We are going to set the font size to 45, so it is going to be a very big text. Minutes every property all in one place. So that's the header, and let's add another text. And we're going to add the product descriptions. For the descriptions, I'm going to set the phone size to 20, so it is going to be smaller, and this is going to be regular, not bold. And let's copy and paste this. Okay, here is the descriptions, manage properties, track rent payments, and handle maintenance requests all from one intuitive das board. Next, we are going to add Try Now button. Let's click this icon, or you can also press R, and let's create a rectangle, and we're going to put the rectangle right here below the descriptions. And we're going to change the color to light blue. So let's click this and we're going to make the edge round. So let's set the corner radius to 55. As you guys can see, now the edge of the rectangle is round. Then after that, we're going to add text to the button. Try now. Next, we're going to set the phone size to 25 and we're going to make this bold. This is going to be more visible and it is going to be center aligned. Then after that, we are going to create another page. Let's click Frame. And let's click Deskop and let's like make Book error. So this is going to be the sign up page. Firstly, we're going to add the software name, which is property one. So let's copy and paste this and put it here, and we're going to change the color to blue. So let's click Fill and let's click Libraries. Okay, so now the text is more visible. Then after that, we're going to add the SignUFm. Let's add text and put it right here. And let's type in user name. And I'm going to set the phone size to 30. So it is going to be slightly bigger. And we're also going to add a rectangle right here. And we're going to copy and paste this twice. And we're going to replace username with email, and we're going to replace user name with password. So in this case, the user will need to enter username, email, and also password. Next, we are going to add the sign up button. So let's click Rectangle, and we're going to create a rectangle right here. And we're going to make the edge of the rectangle round. So let's click this and we're going to set the corner reduce to 55. Okay, as you guys can see, the edge is round. And now we're going to add text. So let's click this icon, or you can also press T, and let's type in sign up. And we're going to make the text color white. Let's type in white. And we're going to make the button color light blue. Let's click Libraries, and let's choose light blue. And we're also going to change the biround color. So let's click on this frame, and let's click Fill and let's click linear, and we're going to change the second color to light blue. And let's drag this a little bit to the right. Okay, next, we are going to create another page for pricing. So let's click frame, and let's click Desktop and select MabookEir. So the third page is going to be the pricing page. Okay, we're going to have three pricing tiers. So let's add a rectangle. I'm going to put it right here and I'm going to zoom in a little bit, and we're going to copy and paste this twice. You can press Command D at the same time. And I'm going to put the second rectangle right here and press Command again. Next, we're going to add the header. So let's click this or you can also press T, and let's type in try for free. Pay when you grow. And obviously, we're going to make the text bigger. So let's set the font size to 35, and this is going to be bold, center aligned, and we're going to change the color to blue. So let's click Fail Libraries and the color is going to be light blue. Next, we are going to add the software name, which is property one. So let's click this and press Command D, and let's put it right here. Then after that, we're going to change the three rectangles color. So let's press Shift and click on these rectangles. And let's click Fill and click gradient and make sure that you select linear, we are going to set the first color to black and we're going to set the second color to light blue. So it is going to be gradient like this. Okay. Next, we are going to add text, so you can press T or you can also click on this icon. The first one is going to be free plan. So I'm going to copy and paste this. You can post the video, and you can type this down free, $0 per month. Perfect for individual getting started up to three properties, basic tenant management, brand payment tracking, and get started free. And make sure to set the font size to 20, and this is supposed to be regular, not bold, and also make sure the phone color is white. The second one is going to be professional plan, $29 per month for growing property portfolios, up to 25 properties, automated reminders, and maintenance request franking. And the third one is going to be a business plan, $79 per month for property managers handling larger portfolios, unlimited properties advance financial reports and team access and also management. Okay, next, we are going to add the button. So let's create a rectangle, and I'm going to put the rectangle right here. And as usual, we're going to make the edge of the rectangle round. So let's set the corner radius to 60. Next, we're going to change the color to light blue. So let's click Fill and let's click Libraries and let's click Light Blue. And we're going to copy and paste this twice. Let's put it here. Next, we're going to add text. So let's click this or you can also press T. Let's type in Get started for free. And we're going to make this bolt. And we're going to make this center aligned. And let's add another text. And let's put it right here. Choose professional. And we're going to make this bolt. And this is also going to be center aligned. And let's add another text. Choose business. Okay, we are done with the pricing page, and now we're going to create one more page for filters. So let's click Frame and select desktop and select MabookEer we're going to do something different. We are going to use the Figma agent to edit the page. So let's click agent and let's click on Make Book error four, so the AI agent knows which page to edit and let's write the prom. Designed filter page for Property Management SaaS. This product has three main features. Okay, so in this case, we're going to have three features. The first one is property database. The second one is rent and payment tracking, and the third one is maintenance management. And its fitter has its descriptions. Make sure to use the same color palette as the other piges The main color should be white. And the secondary color should be sient or light blue. And let's click Sand Prom. Okay, now the AI agent is going to edit this page. Okay, here is the fitter page. Actually, it didn't take too long. It only took a minute or even less than a minute. Okay, so this SS has three fitters, property database, rent and payment tracking and maintenance management. Next, we're going to connect it's button in the navigation menu to the corresponding page. For example, we're going to connect fetters to this page. We're going to connect pricing to this page, and we're going to connect Sign Up to the signup page. Okay, let's do it. So firstly, let's click on Fiters and let's click on prototype, and let's click at Interactions. And for the trigger, select on click and the actions is Navigate two, and the destination is supposed to be Mbook air four. So this page. And let's click on Property one, and we're going to add interactions, and the trigger is going to be on click. The action is going to be Navigate to, and the destination is MacBook Air one. So if the user click on features, the user will be redirected to this page, and if the user click on Property one, and the user will be redirected back to the homepage. Next, we are going to do the same thing to the sign up page. So let's click Sign Up and let's click Prototype. Let's click at Interactions, and the trigger is going to be on click and the action is going to be Navigate two, and the destination is Make Book error two. So if the user click on the sign up button, and the user will be redirected to this page. And let's click on Property one and click at Interactions. The trigger is going to be onclick. The action is going to be Navigate two, and the destination is going to be make Book Air one. So if the user click on the Property one, then the user will be redirected back to the homepage. And let's do the same thing to the pricing page. So let's click on Pricing and let's click at Interactions. The trigger is going to be onclick. The action is going to be Navigate two. The destination is going to be MebookEirT and let's do the opposite. Let's click on Property one. Click at Interactions. The trigger is going to be onclick. The action is going to be Navigate two, and the destination is going to be MacBook Air one. So if the user click on Property one, the user will be redirected M to the home page. Okay, now we're going to test this website. So let's click Preview. Let's click on fetters and we will be redirected to the Fetter page, and let's click on Property one, and we will be redirected back to the homepage. Let's click on Pricing and we will be redirected to the pricing page and click Property one, and we will be back in the homepage and click Sign Up. Then we will be redirected to the sit page and click Property one again, and we will be redirected back to the homepage. Okay, so it is working. I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 8. Frame, Layer, Text Element, and Stack in Framer: Hi guys. Welcome back to the course. In this video, we are going to learn basic framer concepts like frames, layers, text elements, and also stack. Okay, let's get started. Firstly, I'm going to log in using my Gmail account, so let's click Continue with Google. It is still loading. It will take a few seconds. Okay, I have successfully logged in, and here is my dashboard. Let's click New Project, and you will be redirected to the editing page. Okay, here is the frame. So this is desktop frame. This is how the website will look like if the user open the website on desktop. And if you want to create tablet or a phone frame, just click this and just click Phone. So this is phone frame. This is how the website will look like if the user open the website using mobile phone. Okay, now let's delete this, and let's upload an image. Let's click this. Let's click Media and let's click Image. And we're going to place the image in the middle. And let's click Choose image, and I'm going to upload this drone image. So in this example, we are going to create a landing page for drone product, and I'm going to make the size of this image slightly bigger. And I'm going to place this image right in the middle. Then after that, we are going to change the Bround color. So let's click on the frame, and let's click Fill, and we're going to use gradient color. For the first color, we are going to select white she and for the second color, we are going to select purple or maybe light purple. Okay, so here is the big green color. Perfect combinations between white and light purple. Then after that, we are going to add text and I'm going to put the text on the top. Let's type your groceries delivered from the sky. Oh. That's going to be the headline, and we're going to make the phone size smaller. So let's scroll down. And we're going to set the phone size to 50. Okay, now it is smaller, and for the phone color, we're going to use black, and we're going to make this bolt. So let's click wait, and let's click bolt. And for the phone type, we are going to use Archivo black. But you can feel free to select any phone type or phone color that you want. It is totally up to you, and we're going to make this center aligned and I'm also going to make the box a little bit bigger. Okay, here we go. Okay, so this is the headline. Next, we are going to add navigation's menu. So let's add a rectangle. Let's click this. And let's create a rectangle right here, and we're going to change the color of the rectangle to light purple. Okay, so this is the perfect color. Then after that, we're going to add the heading and also navigation's menu. Let's add text, and let's put it right here. And let's type in fresh Grocery. So that's the name of the product. And we're going to set the phone size to 25. So it is going to be smaller. And we're going to make this bolt. And for the color, we are going to use black. Next, we're going to add the navigation's menu. So let's add another text, and I'm going to put it right here. And let's type in home. And the phone size is going to be exactly the same. It is going to be 25. And we're going to copy and paste this twice. You can press Command C and Command fee if you are using Mabook and you can press Control C and Control fee if you are using Windows. Okay, so now we have three homes. We're going to replace the second home with filters, and we're going to replace the last one with pricing. And we're going to make this bolt. Let's click wait and let's click bolt and the same thing for the second and the third one. Let's make it bold and let's do the same thing to the third one. Let's make this bolt. Next, we are going to add a button. So let's create another rectangle, and I'm going to put the button down here below the image. And I'm going to change the color of this rectangle to dark purple. And I'm going to make the edge of the button a little bit round. So we're going to set the radius to 38. And we're also going to add text. So let's click this and let's type in get early access. And we're going to set the phone size to 35 or maybe 30. So it is going to be smaller. And I'm going to change the color to white. And we're going to make this bold. Okay, here we go. And this is going to be center aligned. Next, we are going to implement horizontal stack. So let's click on fresh Grocery and let's press Shift and click Home fitters and Pricing. So we're going to select all these four tags. And now we're going to press Command Returnt at the same time. Then after that, let's click layout. And for the type, select stack and the directions is going to be horizontal, not vertical. So let's click this and for distribute, I'm going to select space Bitwind and this is going to be Center Align. And you can also add pending if you want to. And actually, there is one thing that we need to click. So let's click on Fresh Grocery, and I'm going to make this Center Align. Okay, now it looks better. And to view the page, you can click this preview. So this is how the website will look like. And you can also publish the website. Just click this. Okay, I think that's it. That's all you need to know. I'll see you guys in the next video. By 9. Creating Web Animation, Slideshow, and Page Transition in Framer: Holly guys. Welcome back to the course. In this video, we are going to create web Animation slideshow and also paid transition in Framer. Okay, let's get started. Firstly, we are going to create a new project. Let's click this, and you will be redirected to the editing page. Next, we are going to add a rectangle. So let's click this. And we're going to put the rectangle on the top. And we're going to change the color of the rectangle to black. So let's click Fill, and let's change the color to black. In this example, we are going to create a website for an Italian restaurant, and we're also going to animate web components in this website. Let's add text, and let's put it right here. And we're going to set the fun color to white. And in this case, the name of the Italian restaurant is Italian Kitchen. This is just a random name. And I'm going to make this bolt. And I'm going to set the font size to 35. And this is going to be center aligned. Okay, so this is going to be the heading. Next, we're going to animate this text. So let's click this and let's click Effex and let's click text. And for the trigger, I'm going to select on appear. For the preset, there are many options like blur, flip. What else? Shake. Shoot rotate, scale, and the last one is Seger. In this case, I'm going to use Rotate. And you can animate per character, word, line, or element. It is totally up to you. In this case, I'm going to animate per character. You can also add delay, but I'm not going to add any delay. Let's close this and let's test the animation. So let's click Preview. Okay, so it looks like this, very cool. Then after that, we are going to click this and click Interactive, and we're going to add slideshow. So let's click this. Now it is inserting the slide show, and I'm going to place the slide show right here. And I'm going to make the size slightly bigger and I'm going to put it right here. Next, I'm going to upload two images. So let's click this. Let's click Media and let's click Image. And let's click Choose Image. I'm going to upload these two images. The first one is spaghetti and the second one is pizza. Let's click Open. It will take a few seconds. Okay, so here is the first image, and now I'm going to upload the second image. Let's click Media. Let's click Image, click Choose Image, and I'm going to upload the second image. Okay, here is the pizza. And after that, we're going to add these images to the slide show. Let's do it. I'm going to click on the slide show and just click this and just connect this to the image. And let's do the same thing to the second image. Okay, now they are fully connected, and let's test this. So let's click Review. As you guys can see, now, you can view the image. And this is like a slide show, right? And let's click back. Next, we are going to create a button and we are also going to animate the button. Let's add a rectangle, and I'm going to put the rectangle right here and I'm going to change the color of the rectangle to black. Then after that, we're going to add text, and let's put the text right here and I'm going to change the phone color to white. Okay, here we go. Let's type in few Menu and I'm going to set the font size to 30, and I'm also going to make this bolt and center aligned. Okay, next, let's click on layers, and we are going to click on Fu Menu and PAD. At the same time, press Command Return. Next, we are going to animate this button. We are going to add Hover effet. So let's click Frame, and let's click Effec and let's click Hover and for the opacity, we're going to set this to one. For the scale, we're going to set this to 1.25. And for the color, we're going to change the color a little bit. So when the user places the cursor on this button, the color is going to change to dark gray. So let's click fail and we're going to change the color to dark gray. Okay, here we go. And for the transitions, you have two options. You can use Es or you can also use sprint. In this case, I'm going to use Es, and I'm going to select Es in out. And let's close this and now let's test these animations. Look at this. If I place my cursor on this button, it gets a little bit bigger. Look at this. Okay, next, we are going to add page transitions. Let's click page, and let's click New page, and I'm going to name the new page menu page. You can name it whatever you want. It is totally up to you. This is the new page. And let's click Home. And now let's click on FU Menu button, and let's click Link two and let's like menu page. So when the user click on this button, F Menu, the user will be redirected to the menu page. And for the new tap, I'm going to select no. So if you select yes, then when user click on this button, it will automatically open a new tab and open this page. But in this case, I'm going to select no. Okay. Let's try this. Let's click Preview. And if we click on this button, we will be redirected to the menu page, but currently this page is still empty. Okay, let's click back. And we're going to add images to the new page. Let's click this menu page. And I'm going to upload six images. Let's click this. Let's click Media and let's click Image. I'm going to copy and paste this five times. Okay, so now in total, we have six images, and I'm going to put it right here. And I'm also going to put this two right here. Okay, next, we're going to upload the image. Let's click this. Let's click JS Image, and I'm going to upload this image carbonara spaghetti. And let's upload the second image. Let's upload this image Italian salad. And let's upload the third image. Margherita pizza. Let's upload the fourth image. Pepperoni pizza. Let's upload the fifth image. Pesto spaghetti, and let's upload the last image. Seafood fettuccine. Okay, very cool. So now we have six images. Okay, now we're going to reorganize the image positions. And we're also going to animate these images. We're going to create floating animations. Okay, so let's like all these images, and let's click Effex and let's click Loop. I'm going to set the type to mirror. I'm going to set delay to 0.2, and the opacity is going to be one. The scale is also going to be one, and I'm going to set rotate to zero. And I'm going to set the offset to eight and 15th. And I'm going to set off screen to pause, and let's click transitions, and I'm going to select Is in out. Okay, now we're going to test the floating animations. So let's go back to the homepage and let's click Preview, and let's click FIM Menu because we want to go to the menu page, right? Okay, look at this. Very cool animations. Let me scroll them a little bit. Okay, so it looks like these images are floating, right? Look at this motion. Very cool. Okay. I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 10. Creating Responsive Design in Framer: Hi guys, welcome back to the course. In this video, we are going to create responsive design in Framer. If the design is responsive, when we reduce the size of the screent, all components in this website will automatically adjust. Let me show you an example. If I reduce the size of the scrint these texts and images will adjust automatically. However, in this case, the design is not responsive, so we're going to fix that. By the way, I created this product checkout page using Framer AI agent. Just click this and just write the prom, and in less than a minute, the AI agent is going to build and design your website. Okay, I'm going to set the width to 1,200, so that's the normal width for the cup frame. And let's click on layers, and let's click on Descop and let's click on Product content bound, and let's click on Product Overview. And we're going to set the width to relative, and we're going to set the height to fit content. Then after that, just click on Product Details. We are going to set the width to fill, and we're going to set the height to fit content. So make sure that you fix this next, let's click on product content bonds. We're going to set the width to fill. We're going to set the height to fit content, and we're going to set the maximum width to 1,200. Actually, there is one more thing that we need to do. Let's click on the product image, and we're going to set the width to fill, and we're going to set the height to fit content, exactly the same thing like what we did before. Next, we are going to test to make sure the design is responsive. So let's click on desktop, and I'm going to reduce the size of the screen. Look at this. So the text element adjusts automatically, right? So if I make the screen size smaller, the text adjust automatically. And you can also view the websites from another device perspective. Let's click this and let's click Tablet. So this is how the website will look like if you open the website using tablet, and the design is also responsive. If you make the screen size smaller, the text element will adjust automatically. Okay, I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 11. Creating & Integrating Form to Framer Website: Hi guys. Welcome back to the course. In this video, we are going to create and integrate a form to Framer website. If you remember in the previous video, we have already built a restaurant website, and now we're going to create a table reservation form for this restaurant. So the user will be able to enter their name, contact details like phone number or emails, how many customers are coming, date and time, and also special requests if they have one. To create the form, we are going to use Tally, and don't worry Tally is fully integrated with Framer. So Framer has tally plugin, so you can easily add the form to the website. And don't worry, this tool is completely free to use. Okay, I'm going to log in using my Gmail account, so let's click Continue with Google. It is still loading. It will take a few seconds. So just wait Okay, now we are going to create a new form. So let's click this new form and you have three options. You can create the form manually. You can create the form using AI, or you can also use one of the templates. In this case, we're going to create the form using AI. So the video is not going to be too long, and we're going to be focusing on the form integrations to the website. Okay. Let's write the prong. Create a table Reservations form for an Italian restaurant. As the customer name. How many customers are coming time and date contact details like phone number or email and also special requests if they have one. Okay, so that's my prompt. But if you don't want to use AI, that's totally fine. You can also create the form manually. Just click this press Enter to start from scratch, but it is going to take a while. Okay, now AI is going to create the form, so just wait well, it didn't take too long. It only took 30 seconds or even less than 30 seconds. So the form has seven questions, customer name, number of guest, date, time, email address, phone number, and special requests. Feel free to modify these questions, and now I'm going to click Preview. Okay, so this is how the form will look like. And let's click back to Editor. And now I'm going to publish this form. Next, I'm going to copy this link. Let's click Copy and let's go back to Framer let's click this and let's click Plugin, and let's click Browse O, let's type in Tali forms. Okay, now we're going to add a new page. Let's click this and let's click New page, and I'm going to name this page reservations page. You can name it whatever you want. It is totally up to you, and we're going to add the form to this page. So let's copy and paste this again and put it here. For the title, you have two options. You can show the title, or you can also hide the title. In this case, I'm going to show the title, and this is going to be center aligned, and I'm also going to show the Bground. So just click this and just click Embed Form. Okay, here is the tally form, and I'm going to place the form right here right in the middle of the page. Okay, now we're going to connect the homepage with the reservation page. To do so, we need to create a new button. So let's add a new rectangle, and I'm going to put it right here and I'm going to change the color to black. So let's click Fill. Next, we are going to add text. So let's click this and we're going to set the phone color to white, and we're going to set the phone size to 35. Let's type in book table, and we're going to make this bolt and also center align. Okay, now let's click on layers. And let's click Book Table and Rectangle, and let's press Command Return at the same time. Okay, now let's click on this frame. And we're going to link this button to Reservation page. So if the user click on this button, the user will be redirected to the Reservation page. Okay, let's test this website. Let's click Preview, and I'm going to click on this button, Book Table. As you guys can see, I got redirected to the reservation page. I can enter my name, the number of guests, the date, time, email address, phone number, and also special requests and click Submit. And if the user click Submit, the data is going to be received in your Tally dashboard. Just click on submissions and you'll be able to check all the input that you get from the user. Okay, I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 12. Creating Website Navigation & Dropdown Menu in Framer: Hi guys. Welcome back to the course. In this video, we are going to create website navigations and also dropdown menu in Framer. Okay, let's get started. Firstly, let's create a new project. Let's click this, and you will be redirected to the editing page. In this example, we are going to build website for a hotel. Okay, I'm going to add a rectangle. So let's click this and let's click Rectangle, and I'm going to put the rectangle on the top. Next, I'm going to change the color to black. Then after that, I'm going to upload an image. Let's click this and let's click Media and let's click Image and I'm going to place the image in the middle. Let's click choose Image. And I'm going to upload this image. So this is like the hotel image, and we're going to put this image in the hero sections. Next, we are going to add text. So let's click this, and I'm going to put the text right here, and we're going to change the phone color to white. And I'm going to set the phone size to 35. Look, let's type in Ski Resort. So that's the name of the hotel. And we're going to make this boat. And it is also going to be center aligned. Next, we are going to add the navigations menu. I'm going to copy and paste this. So just press Command C and Command fee. If you are using Windows, just press Control C and Control Fee. And I'm going to rename this Home. And let's copy and paste this again. And I'm going to rename this Room type. And I'm going to make this slightly bigger. And let's copy and paste this again, and I'm going to rename this locations. And let's do this one more time. Let's copy and paste this and put it here, and I'm going to rename this facilities. Okay, next, we are going to add the dropdown menu. To do so we're going to use frame. Let's click this and let's click frame. And let's create the frame right here and let's put it here. Now we're going to add text. Let's click this for the room type, we are going to have three different room types. The first one is the standard. The second one is premium. And the third one is Luxury. So we have three different room types in this case. So this is the dropdown menu for room type. Next, we're going to add a dropdown menu for locations. So let's copy and paste this frame, and let's put it here. And in this case, we're going to have three locations. The first one is France Alps. The second one is Swiss Alps. And the third one is Italian Alps. And actually, I'm going to set the font size to 30. So it is going to be a little bit smaller. And the same thing for the second and the third one. So let's scroll down. And also the same thing for the last one. Next, we are going to add dropdown menu for the facilities. So let's copy and paste this frame. And we're going to have three facilities. The first one is indoor pool. The second one is gym. And the third one is ski training. Next, we're going to rename the first frame. Room type dropdown. Next, we're going to rename the second framed locations dropdown. And lastly, we're going to rename the third frame facilities dropdown. Look, no, let's click Standard and press Shift and click Premium and Luxury. So we're going to select all of these three and also click room type dropdown and just press Command Return at the same time. And we're going to do the same thing to the second and third frame. Let's select French Alps, Swiss Alps, and Italian Alps, and also locations dropdown and press Command Return. And let's do the same thing. Let's select all of these three and also select the facilities dropdown and press Command Return at the same time. Now we are going to add the overlay. So let's click on room type, and let's click on Olay and let's click relative. And for the interactions, like click and for the position, select bottom, and this is going to be center aligned. And for this mess, se click and for collisions, sele auto and this is going to be tenth pixel. Okay, now we are going to move the first frame to the overlay. Next, we are going to drag the room type drop down and put it on overlay. Next, we're going to set the width to fit content and the height also to fit content. And let's click on overlay, and let's click Fit Content and also do the same thing for the height. And let's click on Room type, and let's click Fit Content. Okay, perfect. And let's test this dropdown. So let's click Preview. And if you click on Room type, the dropdown menu will appear, standard premium and Looks array. Okay, now we're going to do the same thing for the second frame and the third frame. Let's click on locations, and let's click overlays, and let's click relative and the setting is going to be exactly the same. For interactions, we're going to select click for position, it is going to be in the bottom, and this is going to be center lined, and we are going to set this miss to click, and the collisions is going to be auto and ten pixel. So this is going to be exactly the same thing like the room type. Okay, now we are going to drag the locations drop down to overlay. And let's click this and we're going to set to fit content. We're going to set the height to fit content. And let's click on locations, and let's do the same thing. Set the width and the height to fit content. Okay, perfect. And let's do the same thing to the third frame. So let's click on facilities, and let's click on Overlay and click relative. The setting is going to be exactly the same interaction is going to be click and the position is going to be in the bottom. It is going to be center aligned. We're going to set this miss to click. The collision is going to be auto and ten pixel. Next, we are going to drag the facilities drop down and put it on overlay. We're going to set the width to fit content, and we're also going to set the height to fit content. Let's click on overlay and we're going to do the same thing. Let's click on facilities, and we are going to do the exact same thing. Okay, now we are going to test this dropdown menu. So let's click Preview. If I click on room type, the dropdown menu appears. We have three different room types, standard premium and luxury. If I click on locations, the dropdown menu appears. We have three locations French Alps, Swiss Alps, and Italian Alps. And if I click on facilities, the dropdown menu also appears. We have three different facilities indoor pool, gym, and ski training. Okay, so this dropdown menu is working. Okay, I think that's it. That's all you need to know. I'll see you guys in the next video. Bye. 13. Designing Cleaning Service Company Website with Framer: Hello, guys. Welcome back to the course. In this video, we are going to build and design a website for a cleaning service company. Okay, let's get started. Firstly, I'm going to change the big ground color to light grin. Let's click Fill and I'm going to set the color to Light grind. Next, we are going to add the heading and also navigation's menu. So let's add text, and I'm going to put the text right here. And the name of the company is fast cleaner. And we're going to set the phone size to 30. And we're going to make this bolt, and we're going to change the color to dark grid. Okay, next, I'm going to copy and paste this multiple times. So if you are using MacBook, you can press Command C and Command F. If you are using Windows, you can press Control C and Control F. Okay, so now let's add the navigations menu. So the first one is services. The second one is pricing. Now we're going to add one button. So let's click this and let's create a rectangle, and I'm going to put the rectangle right here and we're going to change the color of the rectangle to dark green. And we're going to make the edge of the rectangle round. So let's set the radius to 60. As you guys can see, now the edge of the rectangle is round. And let's add text. Let's click this. And let's type in Contact us. And we're going to change the phone color to white, so it is going to be more visible. And we are also going to make this bold. Okay, so now we have the name of the company, the navigation menu, services pricing, and also contact us button. Okay, next, we are going to create a hero sections. Let's upload a new image. Let's click Media and Image, and I'm going to place the image right here and I'm going to make the image slightly bigger and let's click hoosimage I'm going to upload this cleaning service Illustration image. Let's click Open. By the way, you can upload any image that you want. It is totally up to you. Next, we are going to add the headline. Let's click text, and I'm going to place the text right here. Let's type bend a cleaner home, a happier life. Okay, so that's the headline and we're going to set the phone size to 60. And we're going to make this bolt. So let's click Bolt, and we're going to change the color to dark grind. Next, we're going to add the descriptions. So let's copy and paste this and put it down here and we're going to set the phone size to 25, so it is going to be smaller. And I'm going to copy and paste this sentence. Leave the mess to us, thoughtful home cleaning that gives you big time for the things you love. Okay, so that's the descriptions. Then after that, we're going to add another button. So let's click Rectangle. And we're going to place the button right here, and we're going to change the color of the button to dark green. And here is the color code. We're going to use the same code. So let's click this and let's enter the color code. And we are going to make the eds of the rectangle round. So we're going to set the radius to 60. And we're going to add text. So let's click this and let's put the text right here and let's type in cleaned my house. And we're going to change the phone color to white. So let's click this and let's click White. And we're going to make this bold and we're going to set the phone size to 30. Okay, so now it is slightly bigger, and we're going to set this to center aligned. Okay, let's continue. Now we are going to add the surfaces. So I'm going to make this longer. So let's click on Ds cop. And I'm going to drag this down. So now the paste is going to be longer. Then after that, I'm going to add multiple cards. So let's create a rectangle. And I'm going to put the rectangle right here and I'm going to copy and paste this twice. And I'm going to put it here in the middle. And let's copy and paste this one more time. Okay, so now we have three rectangles. Next, we are going to change the color of these three rectangles to light green. Okay, now let's add the content. Let's click text, and we're going to put the text right here and I'm going to copy and paste this. This is the first surface, regular home cleaning, and here is the descriptions, routine dusting, vacuuming and surface cleaning. And we're going to make this bolt. So let's scroll down, and let's click bolt and we're going to change the color to dark green. And we're going to copy and paste this twice. And we're going to put it here, and we're going to put the other one right here. And let's add the second surface. I'm going to copy and paste this. And the second surface is extra cleaning. And here is the descriptions, detailed cleaning of kitchen bathroom and hard to raise areas. And this is the third surface. Let's copy and paste it here. Move it or move out cleaning. And here is the descriptions. Prepare a property for its next occupant. These are three services that we offer. Next, we are going to click on these three rectangles and we are going to press Command Return at the same time. We are creating a new frame. Then after that, we are going to click on the frame and we're going to scroll down a little bit, let's click on scroll sections and we're going to name these services then after that, we are going to click on surfaces, and let's click Link two. Let's click Home. And let's click services. So basically, we are connecting this button with these sections. So if the user click on this button, the user will be redirected to these sections. Okay, let me show you. Let's click Preview, and if we click on surfaces, it will automatically scroll down to these sections. Okay, let's go back to the editing page, and now we're going to add the pricing. So we're going to drag this down. We're going to make this a little bit longer. Okay, now we're going to add a rectangle. Let's click this. And we're going to change the color to white. And we're going to copy and paste these three cards. You can click on one of these card and press Shift and click on another card and press Shift again and click on the last card. And just press Command C and Command V, and we're going to drag this down and put them right here. So this is going to be the pricing package. Let's add text. And let's put it right here in the middle. And let's type in pricing. And we're going to set the phone size to 60, so it is going to be bigger, and this is going to be center aligned, and I'm going to make this bolt Okay, next, I'm going to add the pricing for the first service, regular home cleaning. Let's click text, and let's put the text right here. Actually, I already wrote the pricing in my Google Doc, so now I'm just going to copy and paste this. Okay, so here is the pricing for the first service, regular home cleaning. It is $79, and it will take 2-3 hours. I'm going to make this boat and I'm going to add extra space. And let's copy and paste this twice and put it here and put it here. Next, we are going to add the pricing for the second surface extra cleaning. Let's remove this, and I'm going to copy and paste this. So extra clint is $149, and it will take 3-4 hours. And here is the pricing for the third surface. Move in. Move on clinic, $229, and it will take 4-6 hours. Okay, next, we are going to click on this rectangle, press Shift and click on this rectangle and press Shift and click on the third rectangle. And just press Command Return at the same time. So we are creating a new frame, and let's click on this frame, and let's scroll down. And let's click scroll sections. And we're going to name this pricing. Next, we are going to connect this button pricing with this section. So if the user click on this button pricing, it will automatically scroll all the way down here. Okay, let's do it. Let's click Pricing. Let's click Link two, select Home and select Pricing. Okay, now we are going to test this. So let's click Preview. And if we click on pricing, it will scroll all the way down here. Okay, let's go back to the editing page. Next, we are going to add another page, and we're going to create a form using Tally. So if people are interested in using this cleaning service, they can enter their name, phone number, email, locations and also select which service they are interested in. Okay, now let's click page, and let's click New page, and I'm going to name the page for. And let's go to Tally, and let's click New Form. And we're going to use AI to create the form. So let's click Create with AI and let's write the prom. Create elite generations form for a cleaning service company as customer name. Locations, email address, phone number. And with service, they are interested. And I'm going to copy and paste these three services, regular home cleaning. Extra cleaning and also move in or move out cleaning. So there are three services that this company offers. And let's click Send. And now AI is going to create the form it will take a few seconds. Okay, here is the form. It didn't take too long. What is your full name? What is your locations? What is your email address? What is your phone number? And we also have a multiple choice which service are you interested in? And the potential customers will be able to choose one of these three options. Okay, now, let's go back to Framer. Let's click this and let's click Plugins. And let's click Bros A, and let's click Tally Form. And we're going to click Publish and we're going to get the link. So let's click Copy. And let's put the link right here. I'm going to show the title, and this is going to be center aligned, and I'm going to show the Bground. So let's click Show and let's click embed form. It will take a few seconds. Okay, here we go. And I'm going to dig this and put it right here in the middle. Okay, I'm going to make this slightly bigger. Next, we are going to connect the homepage with the input form. So let's go to the homepage, and let's click Contacts. And let's press Shift and click on the rectangle and just press Command return at the same time. So we're creating a new frame, and let's click on the frame and let's click Link two. And click Form. So if the user click on this button, the user will be redirected to the page. And we're going to do the same thing to this button. So let's click Clean MyHuse and press Shift and click on the rectangle. Let's press Command Return at the same time. So we are creating a new frame, and let's click on the frame, and let's click clink two and let's click Form. So if the user click on this button, the user will also be redirected to the Form page. Okay, let's copy and paste fast cleaner. And let's go to the form page. And let's put the FAS cleaner right here, and let's click Link two and click Home. So if the user click this, the user will be redirected back to the homepage. Okay, let's test this. Let's click Preview. If I click on this button, contacts, I will be redirected to this form page so I can enter my name, locations, email address, phone number, and also select Wit service that I'm interested in. And if I click on Fast cleaner, I will be redirected back to the homepage, and if I click on this button, clean my house, then I will be redirected to this page. Okay, it is working. I think that's it. That's all you need to