Figma is a vector graphics editor and prototyping tool that is great for designing websites.

We just released a Figma course on the freeCodeCmap.org YouTube channel that will teach you how to use the tool to design websites.

Joy Shaheb developed the course. Joy is a prolific tutorial creator and excellent teacher.

Here are the topics covered in this course:

  • Figma Setup
  • Left Panel
  • Top + right Panel
  • Text Tool
  • prototype test
  • Auto Layout
  • Layout Grid
  • Constraints
  • Components
  • Desktop Design
  • Mobile Design

Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch).

Transcript

(autogenerated)

Figma is a vector graphics editor and prototyping tool that is great for designing websites.

And this course joy will show you how to use it.

Joy is a prolific and excellent tutorial creator.

Hey guys, you're here.

This is a big material for complete beginners.

And today, you and me together, we're going to make a complete responsive web design, both for the desktop version, and another one for the mobile version.

So this is the homepage of our desktop version.

So do you see this nav items over here, home teachers contact us signing according to this nav items, we have four pages, okay, let me walk you through all the pages and sections.

Okay, so this is the home page, I mean, the landing page over here, and then if I scroll down, then we're going to find this section over here.

And then this section over here are offered courses.

This is the Education website, okay.

And then if I scroll down, then you're going to find this over here.

And then lastly, we have this footer over here.

All right, let me zoom out a little bit.

And this is the teacher section over here, you can see that.

So this is the teacher section over here, we're going to make some cards over here along with some buttons.

And we're going to also work with svgs.

This is the footer over here for this page.

And then we have this contact us page over here, you can see that so we're going to also work with icons, you see these icons over here, we're going to work with them, and also make some forms over here as well, you can check out the sign up page over here as well.

This is the last page, you can download this entire figma file through the link in the description down below.

So once you download the figma file, you're going to find all of these pages over here.

So this carries the next design.

I mean, this one over here, and this one carries the mobile design.

Look at that we have the mobile design over here.

Okay, so this is our homepage, let me walk you through this.

Okay, so this is the homepage over here.

And these are the style guides, I'm in the typographic guides that we're going to follow, okay, what will be the font size of the logo, font size of the large text, font size of the button, text, etc.

Every design carries the style guide.

Okay, let me show you.

The mobile carry the style guide laptop, the cabinet design carries the style guide as well.

The laptop design also carries this style going over here and the next version, this one is at the very top, we're going to find this style guide over here.

So once you download the finger file, you're going to find all of these pages over here you see this, the next step carries the design for the next version.

And the mobile page carries the design for the mobile version.

Okay, so I'm going to click over here also, you're gonna find design for the laptop and the tablet version as well over here.

So this is a web design for the mobile version.

Okay, let me actually zoom in a little bit like that, look at that.

This is our homepage over here.

And then this is the next section, third section, fourth section, and this is our footer over here.

Okay, let me zoom in a little bit.

There we go.

And then we have our social media icons over here as well.

And then look at this teacher section over here.

And this is the rest of the design.

So today, you and me together, we're going to design the Dexter version.

Okay, this one, and the mobile version will see this laptop and tablet.

This is your homework.

After this tutorial, you're going to practice over here, okay, you're going to make this web design for the tablet version.

And also you're going to make the web design for the left version as well.

Okay, so these two are your homeworks.

This entire video is divided according to these chapters over here, there is one over here, you're going to find the timestamps on the description down below.

So first of all, we're going to look at all the tools figma carries.

So once we have covered all the tools figma carries, then we're going to start making a responsive web design for the next version first, and then we're going to start making the web design for the mobile version.

By the way, this entire video is made for beginners who doesn't know anything about figma.

So we're going to start from scratch, I will not use any plugins, libraries or design systems just plainly from scratch, we're going to use all the tools that FEMA provided and we're going to make the design using the tools only.

If this video gets at least 2000 likes then I'm going to make another video at once level figma tutorial, where I'll be covering how to make a web design using the design system plugins, libraries, prototypes, and also how to save time as well.

So hit the like button and also hit the subscribe button so the gear brother can afford them.

Ah, this is Luke 800.

This one.

Also note that these are our breakpoints, okay, for the extra version, it is 1400 40 pixels, okay.

And for the laptop version, it is 1024 pixels.

And for the tablet version, this is 768 pixels.

And for the mobile version, I have picked the 414 pixels, which is the width of the iPhone 11 Pro max alert In this video, we'll start according to these chapters over here.

First of all, you're going to open any web browser, okay, and you're gonna type figma.com fig ma.com like that, hit enter.

You're gonna find this interface over here and then you can log in or you can sign up don't have an account.

Okay, so I have an account.

And I'm going to log in over here, like that.

I'm going to use Google over here.

So once you have signed up, you're going to find this interface over here.

Okay, let me explain this insured.

Okay, so all of these are your draft, the projects that you're working on.

Okay, let me actually scroll down a little bit so that I can show you some of my projects over here.

Okay, like that.

And this one over here, do you see this, this is used to create a new draft file, I mean, a new project.

And over here on this section over here, you're gonna find some templates over here in order to save your time.

Okay, you can scroll down and see all of this templates over here as well.

If you want to download figma for the next version, you can do it as well, you're gonna click this over here, on your profile icon, okay, like that.

And then you're gonna click this get dekstop app, and then it's going to automatically download figma for you.

Alright, now I'm going to show you this community tab over here, okay, I'm gonna click this, or what you can do is you can come over here, and you can click this community over here, and it's gonna bring you over here.

So So this community tab contains works of other people, so that you can download and use for your own purposes.

Okay, let me scroll down a little bit.

So you're gonna find this.

So these are the trending files over here, you're gonna find various assets over here, various design systems, okay, so look at this over here.

These are various icons that you can download and use for all your projects.

So like that we have tons of resources published by other people for completely free.

Alright, so I'm gonna scroll down so that you can look more, okay.

And then at the very top over here, these, these are the filters, okay? If you want just plugins, if you want to just look at plugins, you can click over here, or perhaps you want to see some illustrations, okay, you're going to click illustrations over here.

And then you're going to find various illustrations, various digital assets, okay, like that.

For instance, let's say that, look at this illustration over here, if I click over here, if you want to use this for your project, what you're going to do is you're going to click this duplicate option, okay, like this.

And it's going to give you a copy to your figma file.

And you can navigate the designs, I mean, navigate the assets through this pages over here, okay? Like the components, look at all of these components over here.

So you got this for completely free.

Okay, let me zoom in a little bit, so that I can show you various design assets.

And if I want to change the background color, I can also do it by this, look at that, from purple to white like this.

Now look at my designs over here, okay? Look at this models over here that I can use for my projects, okay? Like this.

Okay, I can zoom in, I can zoom in and zoom out and various assets over here, like that, look at all of this assets.

Along with the people illustrations, I also get this over here, look at this.

In order to go back to your profile from the community tab, what you're going to do is you're going to click over here, okay, and then you're going to click on your profile like this.

And you're going to come back to your figma dashboard over here.

So this is our practice project, I have included a link in the description down below, you click that, and you're gonna come over here.

So once you come over here, you're gonna click this duplicate option.

Okay, so if you click on this duplicate, then it's going to duplicate your project on your profile like this.

First of all, let's inspect what we have on our left panel over here, you see this panel over here.

So you see this layers over here, this layers represents all of this layers that we have over here.

And this assets over here, I'm going to discuss in details about this one, when I am discussing about the components part, this one over here, part number nine.

All right, now I'm gonna come back layers over here.

And this one represents all my pages.

Okay, so these are all my pages over here, if I click this over here, it's going to hide my pages.

If you click it back, it's going to show me all the pages that I have.

If you want to create a new page, then you can click this plus sign over here, and you can name it whatever you want.

Like I'm going to name page one over here, like this, and I'm going to hit enter.

If you want to delete a page, then you can just right click over here and delete this like that.

Or perhaps if you want to rename it, then you can click this over here.

So I'm going to delete this, okay, I don't need it.

So all our designs are arranged into these pages over here.

First of all, you have the Start button over here, I mean start page over here, you can see this.

So you can see this thumbnail over here, the topics covered page over here, the breakpoints over here.

And if I come to this dekstop page, you're going to find the web design for the next version.

Okay, if I click this laptop over here, you're going to find the design for this laptop version.

Okay, similarly for the tablet as well.

This is the design for the tablet version.

This is the mobile version.

This one is the responsive test.

I'm going to discuss about this part when I'm discussing the constraints providing this one, Part Number eight, I have included a small sample on this page over here so that they can test how products work in figma.

So I'm going to discuss paradise in Part number five.

And this page, the assets page carries all our assets, all our illustrations and social media icons, we're going to make our web design easy, all of this assets over here and this section, the credit section carries all the links from where I have downloaded the illustrations.

Okay, so you can see this over here, if you double click over here like this, then you can copy this link, and you can go to that link and see the original source of the illustrations.

Alright, then I'm back to the start page over here.

And now we're here I'm going to create a new frame, okay, by the way, all our designs are arranged in two frames, okay, if I hit F, or if I click this over here, this frame button, don't worry, I'm going to discuss in details, I would all the tools on this top panel, and on this right panel over here, okay, if I select this frame over here, and if I drag it like this, like that, okay, by the way, regarding the basic movements, you can use your mouse scroll to go top to bottom like this, okay, if you hit Shift and throw your mouse wheel, you can go left to right like this.

Okay, if you hit Ctrl, and if you use a mouse scroll, then you can go zoom in and zoom out like this, look at that.

Alright.

Alright, so I'm back over here on this frame over here, all our design in all our elements are arranged into frames, okay, let's say that I have a circle, okay, I'm going to hit a ball.

And I'm going to draw a circle over here like this, that, and now I'm going to create a rectangle, okay, if I hit r on my keyboard, then I can draw a rectangle over here like this.

Let's say that I want some text, okay, if I hit t on my keyboard, and click over here, then I can write text, okay, like this.

Control a, and you increase the font size over here to 50.

Not 50, let's say 200.

Okay, like that, look at that, we have some text over here as well.

And so look over here, this is our frame, okay.

And this frame carries all our elements over here, this, this ellipse over here, you see this ellipse, it gets highlighted in blue, you can see this blue highlighted color, okay? If I highlight the rectangle, look at this, I'm selecting the rectangle, okay, if I select the text over here, like this, look, it gets highlighted over here.

And do you see these two buttons over here, if I click this, then it's going to hide me the frame like this, look at that.

Okay, now look at this, I can move this frame anywhere I want.

Okay, if I do it like this, look at that.

But if we want to lock the position of this frame, what you can do is you're gonna click this over here, the frame, or you can just click on the name over here, usually, you see this frame number 52, I'm going to click this on the name, and then I'm going to click this lock button over here, then it's going to lock me the position it is, it's not going to move from its position is going to stay fixed over here, including all the assets that is carried on the frame.

Now look, I can't select the text, I can't select this shapes over here as well is going to get locked over here.

In order to unlock that, I'm going to click this over here like this unlock.

Now I can move it and I can select all of these elements over here as well like that.

So I'm going to delete this frame over here like this.

Alright, now we're going to keep our content inside our frame as it is, or we can also arrange them into groups, we can group them directly, or we can also use the Auto Layout option.

So if so if I select all of them over here, and if I right click over here, and we're going to get this option over here, auto layout, add auto layout, I'm going to discuss in details about this tool on part number seven over here.

So if I right click over here, then I'm going to get this add Auto Layout option.

Along with that I have this option group selection, if I click on that is going to behave is going to behave like a group.

Okay, if I remove my mouse and click over here, outside this box, then look at this, it gets it removes the blue outline.

If I click over, if I hover over here, look, all the elements gets highlighted, which means that it acts like a group.

Okay.

So if I want to ungroup this, what I'm going to do is I'm going to click over here and Ctrl Shift g Ctrl, Shift g like this.

Now look, it will behave individually like that, look at that, this is behaving individually, there is one is behaving individually, there is one as well.

Same thing goes for the oral Layout option.

Okay, now I'm going to fill all of them again and I'm going to create a new group over here.

Okay, group selection.

Now look, it behaves like a group.

Okay, let's say that you want to move Okay, now let's say that you just want to select the rectangle and nothing else.

So in this cases, what you have to do is you can double click on the rectangle like this, there is just like just the rectangle over here, or what you can do is you can hit Ctrl on your keyboard control and click one time over here, then is to select only the rectangle.

If you want just only the text, you're going to select Ctrl on your keyboard and just select the text over here like this, or what you have to do is you're gonna select this whole thing, and then double click over here like this.

Look at that, it's going to select your text over here.

Now we're going to discuss in details I want all the tools that is listed on the top bar over here, this one over here, and all the tools that is listed on the right side over here.

So let's get started.

Alright, The very first thing that I want to talk about is a movement, how will you move back and forth in your figma file, okay, so if you hit shift, and then if you scroll your mouse wheel, then you can go left and right like this, look at that.

Okay, so if you release this shift and just use your mouse scroll, then what you can do is you can just scroll top to the bottom like this, look at that.

Okay, so in order to go top to bottom, you're going to use a mouse scroll like this, okay? Like that.

And if you want to go to left to right, then what you're going to do is you're going to hit shift, and then you're going to scroll your mouse like that, okay, that you're going left to right, if you want to zoom in and zoom out, what you're gonna do is you're gonna hit Ctrl, and then you're gonna use your mouse scroll like this, look at that, I'm zooming out.

And then I'm zooming in like that, look at that, okay, and you can also use this hand tool over here, okay? If you hover over here, or perhaps you can also use h, t on your keyboard like this.

And then you can pinch your left mouse button, or you can just click over here, and you can just move back and forth like this, look at that.

There we go.

Let's talk about this feature over here.

So if you click over here, you have two options, the move option and the scale option.

First of all, let's look at the move option.

Okay.

So if I click this move option, or shortcut V, okay, you can see all the shortcuts over here v for move and scale, it is key, okay, so I'm going to select that move option over here, V, okay, and then I'm gonna come over here, and then I'm going to select this frame, in order to like this frame, you're gonna select this name over here.

And then what you're going to do is you're gonna move it like this, look at that, you can move freely, independently, anywhere you want.

Okay, you can select any frame you wish, for instance, let's say that I want to select this frame over here, okay? And then I'm gonna move it anywhere I want like this, because that I can move it like that, not just frame, you can move any element, okay, if you want to move this image, then you can also move it like this, look at that, I have selected this and I'm going to move it like that.

I can move it anywhere I want, like that.

Okay, Ctrl zet.

In order to make you understand the scale feature, I mean, this one even better.

First of all, we need to look at the frame feature, this one and the rectangle feature over here.

So let's go.

Alright, now I'm going to come over here and let's discuss about the frame feature.

Okay, so I'm going to come over here and then I'm going to select this, or shortcut, I'm going to hit F, okay, f like this, then you're going to get all of this options over here.

Okay, who do you know what these are, these are your, these are the screen width of various devices.

Okay, so let's say that I want to work with mobile.

Okay, so I'm gonna click this phone over here and look at this, I have an iPhone 11 Pro max.

And then you see this one over here, this measurement, this is the width and the height of the screen.

Okay, I can also work with iPhone eight, iPhone as a Google Pixel two, etc.

We have a lot of options over here.

But if you don't want the phone, you can also go for the tablet, there we go.

And if we want to work with the desktop, boom, there we go.

And you can also you can even also work with watch, like Apple watch over here.

And then we have social media post dimensions over here as well.

But if we want to make something custom, what you are going to do is you're going to hit F like this, and then click over here like this and you can drag this little icon over here anywhere you want and you can just customize the width and height according to your needs.

Okay, so now the next thing that I want to talk about is this one over here Okay, so what is this this is a frame Okay, it is going to show me that it is a frame but if you want to change it if you want to change the frame to a custom frame, let's say that I want to work with iPhone 11 Pro Max, okay, I'm going to select this Now look, it's gonna change me the width and the height like that, look at that, but if we want to work with it, say we have Surface Pro for okay look at this predefined width and height Okay, if I select this, then it's gonna give me that width and height.

If I select this now look 1368 by 912 pixels, I mean 1368 is the width 912 is the height like that, look at that.

And also you can just drag like this according to your needs, okay, you can adjust the width and height, okay? So look at this x and y, these are the coordinates I mean, where is your frame located in your figma file, this x and y represents that if you drag it like this with that your frame is moving to the left, I mean to the right, okay, if you want to move it to the left like this, then you can also do it like that.

There we go.

If you want to move it vertically, then you can do it with the y axis over here like that.

And if you don't want that feature, then you can just drag your frame over here and I will click your frame over here and drag anywhere you want.

Like this, look at that.

Okay, let's say that I want to place it over Here, okay beside my offered courses, frame over here like that, okay that I have kept it over here, and it's gonna give me automatic calculations over here.

I didn't have to worry about that.

Now let's look at this feature over here, the width and the height.

Okay? You can guess it by the name.

This is used to set the width and height of your frame or perhaps your rectangles as well, or any shapes you want.

Okay? So I'm going to select this.

So I'm going to select this like this and look at this features over here.

Okay, I'm going to select this, and I can individually set the numbers, let's say that I want 800 pixels, Okay, I'm gonna write 800 pixels over here, there we go.

It is 800 pixels over here.

You can also do mathematical calculations over here as well.

Let's say that I want to add another 50 pixels, Okay, I'm gonna write 50 over here.

Now I'm gonna hit enter, look at that.

850 pixels, you can also do minus multiplications, etc, according to your needs.

Okay, I'm gonna, let's say I want to minus nine pixels from here it is 859 pixels.

So minus nine, enter, there we go.

858 50, which is a square.

Okay, I changed my mind, I'm going to set it to, let's say, 350 over here, like this.

Look at that.

Okay, so do you know what mode this is? This is the portrait mode over here.

And let's convert it to landscape mode.

Okay, I'm gonna click this over here like this.

And do you see this tool buttons over here? This is the portrait mode.

And this is the landscape mode.

Look at this.

I look at my first of all, look at my width and height, okay, the width is 350.

Height is 650 is gonna get shifted between these two.

Okay, let me show you.

Okay, I'm going to select this over here.

Now look.

So after selecting this button over here, now look very carefully.

The value of this two jumped, it was 650.

Before, and now it's 350.

Okay, it was 315 hours.

650.

Now look very carefully, I'm going to convert it back to portrayed Okay, like this, look at that, look at that these two values are jumping at the same time our frame is changing over here, look at this.

There we go.

Like that.

If you want to change the angle of a frame, you can just drag over here like this, look at this, I can change the angle of my frame.

Look at this, it is rotating.

Okay, um, let me actually zoom in a little bit.

Now look at this, it will rotate like this.

Okay, we have negative values, we have positive values.

So you can just manually do it as well like this.

I'm going to set to zero like this.

There we go.

Boom.

Now look at this over here.

This is the corner radius.

Okay? Look here very carefully.

I'm going to zoom in, you see this, this is pointy corners, okay? So if I select this, and if I drag like this on the right side, now look.

We can set curves on our shapes and frames, okay? So look at this.

Look very carefully.

Look at this, you see this? Okay, now, let me talk about this one.

Okay, the clip content what this is, okay, in order to make you understand this clip content, first of all, I'm going to set some text over here, okay? He or you can just select this option over here, but don't worry, I'm going to explain in details about this tool and all of these properties.

Okay, it is coming.

Wait a minute, okay.

I'm going to click over here and then click over here like this look, and I'm gonna select some text or it's very big.

Okay, so I'm gonna, what I'm going to do is I'm gonna select over here, okay.

180 pixels.

I'm going to set it to 60 over here like this.

Look at that.

ADF Okay.

Oh, sorry.

fidf.

Okay, just some random text.

Okay.

I just placed some random text over here like this.

Look at that.

ABC.

ABC.

makes more sense.

Okay, so now look what happens.

Okay, I'm gonna remove that clip content from here.

Okay.

Look, nothing is set over here.

Okay, now look, what I what happens is when I resize it like this, look at this.

Okay? The text is outside, the text is outside.

And the frame is getting resized like this, look at that.

Okay, you can clearly see the content.

Even if we resize our frame, you can see that you can clearly see the content, even if we resize our frame, even if the frame is smaller than the content.

But look very carefully.

What happens if I enable the clip content over here like this look like? It gets kicked like a scissor.

Okay.

Now if I resize it, now you can visibly see all the parts of our content over here.

Okay, like that.

Look at that.

Now, let me explain this feature over here.

You see this feature? Resize to Fit.

Now look, what happens if I click this? Okay, there we go.

It resizes I mean, it removes all the gaps and add just to our content.

There's one over here.

This is very useful when we're making buttons.

Let me give an example.

Okay, control Zed.

Let's say that I'm going to make a button Okay, V UTP.

Or like this, and I'm gonna make it a smaller, let's say 30 pixels, okay? And now look, and look, instead of doing this one like this manually like this, we have to do a lot of work over here and then center it over here.

Like this, and then it is called a button over here like that, instead of doing this hard work, what you can do is control Zed, Zed, Zed, Zed, it means I'm in going, I mean, I'm going back, okay, by doing control Zed, like this, look at that.

So what you can do is simply, you just click on your frame, and then you click this over here.

Resize to Fit, there we go, boom, we made ourselves a button.

This is just a sample on how to create a button.

But after a couple of minutes, I'm going to discuss in details how to make a button using auto layout.

I mean, there's one over here with appropriate calculations.

So wait a couple of minutes.

So once that's done, I can adjust the corners over here like this, look at that, there we go.

Like that, I can adjust the corners, and then I can rotate it over here like this, look at that, okay, on to exact.

And regarding the corner radius, look at this, I have this corner, I mean, I have set it to eight pixels, which means that it's gonna say eight pixel over here, eight pixels here, here, here.

Let's say that I didn't want the corner radius to be on the right side, I just want it to be on the left side, just one single side.

So what can we do in this scenario, I'm going to select this over here, and I'm going to click this little icon over here, okay? And then look at this, this is called independent corners, it is set to eight pixels for all the four corners.

Okay, so let's say that I didn't want the corner area on the right side, I just wanted on the left side.

So what I'm going to do is I'm going to do it like this, okay, this is the top, this is the top left.

Okay, this is a top right, I'm going to select this and I'm going to set it to zero like this, look at that.

Now look, the corner effect is removed.

Okay, I'm going to select this again.

And I'm going to select top left, top right, bottom left, bottom right, this one, okay, I'm gonna select this 00 actually, sorry, my bad, I chose the wrong corner over here, what you learn from mistakes, right? So I'm going to select this again, and I'm gonna say to eight pixels over here and zero over here, like this, and then enter.

Look at that.

I have corners over here on the left side, not on the right side.

There we go.

Now let's discuss about this feature, get the slice feature.

So what this is used is, let me actually come to my, let me actually delete this, okay? I'm going to come on to this frame over here, okay, let's say that I just want not the whole image, I just want the head, okay, I just want to download the head, I just want to work with the head.

Okay, so what I'm going to do is I'm going to click this over here, slice, okay? And then I'm gonna draw a rectangle over here on the head section, can you see this properly? Okay, there we go.

Now look, I have a little slice over here, you can see this, okay? Now what I'm going to do is I'm going to select this slice over here, either from here, or I can directly select it here, okay, and then I can adjust the width and height as well like this, look at that.

Alright, and I can also move it like this, look at that, there we go.

And then I'm going to click it over here.

And then can you see this Export button over here, I'm gonna click this export, who is downloading this, okay, I'm gonna click this plus sign over here.

And you can set the image quality as well, you can set it to PNG, jpg, SVG, I'm gonna do it in SVG.

Okay, I'm gonna select this, and then I'm going to export this one, look at this, I have downloaded a little file over here.

So what I'm going to do is I'm going to drag it over here like this, look at this, I just look at this over here, I just downloaded I mean, I just sliced the head, because I just only need to work with the height head.

Okay, now look, look at this.

This is equal to this one over here, this slice over here, I hope you understood the slice properly.

Now, regarding this Export button, you can download anything you want.

Okay, let me actually give you a demo.

Okay, I'm going to delete this home here.

And at the same time, I'm going to remove this slice from here as well.

And let's say that I want to download this single frame over here, okay, just single frame, or perhaps even just the drying, we're here I'm in the illustration, I just want to download the illustration and nothing else.

Or you can also download multiple files as well like tricky by clicking this one and then shift, then click like this, then click like this as well.

Now, let's say for keeping this simple, I'm going to download this image, okay, I'm going to click this over here, and then I'm going to scroll down at the button over here.

And then look at this, I have the Export button, I'm gonna click over here and then look at this.

You can change the size as well you can download it two times three times or four times the actual size, okay? And then we have the PNG, SVG, jpg, PDF, etc formats, okay, you can download anywhere you want, I mean, you can download, you can download in any format you want and then you're gonna hit this export frame button.

And yeah, this feature this preview option is given just to let you know that what you are downloading Okay, you can see this I have just selected this frame, I mean, this illustration over here, let's say that I want to see like this text over here, okay, I'm gonna select this text and I'm going to select this export like this.

And look at that.

It is giving it is giving me this preview that I have just downloaded in there.

text over here.

Now let's discuss the shape feature.

Okay, so I'm going to come over here, you see this shape, it looks like a square, Okay, I'm gonna select this like this, look at this, I have a lot of options.

I have rectangle, line, arrow, ellipse, polygon, etc.

Let's say that I want a polygon, sorry, I want an ellipse, okay, I'm going to click this, or I can select Oh, so I'm going to select all like this and look at this, I can make a circle over here.

But look, this circle looks distorted.

And it's going to be very hard for me to make a perfect circle.

So in this case, what I'm going to do is I'm going to select, I mean, I'm going to hit shift.

Now look, it instantly became a perfect circle.

And now while holding Shift, I can just move my mouse and look, it's gonna give me a perfect circle like this.

Look at that.

Okay, this is a perfect circle over here, I'm gonna delete this.

And I have more options like a rectangle, okay? And I'm gonna select rectangle like this, look at that.

Okay, I can do it anywhere I want.

I can move it anywhere I want.

And I can select the width and height accordingly.

Okay, look at this.

I'm moving this and I'm resizing this like this.

And do you see this little dot over here, this dot this dot, dot dot over here, it is used to set the radius, look at this corner radius, you can do it over here, or you can, you can do it over here directly like this.

Or what you can do is you can select this options over here, okay, like this, as I told you a little bit earlier, okay, you can do it like this as well.

And yeah, do you remember the scale button? I'm do remember this Scale tool over here.

This one, as I told you that I'm going to discuss in details after discussing this frame and this rectangle.

Now I'm going to discuss this.

Okay, so what were the scale button is used, let's say that you want to scale I mean, you want something, let's say that you want to make something bigger.

Okay? So in the case of this circle, do you remember this circle this distorted circle, okay, with this, you cannot make it a perfect circle.

Let's say that I have selected a shift.

Okay, shift.

Now look, it looks like a perfect circle.

Okay, I have released the chip, then let's say that you want to make it a little bigger.

Okay, what you normally do is, you're going to select this like this, look at this, okay, when you try to make it bigger, it is going to get distorted again.

So in this case, what you can do is you can just simply select the shift, and it's going to resize accordingly.

Or what you can do is you can select this scale function over here, you can select this over here directly or you can just select the K option on your keyboard, okay, okay.

And look at this, I have a different icon on my mouse, okay, I'm going to select V, which means move, okay, look at this icon on my mouse.

Okay, I'm gonna zoom in a little bit over this.

This is V, this is for the move, this is the default.

And if I want to resize this K, look at this scale, and this is move.

Okay, I'm gonna give K over here like this.

Now I'm gonna resize Look, it's gonna resize proportionately, and proportional measurements, okay, now look at this, okay? 788 by 788.

Okay, I'm gonna resize it again.

Now look at that, it's gonna give me accurate proportion measurements.

So I'm gonna remove this circle from here and I'm going to draw a perfect square, okay, shift, and then, oh, sorry, I'm gonna hit R, which means rectangle, or you can just select it from here as well, and shift and then drag like this.

Look at this.

This is a perfect square.

Okay, now let's talk about this feature this field feature Okay, this is used to color your rectangle, I mean, color your shapes like this.

To do that, you can color it anything you wish.

You can also put input the hex value, you can also change the opacity over here, you can also use this predefined colors.

Let's say that I want to use sky blue over here because that enable also uses dropper tool.

Okay, if you select this dropper tool, then you can select anything you wish.

Let's say that I want my box I'm in my square to be the color of this.

Okay, so I have this eyedropper on my hand.

And when I select this over here, like this, now look at my square over here, look, this is the same color as this one over here.

Now let's look at more features that we have no right panel over here.

Okay, this features Okay, I'm going to select it over here and I'm going to change it to the default color.

Okay, wait a minute, e4, e4 info like this.

Oh, sorry.

There we go.

It is c four c four, c four.

Alright, so the first thing that I want to discuss is the stroke.

So what this does is it gives a stroke around our box.

Okay, let me show you Okay, okay, I'm gonna select this like this.

We're gonna, it's gonna generate me a little stroke over here.

Okay, can you see this black colored outline over here? I'm gonna increase its width okay like this look 345678 910 so the stroke is 10 pixels.

Okay, can you see this black color tick stroke over here.

You can also change the various properties like the color the size, then should it be inside the box.

Should it be on the center or should it be outside the box like that, look at that, you can also hide the shadow, I mean, you can also hide the stroke like this.

If you select this eye button over here like that, look at that.

You can also click it over here again, and it's going to show me the stroke over here.

And if you want to remove this stroke permanently, you can also use the minus button over here like this, look at that, it went away.

Okay, now we're gonna look at this FX feature.

Okay, for that, I'm gonna just resize this a little bit like that.

Okay, now, if I select this effect button, look at this, I have this panel over here, okay, I have a lot of options.

Like if I want to make a drop shadow, or if I want some layer blur, or perhaps background blur, we have Inner Shadow as well.

For now I'm going to show you the drop shadow.

Okay, I'm going to select this over here.

And yes, you can experiment on your own.

And look at this, I have a little bit of shadow, you see this shadow at the back of this rectangle? Let me actually remove that child.

Okay, look at this.

You see that? Do you see the shadow over there? Okay, I am hiding the shadow.

Now let me bring that shadow back.

Look at this.

So this so this drop shadow is used to make shadows, draw shapes, frames, buttons, cards, etc.

Alright, so now look at this over here.

This is called the effect setting.

Okay, so I'm going to click over here and then I can adjust the shadow.

Okay, so this is the x, which means that my shadow will move left and right like this, look at that.

Okay, look at this, look, my shadow is moving left and right, if I want to, if I want to move the shadow, top to the bottom, like this, I'm going to use this wide button over here.

Okay, like that.

Look at that.

And then if I want the shadow to spread, I'm going to use the spread over here like that, look, look, the shadow is getting bigger, okay, and smaller as well.

And you can also change the color over here, opacity over here as well.

And if you want to change the blur, you can do it like this.

There we go.

We're increasing the blur.

So we're going to include this drop shadow when we are making buttons.

Okay, let me actually give you a demo.

Look at this, our buttons have a little bit of drop shadow over here, as well as this cards, look at these cards.

Okay, this has drop shadow.

So when we're making this layout, I mean, when we're doing this design, we're going to utilize this drop shadow.

Whatever I have discussed so far, this is the design section, okay, on the right panel.

So this is a prototype over here.

After a couple of minutes, I'm going to discuss about this for a live Okay, so don't worry, and look at this inspect over here.

Okay, so if I go to inspect, then is gonna generate me CSS code.

Let's say that I want the code of this one.

Okay, this section over here, then I'm going to select this over here and look at this.

It is generating the CSS over here like this, look at that.

If you're a developer, you can save time.

Look at this display, flex flex direction, column justify content center, align items, flicks start, so on and so forth, along with all of this look, pixel measurements over here along with the padding with height, etc.

So this inspect tool is very handy.

Alright, now I'm going to discuss in details about all of these tools over here.

These are the alignment tools.

Okay? So in order to discuss about that, I'm going to come over here and I'm going to draw a frame, okay, F and then I'm going to drag it like this, look at that.

Okay, so now I'm gonna write some text, okay, D, and then click over here, and then some text over here, okay, like that.

Okay, let me actually write ABCD.

Okay, ABCD like that on through a capital letter A, A, A, B, C, D, there we go.

Let's say that I want this text to be at the very center.

So what will we do? Okay, so if we come over here, look at this Align Horizontal center, if I click over here, like this, now look, our text is at the very center, horizontally, okay? If I wanted to be at the very center vertically, I mean, if I wanted to be at the very center over here, so what I'm gonna do, what am I gonna click, I'm gonna click over here, look at this.

This is the Align Vertical Centers like this, look at that, it is at the very center, both horizontally and vertically.

Let's say that I want to move it to the very left at the very left, okay, what I'm going to do is I'm going to click this over here, like this.

This is alignment left.

If you want alignment, right, you can also do it like this, this option over here like this.

So you can experiment with all of these values over here.

And regarding this, I'm going to delete this over here like this real quick.

And regarding this panel over here, I'm in this tool over here.

And regarding this text, this is the file name, okay, if you double click over here, then you can rename it Okay, so I'm going to keep it figma file over here, I'm in figma tutorial over here like that as it is and if you click over here like this, you can download this figma file, you can also duplicate it, you can rename it any goal to delete this as well.

So these are the options that you have.

You can also share it with their friends that what you created so far, like you created this frames over here if you want to share it with their friends or perhaps if you want to share it with your clients, then you can click the Share option over here and then you're going to find appropriate details.

Okay, so I'm gonna remove this night right now and Okay, now regarding this button over here, this is called a present button.

So if you click on here, then you can see your designs life at the same time.

If you're working with prototype, then you can also view your I mean, you can also test the interactivity of your prototypes live.

Don't worry, I'm going to discuss this product after a couple of minutes.

Okay? So let's say that I'm going to click on here, okay, after selecting this design over here, okay, I'm gonna click this, I can feel this over here.

Now look at this, this is the desktop type program.

Okay? And if I come over here, if I click this arrow over here, then it is going to go next like this.

Wait a minute, these are the sections.

Look at this.

This is my design over here.

Okay, I can view it over here.

No, no, this is very large.

Okay, I want to make it small.

So what I'm going to do is I'm going to come to this options, and then I'm gonna, I'm gonna select this fit, scaled down to fit, okay, like this.

There we go.

Now, now it looks much better.

Okay, so I'm gonna come over here, and I'm gonna go next.

Or perhaps you can also use an arrow right like this, look at that, he's gonna move to the next frame like this.

So by this way, you can preview your designs, what you create so far, okay, you can view it like this.

Look at that.

There we go.

Now we're going to discuss that what the text tool in details.

So this tool over here, the text tool is used to add text to all Web Designs.

So if you notice carefully that every design the desktop, tablet, laptop, mobile contains this chart over here, okay, this is the typography guide chart shows that what should be the font size of the logo, the font size of the nav items, font size of the large text, font size of the small text, the text of the button, etc, along with the line height over here.

So you can see that the line height of large should be 90 and line height of small should be 43.

Over here.

Same goes for the mobile design as well look at this over here, I have included the mobile typographic over here, the logo, this logo is 48 pixels, then large text 32 button is 24 pixels, so on and so forth.

It also this chart is also mentioned for the laptop as well.

So look at this over here, this is the laptop design over here.

And this one is the typography for the laptop design.

Okay, so the logo is 60 pixels, the button should be 30 pixels, so on and so forth.

So I'm going to come over here, and over here, I'm going to create either a rectangle or a frame, so you can so we can hit our like this, and it's going to create me a rectangle, what I'm going to use a frame over here, okay, control that.

So if if you hit F like this, it's going to create a frame like this, look at that.

Okay, I'm going to make the frame a little smaller, let's say 1000 by 500.

Okay, that will do for this tutorial like this, look at that.

Alright, then in order to use the text tool, you directly click over here like this, and it's going to highlight blue over here and you're going to get a plus sign on your mouse, can you see my mouse over here it is in plus sign, okay.

And if you want to do it in a shortcut way, you just hit t on your keyboard like this T and it is going to highlight that text over here on your mouse.

And if you click anywhere, then you can get this sign over here you see this then you can add text like this, look at that it is said 210 pixels, but by default, your text should be 12 pixels like this, which means that Wait a minute, it should be on curved pixels like this, which means that it's going to be very small.

So what you're going to do, you're going to click over here okay.

And you see this option over here this is used to set the font size so what is the font size of all dekstop let's say it is for the logo is 90 pixels, okay? So let's say to nine pixels, like this look, it is set to 12 I'm gonna set 90 over here like this, okay, pay that enter and then is the output mean this result Okay, so this is used to set the font size.

And this one you see this this is used to set the font family, it is kinda set to Roboto and if I click over here and I can change the font family as well like this, it should be let's say we're going to say to Poppins like this p o p p i ns Poppins, okay, now look, the font family changes.

Similarly, I can also write sans serif over here, sans.

Let's go for sensation.

Okay, I'm going to hit enter like this.

Look at that it changed.

And if you click this drop down icon over here like this, then you have tons of options of for fonts.

You can pick any font family you want, like this, look at that.

So I'm going to say to pop in like this p o p p i ns Poppins like that, and I'm going to name over here, a do.io like this, okay, because we're going to deal with this logo after all.

Okay, so now the next thing that I'm going to show you is this one, okay? This is the font weight, it is kind of set to red, it is currently set to regular.

You can also set extra light over here like this.

Look at that.

The font weight changes, okay? You can also say To set it to paint like this, look at that it became thin.

You can also say to this extra ball, look at that how bold this text is.

Okay, I hope you understood it so far.

And you see this over here.

So this is used to set the line height, look at that it is written highlighted over there line height, okay, so I'm going to insert it to let's say regular, okay, like this.

So um, this logo should be regular.

And in order text in, I'm in a retest this line height, you cannot just simply test with just a single line, you need multiple lines, okay, so I'm going to delete it over here like this, and I'm going to drag this one, just text, you see this text over here, I'm going to drag it to our test case.

So in order to drag it, so what you're going to do is you're gonna control you're going to hit control, okay, and then just pick this text over here like this.

And then I'm going to zoom out, and I'm going to click the old, I'm gonna select the alt text like this old, and you see my mouse is getting a little shadow on its back, like two months together.

Okay, so I'm gonna select the old text and I'm going to move my mouse like this, look at that, it is getting copied, Okay, I'm gonna come over here and don't move.

Okay, just First of all, just release your mouse click like this, okay, and then you're going to release the Alt key like this look.

Now we have successfully copied our text on here, okay? Now look at this.

Now, now we're gonna come over here, and we're gonna see like this, like this, and then we're gonna see this, okay? Look at here, line height is set to 43.

And if we want to change it, then you're gonna click over here, or you can directly you can directly put the number over here like this, let's say I want to say 210 pixels like this, okay? If I click enter, now, look, it has 112 110 pixels of gap over here.

Let's say that I want to set it to 20.

Okay, you can directly input it over here, like this 20 Look at that, it became very congested like this.

Okay, so if you click over here, you see this, I got a small icon, okay, arrow sign icon like this, I'm going to move my mouse like this.

Now, look, I can practice with this real time like this without worrying about, I mean, without directly inputting the value over there.

Okay, look at that I'm just playing out, I'm just playing around with a mouse so that I can find that sweet spot, which would be ideal, which will be the ideal line height.

Okay, so I'm going to change it to 43.

Like that, because it is actually given on the style guide over here.

Wait a minute, over here, look at that the small text, it should be 30 pixels.

And look at this, the line height should be 43 pixels, okay? I'm going to come over here like this.

And look at this, the, the font size is 30 over here, and it is set to Poppins and the line height is 43.

Over here.

Now, do you see this over here, this is called a ledger spacing.

So line height works like this, okay, but the letter spacing, legislating works like this is going to put cap between our little like this, okay, I'm going to show you Okay, I'm going to keep it over here like this.

And watch very carefully.

Oh, by the way, you can also input direct value over here like this, clearly over here like this, then it's going to be 30%.

Or perhaps you can also set this, I mean, you can also use this mouse over here, and you're going to get this little arrow sign, okay? So I'm going to drag like this look at that is going to change according to my mouse movement.

Okay, look at that, like this, it's working like that.

So this is used to set the ledger spacing, I hope you understood it so far.

I'm gonna set it to zero over here like this.

Now look at this one.

This is called the paragraph spacing, okay, in case if you have multiple paragraphs, then this is going to work.

Okay.

So if I drag like this over here, then you can see this behavior, it is working like a line height, but it should not work like a line height.

Because I have actually used some gap over here like this, it may actually show you wait a minute, I'm going to set it to default controls that control set again like that, okay.

So what is happening is I have given some line break over here and there so it is behaving like a parallel, but if I set it to it, or you know, state like this, wait a minute, just give me a second, okay? It is actually the ordinal state.

Look at this long text over here.

Okay.

Now, I'm going to shrink it like this.

Look at this.

Okay, I'm going to shrink it like this.

And it's going to behave like this.

Okay, let me actually zoom in.

There we go.

I hope you can see this.

I hope you can see my screen.

Okay.

I'm going to look at this.

This is behaving just like a single paragraph.

Okay, now look, now look what happens if I use it.

Okay.

Now, look, it is not working.

The paragraph spacing is not working.

This will only work when you have multiple paragraphs.

Okay, let me actually show you okay.

I'm going to copy this one over here like this.

Let's say two lines, okay.

Ctrl C, and then I'm going to paste it over here like this.

Ctrl V, there we go.

So how many parents do we have? We have two parents.

Now look at this paragraph height.

I mean, paragraph spacing, we said 23 pixels.

I'm going to drag my mouse like this.

Look at that.

I can see range that paragraph spacing but look, it's it's it is set to zero but there is some gap over here that is the gap of your line height.

Look at that.

Okay, you can also right over here, but if you remove that whitespace from here, then look, is it gonna work like that? Now look, it is set to zero, exact zoo.

Okay, I'm gonna drag it over here like this.

Now look, it is working perfectly fine.

There we go.

Let's do the next feature.

Okay, I'm going to click over here and look at this.

Do you see this? This is the text align left text align center text align, right.

Okay, let's experiment.

Okay, so I'm going to drag it, I'm going to drag the window like this, okay, over here like this.

Look at that.

Now look, the text is behaving on the left side, okay, text align left.

Now I'm gonna change the center.

Okay, you see this third line over here, look at that it is set to left.

Now he's gonna move to the middle like this, okay, if I click over here, like this text, align center.

Now look, it is changing the alignment, the text alignment is changing to center like this.

And I have also the option of right over here, look at that, right text align, right.

So if we want to, if we want the option of justify, you're going to click this little icon over here, okay, wait a minute, we're gonna click this little icon over here.

And then you're going to find this justify over here, which means that is gonna, appropriately, I may equally distribute the spaces in a way that it fills the whole box over here.

Okay, so let me actually make this para into a line like this.

Now look at that, you see this one, this line over here, and this line over here, look, the text are equally distributed inside the box so that it looks like text align justified.

Alright, so I hope you understood this alignment tools over here.

Now look at this tool over here, okay, or a width, or a height, and then fixed size.

So, so in order to discuss this tools over here, first of all, what you're going to do is you're gonna reduce the size of your font size, okay? So I'm going to set it to let's say, let's say 2020 pixels like this.

Okay, now, let's say I want to drag it like this, okay, I'm going to drag that box like that.

Now, look, this is behaving like a fixed height, which means that our pair over here will occupy What is this 912 pixels of weight into 286 pixels of height.

So it is going to occupy that much amount of space in on our web design or perhaps on our on our frame.

Okay, so I can drag it like this.

Now, look, it is gonna, I mean, those snapping guides.

Okay, you see, this orange Schiller's colored guide over here is going to work according to our box, I mean, the box which carries the text, okay, so this is how the fixed height, I mean, fixed size works, but if you snap it to or a width, which means that it's gonna hug the content inside the box, so that there is no additional spaces, look at this, you see this box over here, along with the blue colored guides, okay, so I'm gonna click over here, which is or a width, now look at that, it is going to work as if it is a single line, first of all, and the next thing is, is not going to keep any additional gaps.

Okay, so let's say that, I want to break the line, okay, I want to break the line over here like this.

So you can also do it, you can also break the line like that, there we go, it's gonna work like that.

And if I, let's say, for any instance, this changes to like this, okay, it's gonna, let's say that it changed to this.

So what you're gonna do is if you want to reduce those white spaces, normally, most of the people, what they do is they're gonna do it like this look.

They're gonna do it like this.

But this will not give you exact measurements.

I mean, it is not the ideal scenario.

So what you're going to use is you're going to use this little icon over here with auto auto Wait, okay, the auto hide, wait a minute, these auto hide works in a similar manner, okay, it just works with the height.

Okay, I'm gonna click over here.

And if I select this, then it's gonna automatically snap those height and remove those whitespace from my text like that.

Okay, now let's look at this tools over here, these three tools over here, okay, this is align top, align, and the middle and align and the bottom.

Okay, let's say that I have this text and I'm going to resize it like this.

Okay, now look, I have a lot of space inside my rectangle.

And where does my text where's my text aligned, it is aligned at the top, very top.

If I want to take it on the middle like this, okay, I can use this one over here like this, look at that, it's gonna come to the middle inside this box.

And let's say that I want to take my text at the very center.

Okay, what I'm going to use is I'm going to use this little icon over here, Li important.

I get like that, look at that.

It has aligned, it has aligned to the model.

So let's change it back like this at the top and then or a week like this.

There we go.

Now let's look at this tools over here.

Okay, you see these three dots.

So we're here, if you select this like this, then you're going to have more tools.

Okay, first of all, you're going to get this alignment tools over here, and then the decorations.

Okay? So if you hover over here, then you're going to get live preview what each every tool does, like this, look at this underline tool is going to underline my text, okay? If I select this like this, you're going to not only see the result over here, live, look at that, look at this little screen, okay, you can also see the result over here, okay, like that.

So I'm going to click it over here as well.

So if I want to remove the declaration, then I'm going to select this over here like this, none, then you can also strike through the text like this, you have a lot of options.

If you want to make two lists, look at this list option over here, okay, if I click this, then it's going to create me a list, okay? unordered list.

And if we want to make it an ordered list, then you can click this over here, an ordered list in 123, so on and so forth.

So if we want paragraph indentation, you're going to utilize this feature.

Okay, wait a minute, this paragraph indentation feature, okay.

So if you say it, let's say 30 pixels like this, okay? Oh, this is actually not working.

That's because we have multiple line breaks.

So I'm gonna make it just a single line, like this.

Wait a minute, just give me a second and then I'm gonna drag this inside my frame.

Okay.

Wait a second like that.

There we go.

And it is just working like a single paragraph and then oral height like this.

I mean, oral width like this.

Okay.

Oh, I did in the wrong way.

My bad.

Sorry.

Okay, now, looks good.

Now, look, I have some paragraph indentation at the very first of the text.

Okay, look at this.

We have 30 because we have 30 pixels of gap over here.

If we want to increase the gap, let's say 100.

Let's go 400.

Okay, 100 like this.

There we go.

We have 100 pesos of gap over here.

Let's look at more options that we have.

Okay, so we have the lowercase over here.

Okay, this is the default, I mean, the way you write it is going to be default.

Okay.

So if we want all the text to be capital sized, okay, you have this uppercase, okay? Now look at this text, okay? lorem ipsum dolor state, okay, it is in small text, lowercase letter, okay, I'm going to change it to uppercase letter.

Okay, I'm going to click over here and then I'm going to click this, okay? It is the preview, it is going to give me a preview over here as well.

Okay, so I'm going to click this over here.

Now look, all the text all later has changed to upper upper case letters, okay, like this, look at that.

You can also change it to lowercase letters, I by clicking this, again, look at that all the texts are I mean, all the letters are lowercase.

By the way, if you want to change the color of your text, what you have to do is you're going to select any text, okay, let's say that I want to see like this text over here, okay, so I'm going to what I'm going to do is I'm going to Ctrl and then click over here like this, okay? Or what you can do is you can double click over here like this, and it is going to get selected, okay, okay.

And then what you're going to do is you're gonna scroll down over here, and you see this fill option over here, you can change the color over here by inputting your hex value over here, or what you can do is you can just select this option over here, okay, you can get this eyedropper over here, which means that you can pick any color you want, like this look, I'm going to select this over here like this.

Let's say that I want to change it to this color over here.

Okay, so I'm going to select this ello the text gets colored according to this color over here.

Similarly, what you can do is you can drag this little small dot over here and you can play any way you want and the color changes accordingly.

Okay, I'm gonna move this ball over here, and you're gonna see the changes over here.

Okay, look at this, I'm going to change the black letter sound, I want to, I want to change it to black, let's say like this, okay, and let's say I want to change it to white.

Okay, I'm gonna go over here like this.

By the way, you can also move this over here to change the color.

Okay, let's say I want to go to red.

Okay, I'm going to come to red over here, and this palette over here turns to red, okay, and I can move it over here as well like this.

Okay? If you want to change the opacity, then you can change it over here like this look, I'm gonna look I'm gonna drag this slider over here and look at this effect over here.

Okay, it's gonna get changed.

Okay, look at this.

I'm going to drag it and look, the opacity changes, okay, if I turn it to zero, it's gonna be invisible.

Okay, effort.

If we go to absolute zero, like this, then is going to get invisible.

Okay, so ladies and gentlemen, we're done discussing the text tool along with all its properties.

As a beginner, you don't have to understand prototypes.

So this is a feature that I'm discussing right now, the paradigm over here, this one okay, but for the sake of this tutorial, and to make you understand how and where the product feature is used, I have created a small section over here on this page, okay, so you can see this for right sample, you're gonna come over here okay.

Now you can see two designs over here, okay, this is the mobile design.

Now, let me tell you where product is used.

prototype is used to make interactive web designs.

So I have kept an example over here on this section.

Okay.

Perfect.

sample.

So now what I'm going to do is I'm going to click over here, okay? For right like this.

Now look, I already created some frames over here, but I'm going to delete it.

Okay? So I'm going to click it over here like this.

And I'm going to delete, and then I'm going to click over here and then delete.

Okay, so I'm starting, I'm starting from scratch in order to make, sorry.

So I'm starting from scratch, in order to make you understand how the system works.

I mean, the product how prototype works.

So first of all, let's understand this model over here.

Okay, so this is our nav bar over here.

And this is the hamburger menu icon over here.

Okay, so the moment we click this menu icon over here, okay, is gonna get converted to this cross sign over here, and then this content over here will get vanished.

And then it's going to show us our menu items over here, like home teacher, so on and so forth, etc.

In order to create a portrait, right, what you're going to do is you're going to click over here, okay, this section for right like that, and you're going to get this instructions over here.

Okay, so the first thing that we're going to do is, I'm going to select this, okay, by double clicking over here, like that, look at that, I have selected this hamburger menu icon.

Okay, so look at this, do you see this plus sign over here? It means that the moment we click on here, or the moment we tap on here, where do we where will this lead us to? Okay? It's going to lead us to this frame over here.

I mean, this design over here, okay, so I'm gonna click and drag this one like this, look at this arrow on my hand.

Okay, I'm going to drag it like this over here.

There we go.

So this is getting linked to this one over here.

All right, and then it's going to give me this option over here.

So look at this interaction details that popped up.

Okay, so it's telling me it's asking me how this interaction should take place.

Okay, should it be on click or on drag, all while hovering while pressing, then we have mouse and we have a lot of options over here to pick from what what For this tutorial, I'm going to keep it very simple, okay? On click, which means that the moment we click this one over here, then it is going to choose this frame over here, okay.

And then we also need to click over here, so that we can go back to this main content over here.

So how do we do this, we're going to do the same thing.

Okay, we're going to double click over here on this cross site.

And then you see this little plus over here, let me zoom in, you see this little plus over here, we're going to select that and drag it back to this main frame over here like this.

Okay, that, there we go.

And there is also going to show me this interaction designs, I'm interaction details.

Okay, so what I'm going to do is, I'm going to keep it as it is, and then look at this animation over here.

So I'm going to click over here.

So instead of instead, I'm going to select dissolve over here like that.

So you have a bunch of, I mean, a lot of options to choose from, but I'm going to keep it very simple, just dissolve, okay, like that.

And I'm going to select this one as well.

And I'm gonna set the animation to dissolve as well like that, look at that.

Now look, in order to test this prototype, what you have to do is you're going to click this play button over here, do you see this play button over here.

And when I click it like this, now let's experiment, it's going to create a new window over here, okay? And there we go.

Look at this, our design is over here.

I mean, this is our prototype over here, okay? Now, look at this, look at my mouse over here, wherever, wherever I go, it is just a mouse, okay, but wherever, what whenever I come over here, look at this is gonna turn into a pointer, which means that this is clickable.

If I click over here, then it's going to give me some animations or interactions.

Okay, now look, I'm gonna test it over here like this.

Okay, I'm gonna click like this, look at that.

Look at that, we have our navigation menu items over here.

And we also have this cost center over here.

Okay, I'm going to click over here again, like that, we're gonna, it went back to our frame, main frame over here.

Let's experiment again.

Okay, click like this.

There we go.

And then in order to go back to that, you see this animation, this dissolve animation, look at that.

It is just fading in fading out.

I really hope that you understood the product feature.

If you want to experiment with the product, you're going to come to this section over here the prototype sample and follow the instructions that I have given you.

Now we're going to discuss that with a feature called auto layout.

Today, I'm going to show you two use cases how to use the auto layout.

First of all, I'm going to show you how to align your content, this content over here, this text this text this button at the same time, I'm going to show you how to make this button over here using the auto layout.

So now you're going to come over here like this, and we're going to create a new frame over here, okay, so you hit F like this on your keyboard, okay, and then you're going to drag it like this.

Look at that.

We have created ourselves a new frame.

Okay, let me actually resize it a little bit.

Like this.

Look at that.

Okay, it looks quite good.

And then now I'm going to create a text Okay, so d and then I'm going to place it over here like this, okay, I'm going to write something like this.

And then I'm gonna set the size to let's say 60 pixels.

Okay, wait a minute.

It's gonna work like now 16.

There we go.

And now I'm going to duplicate this.

Okay, let's say that I want to duplicate this to James, okay, I'm going to select the keyboard named alt, okay? And then I'm going to drag it like this, look at that, okay, it's gonna get copied, okay? Alt, and then use your mouse like this, look at that out, and then mouse is gonna duplicate me the same thing.

Okay, control Zed.

Now, where is the oral layout used? Let's say that this text are over here like this, look at that, okay, in this array, let's say that I want to align them to the very left, or exact measurements, how what I mean, look at this over here, you see this text, one, two, and then this button over here, you see, all of these elements are aligned to this box, this blue colored box over here on the very left on exact accurate measurements.

So if we want to copy this layout over here like this, then what we generally have to do is we have to individually select this element, okay? And then we have to take the help of this guy's over here, do you see this orange color guide that is showing me the number of gaps 57 pixels, okay? If I come over here, like this, look at this, the orange color guide is getting highlighted.

Okay, let me show you again.

Okay, look at this, okay, now look, this is on accurate, left, Align Left, okay.

And then if I drag it over here, like this, now look, it's gonna get aligned to the left, according to this size over here, okay.

And then let's say that I want to decrease the size over here, okay, I'm going to select this like this, okay, I'm going to do it like this, and it got decreased reduced in size.

And let's say that I want to decrease it even further.

Okay, I'm going to remove these letters from here like this.

Okay, now, let's say that I want to change the gap in between this content, okay, it's gonna be a hassle, okay, you have to just individually take your mouse, and then you have to place it like this.

And if you want to calculate the space, what you have to do is you're gonna click any element, let's say that I want to click this element, okay, this element, and then I'm gonna select my Alt key on my keyboard like this.

And then wherever I place, my mouse is going to show me that calculation.

Like look at this, the distance between these two elements, okay, is 51 pixels, look at this orange color guide, it is highlighting 51 pixels.

Similarly, let's say that I want to select this and calculate the gap between these two content, okay, I'm going to select out, and then I'm going to put a mouse on this content, look at this 39 pixels.

This is how it works.

But it's gonna be a long hassle if you do it manually.

So in this case, what you can use is the auto layout.

Okay, let me actually show you okay.

I'm going to click all of them together, and then I'm going to right click like this and look at this option or add auto layout.

Okay, I can do it over here like this, or do you see this option? shortcut keys shift a, you can also press the shift n is going to work, okay? Like this, look at that.

Okay, now look, if I.

So if you notice on the right side, you see this new section over here, this is called oral now, okay, if you want to remove the oral layout, then you're going to select this minus over here, okay? And then it's going to remove it and convert it back to a frame.

How do you know when it gets converted to a frame? Okay, you're gonna actually you're gonna show you're gonna see on the right side, okay, look at this, okay, this hashtag, this hashtag means the frame.

Now, if you go back by selecting control Zed like this, look at this over here, wait a minute, look at this, we have two rows like this, I mean, two lines like this, this represents the auto layout.

Okay, now let's look at the options that we have.

Okay, so I'm going to select this like this, and it's going to highlight me that auto layout, okay, look at this, I have 45 pixels of gap in between each of this content, okay? So if I drag my mouse like this limit, the amount of gap in between this content changes, okay, like this, look at that, again, lowest is zero, and upper limit is anything you wish, okay, like this, let's say I want to set it to 25 pixels like this, look at that.

And this one, look at this one, this is used to add padding around your continuity, let me show you Okay, I'm going to select this and drag it like this, we're gonna look at this padding is getting added all around my content like this, look at that, if we want to change again, like this, look, padding is getting applied like that.

Now let's talk about this feature over here.

padding and alignment.

Okay.

So if I, let's say that I want to increase my size of my content, okay, like this, look at this.

I'm gonna drag my blue colored box like this and it is gonna increase in size.

Let's say that I want to place a condom at the very center.

How do I do this, in order to do it quickly, easily efficiently, we're going to use this tool alignment and panning, okay, and when I select like this, and look at this, I have so many options.

I can select it any I can place it anywhere I want.

So our criteria is where to set it at the very center.

How do we do it? We're gonna click this over here, you see this over here, option.

Look at that.

It got centered on our box over here.

Okay, so let's say that I want to see like this, I want to place it on this corner over here on this corner over here, we can do it.

So you're gonna see like this, like this, look at that.

It's gonna get Move to this section over here.

And do you see this over here? This is the padding.

This is used to add padding.

So remember this one, okay, let me actually change it to a default.

Like that.

There we go.

So if you remember, this is going to add padding to all four sides.

But you don't want this behavior, you just want to add padding to let's say that left and right, okay, in order to do it manually, you're going to click this over here and using this option over here, you can manually add padding over here.

Let's say that I want to add 50 pixels of padding to the left side.

There we go, boom, it's going to add padding to just to the left side.

Okay, now let's say that now let's say that I want to add padding to the top, okay? Top How much are let's say the 25 pixels, okay, so I'm gonna come over here and write 25, like this, and hit enter.

Now look, I have 25 pixels of padding and the top 50 pixels of padding on the left, if you want to individually set the padding, this tool is very helpful.

Alright, then now let's experiment how to make a button using the auto layout.

Okay, so I'm going to delete this from here, okay, I'm going to make a button like this, look at that, you see this button over here, I'm going to make it I mean, I'm going to duplicate it.

Okay, so I'm going to come over here, and the very first thing that I can do is I'm gonna write text over here like this, okay, I'm gonna write after selecting T.

And let me show you the steps, okay, you're going to hit t on your keyboard, or you're going to select this over here, okay? So t like this, and then and click over here on your screen, I mean, on your frame, again, you're going to right button, bu TT o and like this button, okay? So, I'm going to convert this button text to full capital letters.

Okay, so I'm going to come over here like this, and I'm gonna select this option over here.

Okay, look at that.

Now, what I'm going to do is I'm going to directly add, I'm going to directly add or layout, look at this, okay, I'm going to right click over here and add order lab, or what you can do is you can, you can click shift plus a like this look, shift and a, now look, oral layout is added to our button.

Okay, in order to see that, what you have to do is we're going to click this over here, and then you see this field over here.

I'm going to click this over here like this, and I'm going to change the fill color to black, okay, 0000, like this, and look at that, it got converted to very dark black.

Okay, now, I'm going to come over here, and then I'm going to select Ctrl on my keyboard, and then right click, I'm in left, click over here, and then I'm going to select the text, okay, the text is selected, or what you can do is you can come over here on this frame, okay, this frame gets highlighted in blue, and then look at this frame, I mean, this oral layout frame, okay, and inside this frame, we have the bottom, okay, you're going to click this over here, or you can directly control and then left click over here, then is going to select the text, okay, and then you see this color over here, I'm going to change it to white, okay, f f, f f, six times f, like this look, is gonna bring back my buttons.

Okay, now let's say that I want to add some padding to the left and to the right side of one button.

So how do I do this.

And before doing that, what you have to normally do is we have to select this over here, and then you have to select this, which means that you want the text to be at the very center of your bottom.

Otherwise, what happens is, if you want to resize your button, let's say that I want to resize Mazzuca that the text is aligned to the very left it is not moving, okay, if I resize it like this, look, it is not moving anywhere.

Okay, controls that control that.

Now, if I set it to the very center like this, if I resize my model anywhere, anyhow, wherever I wish, like that, look at it, this text will stay at the very center, we're here like that, look at that, I can move it anywhere I want, okay, controls that.

Now, let's say that I want to individually add some padding, okay, I'm going to select over here.

And then let's say I want to select padding of 30 pixels on the left in the right, okay, 30 over here, gap, I mean, enter 30 over here, hit enter like that, look at that, we have 10 pixels of padding, your top bottom, and 30 pixels of padding on the left and right.

Also, I'm going to show you how you're going to utilize these two buttons over here to make responsive layout for your desktop, tablet, mobile Web Designs more quickly and efficiently.

So keep watching, I hope you understood how to align your content and make buttons using the auto layout feature.

Now I'm going to show you this feature that is left to discuss this feature over here.

Okay, so this is the vertical direction and this is the horizontal direction.

Okay, I'm going to remove this real quick.

And look at this over here.

Do you see this layout over here? Do you see these cards over here? How is this stacked? This is stacked on a horizontal line.

And if you see the mobile version, the mobile design Look at this.

It is stacked vertically like this.

So how do we do this very quickly, easily and efficiently.

Okay, so I'm going to come to this Dexter version over here and then I'm going to copy this one to the right side.

Okay.

Or perhaps let's say I want to copy this over here.

Okay.

Like that.

I'm going to extend this like this, okay? And then I'm going to click one time over here, okay? And then out, press the out button on your keyboard, okay? like this and then drag it over here like this, look at that.

Okay? So, auto layout is also enabled on this one.

Okay? If you see the right panel over here, you see this orange, you see this auto layout is enabled, okay? Do you see this horizontal direction it is enabled, which means that our cards will act like this, okay, it's going to act on the horizontal line is gonna layout on the horizontal line, what you're saying that we want it to be on the vertical line, which means that we want to make it for the mobile version.

Okay, what we're gonna do is, we're going to click it over here like this.

Okay, boom, we made the layout of workouts for the mobile version, look at that, how quickly I made it.

So the mobile has small screen.

Okay, so I have to resize it like this.

Let's say that, I'm going to come over here, and then I'm going to hit the K.

Or what you can do is you can come over here and then select the scale version over here.

Okay, I'm going to hit K over here, like this, and then click this.

And then I'm going to resize it like this, look at that.

It got resized, if you want to resize even further, according to your screen, which is normally small, like this, look at that.

You can, you can adjust the width and height accordingly to your needs, okay, like this, using the scale isn't isn't the scale to now look at this side by side comparison how easy and quickly I made layout from a mobile version from the desktop version.

This is the desktop version over here.

And this is the mobile version over here, by the way to see the content inside this card, this chemistry, this button over here, this image over here, all of them are using the auto layout.

And I have used auto layout to align the content at the very center.

If I see if I select one card like this, look at that.

Okay, I have selected this card over here.

So look at this content over here, okay, if I come to this auto layout, look, all the content has 19 pixels of padding, I mean gaps in between.

And then if I select this one over here, then you can see that the content is aligned to the very center like this, look at that, I really hope that you understood the auto layout feature.

The next feature that I want to talk about is the layout grid.

So you can select any frame you want across all these pages, either the desktop, tablet, mobile or anything, we are going to find this frames, Okay, I'm gonna send the first one as an example.

Okay.

And then you're going to find this over here, the layout grid.

So when is this used, if you want to plan your content, I mean, if you want to make a web design responsive for the next top, tablet, mobile, etc, you need to plan your content, right? So using this, you can plan your content.

Let me show you a demo.

Okay, so I'm gonna use the i button over here, I'm gonna click this, this is used to hide that layout, okay, like this, look at that, okay, and this minus sign is used to delete that layout.

And this plus sign is used to add the layer, I mean, the layout grid, okay.

So look at this, what is written over here, five columns are okay, so if you count over here, 12345, we have five, I mean, five grid columns, okay.

So if you click over here, like this, now, what is this, this didn't count, okay, you can increase the number of columns over here, you can also select the color and then you can set the opacity over here like this as well.

So I'm going to click over here like this.

And then look at this, we have this option on the columns, we can also change it to grids like this, and you can see these little dots over here like a graph paper, okay? You see this? thin lines like this, okay? This pattern, okay? And so this is the grid.

Alright, so if you want to change it to, let's say, columns, or sorry, rows, you can also do it like this.

Look at that.

It changed from columns to rows like this.

Now let's change it back to columns, okay, like this.

I'm going to click over here and then columns like this.

Now look, how many columns do we have? 12345, right.

So look at this over here, we have five columns over here, and over this margin over here, 50 pixels of margin.

So if I zoom in over here, so look at this over here, you see this first column over here, the gap between the first column and the start of our screen over here is 50 pixels.

This is the gap.

I mean, this is the margin over here.

And regarding the gutter, we see we have 30 pixels of gutter over here, okay? Now look at this, this is the gutter, okay? I mean, the space between the columns, okay, this is 30 pixels.

Now, the best example that I can give you at the moment is this one, wait a minute, this layout over here you see this one over here offered courses.

This has three cards, how many cards, three cards, which means that we can stack them on three columns.

Okay, let me show you a mess like this.

And look at this over here.

Okay, I'm gonna and now I'm going to click this button over here to show you how the layout grid is working.

Okay, so look In this, how many layers? I mean, how many columns do we have? We have three columns and three cards.

Okay, so how many how much gap? Did I put between the? I mean, how much margin did I put? Okay, so I can see it over here like this, okay? Look at this, we have three columns.

So it's gonna be highlighted three over here, and the color is this one red.

And this is used to change the transparency.

Okay? So if I increase the size like this, look at that, it gets much red.

Okay, I'm going to change it to 10% so that it is visible.

I mean, both the layout grid and content becomes visible, okay.

10% is a sweet spot.

And we have margin of 77 pixels.

Okay.

On the left and the right, and gutter, we have turned to pixels.

A couple of seconds ago, I told you that this layout grid is used to plan your content when you're making responsive websites, I mean, Web Designs.

Okay, let me show you a demo.

Okay.

This is the best example that I can give you right now.

So I'm going to click this over here.

And look at this over here, how many columns do we have? We have three columns over here with 77 pixels of margin on the left and the right and then we have 32 pixels of gutter, okay? So this is, you see this gap over here.

Okay, white colored space between the red and our start off screen over here.

This is 77 pixels of margin, okay.

And this gutter over here, you see this white color over here? This is 32 pixels.

This is the gutter.

Okay? So this is the desktop layout.

Okay, how many columns do we have? We have three columns and three columns are stacking three cards.

In case of the mobile layout, look at this, okay, I'm going to click over here, this mobile on the page section and look at this, how many columns Do we have, we have just one single column and this single column is stacking how many cards, three cards because we have less space, less space on the mobile version? Okay, so I'm going to click on this and then I'm going to inspect that layout grid.

Okay.

So I'm going to click over here.

Now look, how many columns do we have? We have just one single column.

And how many margin Do we have 20 pixels of margin.

Now for zooming, look at this, this space over here is 20 pixels of margin.

Okay, and this is the mobile layout.

If we want to add layout grid on your frame, what you have to do is you're going to select F, okay, on your keyboard like this, and then you're gonna drag it like this, look at this, we have a frame, okay, if you want to add that layout grid, you're going to select this like this and look at this over here, you see this layout grid over here, you're going to click this over here like this, the plus sign, okay, then it's going to add this pattern over here.

If you want to change it, then you're going to click this over here.

And then you're going to change it to columns or rows over here, according to your needs.

Okay.

I hope you understood how to use the layout grid.

Alright, now I'm going to discuss about the constraints properly.

Okay, in order to discuss about the constraints provided, you're going to come to this section, I mean, this page over here, responsive test.

Okay, so you have noticed this before, okay, if you click any element like this, then you're going to find this constraints property over here.

I'm going to discuss about this one.

Okay.

This is used to test whether your design is responsive or not.

So I use the constraints provided along with the plugin named breakpoints.

Okay, this is a plug in over here, I have actually included this section for you to test.

So you're going to come over here.

Okay.

So do you see this guy's over here? I'm going to zoom in a little bit.

Okay.

I'm gonna come over here you see this.

These are our breakpoints for one four pixel is the breakpoint for the mobile version.

Okay.

767 168 pixels is the breakpoint for the tablet version.

This is the breakpoint for the laptop version.

And this one is the Dexter version.

Okay, now look, what happens if I resize it? So I'm going to click this over here.

Okay.

look very carefully.

Look at this, the constraint property is working.

When I resize the window like this, look at this, our content is at the very center, we're here.

Don't worry, we're going to recreate the results.

Okay, just look what happens.

So when it comes to the tablet breakpoint, now look what happens.

Now, if I now if I cross the tablet break? Well, now what happens? Here is the tablet breakpoint.

So I'm going to cause the tablet breakpoint.

Okay, like this, look at that.

Look, our design changed because the plugin named breakpoints, and if I resize it like this, now look what happens.

We have some gaps over here, okay, and the content is actually at the very center over here.

So if I resize it even further, now look what happens.

The font size changes and the content increases in size.

Like that.

Look at that.

Let me actually resize it again.

Okay, now look what happens when that small large is the laptop.

This is the tablet version.

This is the laptop version, tablet version, mobile version over here, mobile tablet, laptop, the constraint properties used over here.

Okay, I'm going to delete this over here real quick.

Okay, so I'm gonna come over here.

Okay.

Wait a minute.

Now look at this.

This is the design for the laptop version.

This is the tablet version over here and this one is the most Version over here.

Okay, so I'm gonna just focus on the mobile version over here like this, wait a minute, there we go.

Okay, so I'm gonna bring my options over here.

And then what I'm going to do is I'm going to select all my elements together, okay? Like this.

And then I'm gonna group it together like this Ctrl G.

Now, if we select this one over here, and if you notice over here, now you see this, this blue color is highlighted, and this one over here as well.

This is the top and this one is the left, okay, which means that if you resize the window like this, wait a minute, like this, then what will happen is your content will be focused, your content will be locked on the left top, like this, look at that.

But let's say that you want it to be on the bottom.

Right.

So how will you do this? control that Okay, I'm going to select this I mean, the entire content section and I'm gonna select this one.

Okay, bottom, right.

Now look, what happens if I resize the window.

Okay, now, look, what happened is gonna stay focused.

I mean, he's gonna stay fixed on the bottom, right? Okay.

Okay, now I'm going to select this one.

And I'm gonna drag it down like this, look at that.

Our content is getting fixed on the bottom right.

Now, let's say that I want it to be on the bottom left, what will I do, I'm going to do the same thing, okay, I'm going to come to that constraints property.

Wait a minute, there's one, okay, then then I'm going to select a bottom left, okay, I'm going to just click this over here, or what I can do, I can just click this overhead and select the left option like this.

Okay, and now look what happens, we resize the window, I'm gonna drag this over here.

Now look, it's gonna stay focused on the bottom left.

Like that.

So in the case of testing my responsiveness of my Web Designs, what I do is I'm gonna select all my content, and then I'm gonna center both horizontally and vertically like this.

Okay, now look, what happens if I resize the window like this, look at that.

Okay, it stays at the exact center like this.

Okay, I do it for all my contents, wait a minute, let me actually resize it.

And I'm going to select all this content over here like this Ctrl G.

I have grouped them together, I'm going to select this and I'm gonna enable this option.

Okay, center center.

Same thing for the version as well like this, okay, Ctrl, G, and then center center like this.

Now, there is a plugin named breakpoints, okay, I'm going to right click over here and then select this plug in, okay, you didn't have to do anything, just look what I do.

Okay.

And if you want to test it out, I'm going to include this section over here, you're gonna come to this section, and then test it on your own how the system works, okay, so I'm going to select this plugins option over here, and then I want to, and then I'm going to select this breakpoints, like this.

And there is going to give me this little window over here.

Okay, I'm going to select new adaptive layout like this.

And then I'm going to define a breakpoint over here, and I'm going to keep it over here as well.

And let me actually, alright, then, I'm going to select this one.

And then I'm going to right over here for one, four, which is the mobile display breakpoint, okay, and then I'm going to right over here 768, which is the tablet screen, and then I'm going to click this plus sign over here, okay, and then I'm going to right over here, 1024 pixels, laughter version, and then plus over here, again, we're here 1440 pixels, 1440 pixels, which is the Dexter version, okay, now look at this plus sign over here, I'm gonna click this and I'm gonna select this mobile layout, like this plus sign over here, I'm going to select this tablet version.

Okay, I'm going to select this over here, and I'm gonna select this laptop as well.

Okay.

Now, this is the result we got so far.

Okay, now, this content is at the very center.

If I resize it, wait a minute, let's actually select this and then guess what happens? Look what happens.

Okay? Oh, I actually need to increase the width over here as well like this looking at I mean height, I need to increase the height like this.

Now look what happens if I resize the window like this, we're gonna see the mobile version.

Okay, this is the tablet version.

And this one is the laptop version.

The constraints tool.

And the break point to both of them are very handy if you want to test out your responsiveness of a web design.

So I'm going to keep it as it is so that you can come and practice over here, okay.

Alright, now I'm going to talk about a tool called components.

Okay? So look at this over here, this footer over here.

This is actually a component.

Okay, we are gonna, you and me together, we're going to change this social media icons with this one over here.

I'm going to come to this assets over here and look at this social media icons over here.

Okay, we're going to replace this.

So we're going to replace this one with these ones over here.

Okay, but before that, let's actually test what does our components do? Okay, so I'm going to come to the left side over here, and I'm going to draw a frame F and then like this, look at that.

Let's say that I'm going to write some dummy text over here Okay, like this.

A B, C, D, okay? Ctrl A and I'm going to change the size to let's say 100 pixels, okay? Like this, look at that.

Okay, I'm going to change the font weight to regular.

Okay? Now look what happens if I copy this to, let's say three times, okay? This is the second time, this is the third time over here.

Okay, I'm going to zoom in a little bit like this.

Now look what happens, let's say that one of many benefits of the components function is that it helps you to stop repeating the same design again, and again, they the day, the day and night difference between copying and pasting the same thing and using the components, okay, let's say that I have copied and paste it three times over here, okay, 123.

Let's say that I want to remove the C, okay, I don't need the C.

Okay, so what so what I have to do is, I'm going to select this over here, and I'm going to remove the C over here like this, okay? Same thing, I have to repeat how many times three times one time, two time over here like this, okay, and three time over here like this, look at that.

But if I use a component that, wait a minute, let me actually remove this from here.

And I'm going to write ABCD over here, okay? If I right, oh, sorry.

Now, if I'm making a component, how to make a component, okay, I'm going to click this button over here, create component, or what I can do is I can right click over here and create component like this.

Now, this is a component over here, you can see you can tell it vice, you can tell it by looking at this icon over here.

Or you can also you can also tell it by looking at this highlight over here, a component is highlighted in purple color, okay? Now look what happens if I copy from this component, okay? All and then click over here and then drag like this, okay? Now, look at this, over here, look at my layers over here.

This is a diamond shape, which means that this is an instance of the parent component, this is the parent, this is an instance.

Okay, I'm gonna do it the same like this.

Again, they say I want to do it more three times, okay, like this look at.

And let's say that I have to change it, I have to remove the C, what will I do, I have to remove it six times, I have to do the same thing six times.

But if I use a component like this one, now look what happens if I remove the C from the parent component like this, look at that, I removed the C, the C is removing all my six designs over here, look at that, by just changing this one over here, and nothing else.

Everything is changed.

This is the main selling point of the components.

Okay, so I'm going to delete this from here.

And look at this design over here.

I will look at my footer over here.

This social media icon is it is blue in color, it doesn't go with our team.

If I come to our color palette over here, look at this.

This is my color palette over here.

Okay, you can check the hex value over here as well look at this hex value and this hex value as well.

All right, no, this doesn't go with our color over here.

This is blue color, light blue color.

So I'm going to change this to black and white.

Okay, this one over here, this, if we come to this assets over here, there's one Okay, now what I'm going to do is I'm going to click this frame over here and then hit Alt on my keyboard like this, and then I'm going to drag it like this.

Okay, it's going to get copied, and then I'm going to right click, and then I'm going to select this option over here, move page to Dexter.

Okay, I'm going to come to text over here, wait a minute, there we go, we have our design over here, you actually need to, you actually need to zoom out a little bit so that you can see where the frame is.

Okay, like this, I got my frame over here.

All right now.

Now I'm gonna select this one, this.

Now I'm going to select this tutor option over here by double clicking over here, and then double clicking again, like this.

Now I can see the exact width and height of my tutor over here.

I went to the icon over here, this for 8.81 pixel.

So I'm going to copy this from here like this Ctrl C.

And then what I'm going to do is I'm going to resize all of my media icons, okay, like this, I'm gonna select this over here, and then I'm going to hit cake on my keyboard, okay, like this, I can resize it like this, look at that.

Now what I'm gonna do is I'm gonna lock it over here, like this is the constraints property.

And then Ctrl V, if I paste it over here, then it then this value will automatically get applied on my height over here as well.

Okay, so I'm gonna select enter like this.

Now look at that.

It gave me accurate calculations.

So I'm going to drag it over here, wait a minute, over here like this.

By the way, this folder over here is the main parent component, okay? Which means that if we change anything over here, then all the children that all the children components, I mean, all the instances will get changed as well look at this, I placed the social media icon, the Facebook, black and white over here on the parent component, and it got applied over here on the children component.

Same thing goes for all the children components as well look at that.

We have this Facebook icon over here.

Now I'm going to delete this one over here.

Okay, the blue colored one.

So what I'm going to do is I'm going to come over here, and then I'm going to double click over here.

And then I'm going to delete like this.

So it got removed.

And same thing got removed from all the parent and children components as well look at that, we'll have the social media icons over here.

Same thing for all the footer instances.

Okay, so I'm going to come back over here, and I'm going to resize them also in a similar manner, I'm going to hit K and then resize it like this, look at that.

And then I'm going to hit this constraints property.

And then I'm going to paste the value that I have copied, okay, Ctrl V, enter, look at that.

So I'm going to select it together, and I'm going to drag it on here, like this.

Okay, now, what I'm going to do is I'm going to arrange a series like this.

And then I'm going to hit Shift plus a, after dragging, after selecting all this, okay, like this, shift a, and then I can adjust the gap over here like this, let's say I want a gap of 10 pixels, okay? I change the mind, I'm gonna select it, like this, there we go.

I can also change the stroke as well.

Okay, if I select Ctrl on my keyboard, and if I select this stroke over here, like this, then it's gonna select me this, look at this, I'm going to change the to.

Okay, and I'm going to do the same thing over here, hit Ctrl on your keyboard, and then hit Ctrl on your keyboard and select this circle over here.

And then change the to from 3.5 to like this, look at that, it looks beautiful.

Double click over here and then follow the orange colored guides, okay? Look, our content is look, our social media icons are aligned the left according to those texts over there.

Okay, now if I inspect all of my, let me actually delete this from here.

Nine now if I inspect all of my children instances, look at this, the same thing got applied over here, because that is because we change the parent component.

All children's, all children instances are bound to change.

Look at that, I really hope that you understood how to use this useful tool named components.

Congratulations, guys, we're done discussing all the essential tools of figma.

Now we're going to start making our web design for the desktop version.

Let's get started.

But the first question is, how will we practice? Alright, then we're going to practice like this over here, we're going to draw our frames, okay, like this.

And then we're going to copy this design on our practice case over here.

As a beginner, this is completely fine to copy others works and designs because this is part of the learning process.

So I'm going to delete this one here like this.

And then what I'm going to do is I'm gonna move this to the right side, okay, and then I'm going to draw a frame over here, like this, follow along with me, I'm gonna hold my shift, and then I'm gonna select the names like this, okay, I will name the frame like this.

Alright, and then I'm going to select the fingers.

And then I'm going to drag it over here like this.

There we go.

Now what I'm going to do some zoom in over here, okay, whatever.

This is my color palette over here.

I'm going to keep it over here.

There we go.

And then I'm going to make a frame over here.

Okay, so I'm gonna select my F, which is frame to locate F.

And then I'm gonna select this over here, okay, dekstop.

And then this one dekstop, which has a dimension of 440 pixels in width, like this, look at that.

Okay, I'm going to keep it over here like this, the first thing that I'm going to do is I'm going to make grid layouts.

Okay? So what I'm going to do is I'm going to select this element over here, okay? And then I'm gonna select this little icon over here, okay, so that I can see the grids over here.

And then I'm going to select this so that I can better see what is the margin and what is the gutter over here, okay, you can see figure, we can see 50 pixels of margin over here.

But let's say that in certain scenarios, you cannot actually see how much is the margin over here.

So what will you do in this case, in this case, what you can do is, let me actually show you a trick over here.

So I'm going to come over here, okay, you see my text over here.

And this gap over here, I'm going to draw a rectangle over here, let me actually show you Okay, I'm going to hit R.

And then I'm going to draw a little rectangle over here, and I'm gonna keep it over here like this, and it's gonna snap inside this, let me actually zoom in a little bit, so that you can better see how this is working.

All right, so look at this rectangle over here, and then I'm gonna stretch it to this till this side over here, okay, like this, wait a minute, like this, look at that this rectangle is filling that gap over here.

Now if I select this over here, and if I inspect this rectangle, you can see that this rectangle is 50 pixels in width, which means that here is 50 pixels of gap.

So now what I'm going to do is I'm going to remove this rectangle from here.

Alright, then I'm going to come to my main design over here, I'm in the practice case, and then I'm gonna give this one over here, auto layout grid, okay, like this.

And then I'm going to change it to columns like this, okay? And then I'm going to give here how many pixels of margin 50 because we found out to the rectangle that it is 50 pixels of margin, okay, like that.

And let's actually see what we have specified in the grid like this.

Okay.

And 30 pixels of gutter, Okay, there we go like that 30 pixels over here, if you hold shift and up, if you hold shift and then press the up arrow bottom, then it's gonna change 10 scale at a time like this look, it is 20 3040 5060 7080 while I'm holding the shift, but if you release the shift, and if you use the arrow sign, I mean up arrow sign, then what do we have? This is gonna change one pixel, one pixel like that is 80 pixels, okay? 8180 280-384-8586 is gonna take a lot of time, so I'm going to use the shift, okay, I'm going to jump to 36.

And then I'm going to write 30.

We're here like this.

There we go.

Looks quite perfect.

Now, now we're gonna make this navbar over here.

Okay, in order to inspect this element, what I'm going to do is I'm going to select Ctrl on my keyboard, okay? And then I'm gonna click over here like this.

Now, you can see all the properties over here, do you see this? The color, the font family, the font, weight, font size, etc.

Okay, so look at this, it is 90 pixels.

So I'm going to copy this over here like this Ctrl C, I'm going to come over here and then and then hit t on your keyboard like this T, and then click over here, okay, and write a do or sorry, they do.io.

And the font family is four pins, which is correct over here, change it to semi bold over here, like this, and then select 90 over here like this.

90, okay.

Okay, I'm going to keep it over here like this.

Okay, do you see this orange colored guides is going to snap like this, okay, so you don't have to do anything manually.

Next thing that we have is home teachers contact assigning options.

By the way, you have this dekstop typographic guide over here, which you can follow.

Okay, so this logo is 90 pixels over here, the nav items, each of these nav items are 47 pixels in size.

Okay, so I'm going to come over here, I'm going to hit t on my keyboard like this T, click, and I'm going to right put them over here, okay, same thing, I'm going to copy it four times, like this 123, and then four.

Okay, I'm going to write over here, teachers.

And I'm gonna write over here, contact us.

And over here, signing, we also need to change the form way, we also need to change the font weight, in order to inspect the font weight, I'm gonna come over here on the original design.

And then I'm gonna click Ctrl.

on my keyboard, click like this, look at this, we have regular and 47 pixels, also the font size, we have regular font weight, 47 pixels, font size, and look at this, the font families revolt, okay, so I'm going to come over here, like this, and I'm going to select all of them together, how will I do this, look at that, I'm gonna drag all of them together like this, select all of them together like this.

And I'm going to right over here, 47, okay, Enter.

And then I'm going to write regular over here like this, look at that.

And then I'm going to right over here Roboto, because the font is rowboat over there on the original design room for two, there we go.

Now the next thing that I'm going to do is I'm going to select all of them together like this, and then shift a or what I can do is I'm going to right, I'm going to right click over here and then add auto layout.

Or you can also do it by using the shortcut shift plus a, I'm going to do it over here like this.

Alright.

Now I'm going to click this over here, because it should be on the horizontal line like this, look at that, there we go.

And then I'm going to click this over here.

And I'm going to select this so that it always I mean, all the text should remain at the center.

We're here, both horizontally and vertically inside this frame, like this, look at that.

And now the next thing that I'm going to do is I'm going to snap it to this side over here of my great lines, okay, like that, look at that.

There we go.

It snaps like this.

All right now.

Now if we look at the original design over here, okay, if I select this over here, by double clicking over here like this, then you can see that we have 50 pixels of gap, which means that it should be 50 pixels of gap as well, between that between the nav items.

So I'm going to click this over here like this, and it is set to 93.

So I'm going to change it to 50 pixels.

There we go.

I'm gonna start I'm going to snap it on the grid lines over here like this again, and what I'm gonna do is I'm going to select both the logo and the nav items like this.

Oh, by the way, you should change the home text to medium Okay, you're gonna click this over here and then from regular to medium like this, okay, because in the original design over here, it is said to medium as well because this is the current design.

Alright then.

So I'm going to click both of them together like this and then shift plus a.

Now look at that, whenever items are shifted at the top in order to bring it at the very middle at the very center.

What I'm going to do is I'm going to click this over here Okay, and then select this over here.

Now look, it looks exactly carbon copy of the original document.

original design.

Now look at this over here on the original design, we Have this rectangle over here, okay? I mean underline over here, how do we recreate this? Okay, follow along with me.

Okay, so I'm gonna click this over here and then I'm gonna lock it, I'm going to lock my content like this.

Okay, I'm going to zoom in over here like this, I'm going to select the Rectangle Tool by pressing the R button on my keyboard are and then I'm going to select, I mean, I'm going to make a rectangle over here like this.

I'm going to resize it like this so that I can see the orange guides over here.

Okay, the orange guides are snapping like this, look at that, I'm gonna change it like this are seven, seven pixels in height, and 126 pixels in width.

Okay, now I'm going to change the corner radius like this, I'm gonna write 10 over here.

Okay, there we go.

And in order to change the color, what I'm going to do is I'm gonna select this, okay, while selecting that, look at this color palette over here.

Okay, I'm going to select this color from here, and then this eye button over here, okay, like that.

And then I'm going to select this one, look at that, I have successfully changed the color and also made this underline I'm going now items, there we go, it looks quite the same as this one.

Now the next thing that we need is the image, this asset over here.

Okay, so, so so what we're gonna do is we're gonna come to this assets page over here, okay, and then look at this, we have the asset over here.

So what I'm going to do is I'm gonna select this and then press the Alt, key word, press the Alt key on my keyboard like this, and then I'm going to drag it like hit, I'm going to drag it like this over here.

And I'm going to right click over here and then move to page dekstop.

Like this, then is gonna send me to the next page over here, what you actually need to search where the asset has moved to, okay, by zooming out like this, and there we go, we have our asset over here like this.

Okay, now look at this, we have some unnecessary gap around our illustration.

Just look at that, too.

Okay, so I'm going to select this over here.

Now look at all of these files over here.

Do you see this on welcome number two, this is a frame.

Okay, so look at this, we have so many vectors over here, I'm going to select the very last one like this, this one, okay, I'm going to select the very last one over here.

And then what I'm going to do is I'm going to literally delete this from here, delete.

Now look at that, that whitespace went away, I'm gonna select this text over here, okay, I mean, I'm gonna select the whole frame, like this.

Now, look, we still have some gaps around our illustration.

Now, what you're gonna do is you're gonna select this over here, you see this, okay? Like this, and then select group over here.

Now look, all the whitespace went away like that.

So I'm going to bring it over here like this.

Now the next thing that we're going to do is we're going to copy the width and height of this image, okay, by double clicking over here.

Now, do you see this.

So the first thing that we can do is we can either copy both of them together and then paste them on this illustration one by one.

But if you want to save some, a little bit of time, what you can do is you can just select this one, and then copy the only the width, okay? Ctrl C, and then you select this one, and then you click this constraints proportion, okay, like this, and then paste it over here like this.

Now, what it will do is it's gonna scale our illustration, proportionately, it is going to follow the proportional measurement.

And also is going to change our height as well according to the proportional measurement.

So these are I'm going to click into like this.

There we go.

Now look, it looks as similar as this one, you see this.

I'm keeping, I'm keeping both of them on top of another.

Look, it looks quite the same.

Okay, so I'm going to bring it over here.

And then I'm going to take the help of this orange colored guide and snap my image over here on my grids like that, look at that.

Alright, now regarding the text, how do we write the text, okay, so I'm going to double click over here and double click over here, again, like this now is going to copy the text, okay? Ctrl C, you don't have to write anything, okay? Just copy the text.

Okay, so I'm going to come over here and then T, click over here, okay, Ctrl V.

So I have copied the text over here.

And along with that, it changed those these properties over here as well.

Alright, so I'm going to keep it over here like this.

And I'm going to come back over here like this, double click over here.

And if you want to copy something quickly, what you're going to do is you're going to double click over here, okay? And then you're gonna hit alt, on your keyboard out and then drag it over here like this, you're gonna, it got copied very quickly like this.

Now regarding the button, how to create a button, I'm going to use the auto layout, okay, so what I'm going to do is I'm going to come over here and then Firstly, I'm going to hit the T, okay? Click, and I'm going to write logging.

Okay.

Sorry, log in.

Now let's see the properties of this text over here.

Okay.

Ctrl click like this.

45 pixels.

Bold rowboat okay.

So I'm gonna write rowboat over here.

Book door and bowled over here.

45 here as well.

Enter.

Now look what I'm gonna do.

I'm gonna click this over here and then right click Add Auto Layout like this, look at that.

Okay, now we have it in visible background.

So I'm going to click it over here.

And do you see this field over here? I'm going to click this field.

I'm going to select this over here.

Okay? And do you see my color palette over here? This is actually not complete black it is actually it has a color.

Okay, do you see this color over here, it is this color.

So I'm going to select this again.

And the field, I'm gonna select this one and this eye button over here.

And then I'm gonna click over here like this, it got very dark.

So I'm going to double click over here on the text or control, click like this, okay, and then this is set to black, I'm going to select this and f, f, f, f six times, or three times, you can also read it three times f, f, f, enter, look at that.

We have white colored text inside our black colored button.

So I'm going to click this over here.

And I'm going to set some border radius, okay? I mean corner radius, let's say in pixels, okay, let's actually see the original one, it is actually 18 pixels, okay, and width is this one.

So I'm going to copy the width from here, Ctrl C, and the height is 105 pixels, okay.

And I'm going to paste it over here, look at that, you cannot actually change it over here.

But in this cases, what you can do is you can, you're going to come over here and just drag it over here like this a little bit, a little bit, not too much.

And you can see this, it got unlocked, and the height is law.

In order to unlock the type, you're going to click over here like this, and you're going to drag it like this.

Look at that, the height and width, both of them got unlocked.

Okay, so I'm going to pay the width over here.

Ctrl V, enter.

Okay, don't worry, we're gonna change the properties, okay, and the height should be, wait a minute, it should be I guess, 70 to 105.

Okay, we'll select this, and 105, enter.

Now, we need the text to be at the very center, do you remember this property over here, this little icon, I'm gonna select this, and I'm gonna click this over here so that it gets centered at the very middle, like this, look at both horizontally and vertically.

We got our solution over here.

Alright, so I'm going to click the button over here, and I'm going to right click, and I'm going to replicate another model.

How do I do this? All on your keyboard and drag it like this, look at that.

And I'm gonna right over here, what? Come on, tell me sign up.

There's one.

Okay.

Wait a minute sign up.

Okay, so always, always turn this one on.

So that extra whitespace gets reduced.

And the bottom stays I'm in the bottom text remains at the very center.

Okay, so I'm going to click it over here again, so that this is enabled, okay, all the width is enabled.

So what this does is it removes all extra white spaces, so that your button looks proportional aesthetic.

So now look at this, even if we have a buttons like this, what we're going to do is we're going to use our layout, okay, so I'm going to select both of them together and shift plus a like this, look at that.

Okay, and then I'm going to click this over here, and then center over here like this, so that it always remains at the center.

And look at this, we also need to add some drop shadow to our buttons.

How do we do this, I'm going to click it over here like this, and look at FX over here.

I'm gonna click it over here like this.

Okay.

Now let's look at our original document, what is the priority of our effect the drop shadow effect, okay, so I'm going to select this button over here like this, wait a minute, like this, and then I'm going to select this drop shadow over here.

So they set to 10.

On the x, y is 10.

And the blur is four over here.

Okay, so I'm going to come to this practice over here, and then I'm gonna select the button, I'm gonna select this drop shadow, I'm going to say they will have 10 like this, the blur is four, that's fine.

And for the wives should be 10, like this, there we go.

Now in order to transfer this blur radius to this button over here, instead of doing it again, instead of repeating the same thing, what you're going to do is you're going to click over here, double click over here, and then look at this, I'm going to double click over here, and then I'm going to right click over here and then copy, paste.

Okay, I'm going to copy the properties, and I'm going to double click over here, and right click, and then I'm going to paste the properties over here like this, look at that, I have successfully transferred the walk shadow of the first button to the second button over here like that we're gonna, this is how the copy paste properties works.

Okay, so far, so good.

Now let's look at the gap between the buttons on the original document.

Okay, so I'm gonna come over here.

Now, instead of looking at the oral layout, what you can do is you can just select this first second button over here, and then hold, you hit all and wherever you place the mouse is going to show that distance between that button and the element like let's look at that.

I'm going to keep my mouse on the first button over here.

Let me show this to you again.

Okay, so I'm going to double click over here and double click again, or just hit Ctrl on your keyboard and then right click, left click sorry, like this.

And you're going to hit Alt on your keyboard, okay, and you're going to place your mouse on the first button over here now, look at this.

Let me actually zoom in, okay, look at this, we have 53 pixels of gap between the first and the second button.

So I'm going to come over here, as you remember that we have enable oral layout on our buttons over here.

So I'm going to click this over here, and then I'm gonna come over here and write 53 pixels of gap, okay, five, three, enter, like that.

Now, regarding the gap between our text over here, and the text over here, I mean, the first text and the second text, what you're going to do is you're going to do the same thing, okay, I'm going to come over here like this, I'm going to Ctrl click like this, and then I'm going to hit alt, on my keyboard, Alt, and then I'm gonna put my mouse on this second test, we're gonna, we have 41 pixel, I can see 41 pixels of gap.

So I'm going to come over here.

And instead of doing manually, just select both of them together like this, and shift plus a, and then you click this option.

And then you're going to do it like this.

Okay, you're gonna keep it in the middle, middle left, like that.

Okay, so how much was the gap again? 41.

Right? So I'm gonna come over here.

And do you see this option after clicking this 41, fix it like that.

41, enter, there we go.

Now let's look at the difference, I mean, the distance between the buttons and the text, okay, I'm going to select this button over here.

And then same process, okay, all on your keyboard, and then select that text over here like this, we've got 41 pixels as well.

So I'm going to come over here.

And I'm going to select this and a button like this, look at that, and then shift plus a, now I'm going to write 41.

Over here.

And there we go.

Look at that, we have successfully copied the design, from the main design to our practice case over here.

Now we actually need to align our content according to these gaps and various properties, right, so I'm going to click on here, okay, this block over here, and then I'm gonna click Alt on my keyboard, same process, right, so I'm gonna keep the mouse at the bottom so that I can see the gap between my screen and the content, we're gonna it is 109 pixels over here, you see this 109 pixels.

So I'm gonna come back over here, click this and Alt, I'm going to hit Alt on my keyboard, and then I'm going to put my mouse over here like this, look at that this is 200,000 pixels of gap between this corner I'm in this window, and this content over here.

Okay, so what was the original one, it was 109.

So what I'm gonna do is I'm gonna drag it at the bottom like this, okay, and then I'm going to test it again, camera, click this over here and all.

And then I'm gonna put my mouse over here.

Look, it is 124, which means that I have to go a little bit below, like that.

Okay, let's test again, all 204.

So I'm going to click this.

And then on it five, press the up arrow on my keyboard, okay, on it for it is currently on 104.

Okay, 100 506 789, like that.

And I'm gonna select this over here, and Alt, on my keyboard, put my mouse over here, look at this, this perfect 109 pixels over here, regarding our image over here, let's fix that as well.

So I'm going to come over here and I'm going to select this image over here by double clicking over here.

And I'm going to press Alt on the keyboard, Alt, and then I'm going to put the mouse over here.

167 pixels over here, okay, so I'm going to come over here, back over here and then drag it at the bottom, okay, and then I'm gonna select old, look at 140 pixels, okay? So I'm going to click this over here, shift and up arrow shift up, so it's going to move 10 pixels, okay, so it's currently 150 161 234567, I have pressed seven times my up arrow.

Now look at that.

I'm going to click this over here.

And alt, I'm going to put my mouse over here like that, because 167 pixels of gap between our image I'm in illustration and the bottom screen.

Now we're going to the original design over here.

Do you see these lovely doodles over here? Do you see this little flex over here, how to recreate them? Let me show you.

Okay, so I'm gonna zoom out and I'm going to come to this assets page over here.

Okay.

Now look, now look, I have actually included this flex illustration over here, okay, so I'm gonna leave this and I'm gonna copy this, like this, Alt, drag like this, okay? Right click, move page to desktop.

Okay, so I'm gonna come to next over here, zoom out and look at and look where the file is.

Okay, the file is over here.

I mean, that frame is over here.

Okay? So I'm going to click it over here like this.

And I'm going to bring it back over here like this.

Wait a minute.

There we go.

Now look, I'm going to zoom in into the main file, okay? Like this.

Now look at that.

We have this triangle over here, circle over here, and then this wave pattern over here, how to recreate that.

So I'm going to come to this flakes image over here.

And first of all, what was it triangle, okay, so I'm gonna copy a triangle from here.

Look at that.

We have a triangle over here.

So I'm going to hit Ctrl on my keyboard and then click over here.

Like this, okay that I have selected this Okay, so I'm gonna right now I'm gonna hit the old keyboard, copy.

Okay, Alt, and then I'm gonna drag it from here like that.

Look at the deuces, you'll see what is on my hand over here, I have copied it.

So I'm going to paste it over here directly on my practice image over here, okay, like this, I'm going to release my mouse, and then I'm going to use the Alt key, there we go.

Now the next thing is, I have this circle over here, okay.

Now in order to make the circle, look at the circle over here, I'm gonna select this, control, click, and then alt, drag like this.

Okay, now, I'm going to come over here, and I'm going to select this over here, and then we're gonna enter, increase the size a little bit how to do that, I'm going to hit k on my keyboard, and then I'm going to drag it like this a little bit, and then it's going to become a little bit bigger.

Okay, now, what is, what do we have, we have this wave pattern over here.

Okay, so I'm going to come over here, and I'm gonna select this wave over here.

Now, it's, now look at this, this is a little bit tricky, okay, so this wave is actually multiple icons together, okay? If I control and click over here, now look at this, this whole, this whole wave doesn't get selected, okay, just a single part gets selected.

So in this case, what should you do, you're gonna select, you're gonna hit Ctrl, and shift both of them together, okay, like this Ctrl, Shift, and then click like this, click, click, click, click OK.

And then you're going to do what you're gonna do, you're gonna press Ctrl G on your keyboard, which means we're going to make it a group, or what you're going to do is you're going to right click over here, and then make it a group selection like this, we're gonna, now this will behave like a single element, instead of behaving like a for individual, different elements.

Okay, now I'm gonna copy this from here, I'll click OK.

Now, I'm going to come back over here, and I'm going to paste it over here, and then I'm going to rotate it a little bit, okay, like that.

There we go.

So it looks quite similar to this one.

Now I'm going to increase the gap between them, like this, look at that.

There we go.

And, and in order to change the color of this triangle and his wave pattern, what you're gonna do is you're gonna come over here on the main design, Control, Shift, okay, click this one, and then click this one, oh, sorry, you're gonna click on, you're going to, you're going to click on here first, okay, and then click this over here, that eyedropper over here, and then you're gonna select this one.

Okay? So first of all, do I click this over here, and then select this field over here, then this eyedropper over here, okay, and then you're gonna select this one, there we go.

Look at that, we have colored our flakes like that.

Okay, it looks quite similar to the original design.

This is our practice case.

And this is our design over here, look at that.

Now, we have a lot of flakes over here, error and our image over here.

And then we have a little bit of over here.

So I'm going to pause the video and complete all of these doodles over here.

In the meantime, you do the same, you pause the video, and you complete, you see the original file over here.

And then you make the same on your practice case over here.

Alright, so I'm going to see you after a couple of minutes.

So we'll come back, I have completed all of these doodles over here like this, look at that, it looks quite the carbon copy of the original design over here.

Congratulations, we're done creating our first web design.

Now let's move on to the next section.

There's one over here.

Okay, we're gonna design this.

So I'm gonna come over here and create a frame F, okay, and then next over here like this, look at that, I have created this frame over here.

And then I'm going to come to this assets over here.

And let's select this one, okay, this painter over here and then copy it from here like this, and right click, send it to, I mean, move to page, Dexter over here.

Okay, I'm going to come back to next over here.

And I'm going to search for the file.

Where is it? There is it we have our painter over here like that guy, I'm gonna zoom in a little bit.

And the process is saying during the process, you need to remove this white colored background.

So select this and look at this highlighted over here.

Okay, so I'm going to delete this vector at the very bottom over here, right click left, click over here, and then delete like that.

Look at that.

And now we're going to select this and then come over here on the frame selected to group and it's going to remove all the unnecessary whitespace.

Okay, so I'm going to keep it over here like that.

Now I'm going to come over here, and I'm going to inspect this element, what is it by double.

And now I'm going to come over here and double click over here to inspect the element with this width over here, 657.

Click it over here, Ctrl C, come back over here, like this, click and then click this over here, constraints proportions, okay, and then paste it over here like this.

Ctrl V, enter.

There we go.

Like that.

And I'm going to keep it at the center like this and keep it at the center like this.

Or what you can do is you can just select this, Align Horizontal Centers like this.

Oh, sorry, not this.

One, this one Align Vertical fin just like this, and it's gonna get snapped to the very center.

vertically.

Okay? There we go.

And regarding this text over here, what I'm gonna do is I'm gonna Ctrl click over here like this, and then I'm going to hit Alt on my keyboard, drag it like this, okay, that I, I'm going to keep it over here like this.

Okay? Same thing.

I'm going to do the same thing for this text over here as well.

Ctrl, click, and then hit out, Alt drag, like this, look at that.

The process is saying, you're going to click over here and then alt and then move your mouse to this first text.

Okay? How many space Do you see is a pixels, okay, so I'm going to come over here and shift plus a shift a like this.

And I'm going to keep it at the very middle over here like this, I'm gonna click this, there we go.

And it should be how much gap 80 pixels, right? It is currently set to 51 pixels.

So write a like this, okay, enter.

There we go.

And then I'm gonna come back to this button over here.

So I already have this button, we already created the buttons.

So I'm gonna come over here and double click on this button, double click on this button, that will click again over here.

Okay, so I'm gonna copy this button by writing by hitting alt, and then drag like this.

Okay, I'm gonna keep it over here, raise it, and I'm gonna change the text to get started.

Okay, like that, double click over here, get started.

All right now looks quite good.

So what I'm going to do is I'm going to click on this button over here, and then Alt on my keyboard.

And then I'm going to put a mouse on this text over this, how much gap Do we have, we have 80 pixels of gap.

So I'm going to come back over here and give 80 pieces of gap as well.

Okay, so in order to do it quickly, I'm going to click it over here like this shift plus a, okay.

And then I'm going to click over here, and I'm going to keep it on the very middle like this.

And then I'm going to right at over here, and this actually should set to 81 ad ended.

There we go, we're done.

And regarding the flex, and regarding this little flex over here, I'm going to pause the video and completed, you do the thing, you pause the video and create these flakes over here, as I have showed you how to create these flakes.

So then I'm going to see you in a couple of minutes.

So far, so good, we actually forgot to include the layout grid.

So what I'm going to do is I'm going to click over here and then layout grid enabled by clicking it like this, okay.

And then I'm going to click over here and then change it to columns, okay, sorry, not rows, columns, like this.

And I'm gonna set the margin to 50 pixels over here like this, okay.

And then gutter should be 30, like this.

All right.

Now we're going to snap now now we're going to snap the content to the very right side over here like this.

And then we're going to snap this image, this illustration to the very left side over here like this.

Okay, there we go.

Looks quite good.

We're done with this section over here.

Now I'm going to show you how you can make cards.

Now I'm going to show you how you can make cards over here like this, okay, so I'm going to create a frame over here, F, okay, and then select this option over here.

And then I'm going to keep it side by side over here.

All right, now look at this over here.

So you do manually.

So you do all of this works manually.

Okay, I'm just gonna copy and paste it over here.

I'm just going to show you how to create these cards.

Okay, so I'm going to copy from here like this, and all drag it like this, okay.

And I'm gonna keep this LMS moving as long as I didn't see that orange colored skies, okay, like this.

Look at that.

You see the orange juice, it's orange colored guys over here like this, that I'm gonna release it right now like this.

Alright, then.

So I'm gonna.

Now I'm going to do the same thing for this video elements over here like this, okay, including the button, Alt, drag like this.

Okay, I'm going to keep it over here.

Now, select the first frame, I mean the original design, okay, and see the grids like this.

So I'm going to click over here like this, wait a minute, we have 77 pixels of margin and gutter tied to pixels.

So I'm going to click over here and click the layout grid over here like this.

So I want to change it to columns over here, okay, so the margin is 77 pixels, so 77 into like this, and the gutter was how much let me actually inspect it again, a 32.

Okay, click it again.

Click this 132 over here.

Okay, wait a minute, 32 There we go.

And we should have how many columns, three columns.

Okay, click this, three, enter.

All right now.

Now what you're going to do is you're going to click over here and remove this columns like this and double click over here on the cards.

Look at this.

Width and Height.

Look at this one.

Look at the width and height of our card number one, okay, this 400 in width by 633 in height.

So I'm going to come back over here and I'm going to select a rectangle, right click on my keyboard, okay, click over here like this, which should be fine.

400 Okay, enter, and what should be the height let's actually inspect like this 633.

Okay, so click over here like this, right 633633, enter.

There we go, we have our cards, okay, I'm going to place it over here, like this and water.

And now what I'm going to do is I'm going to remove the color you see this color is dark gray color.

Okay, so I'm gonna snap it over here on my layout grid, okay.

And then I'm going to remove in order to remove the color, you click this minus sign over here, like this.

And in order to see the rectangle, you click this stroke over here, okay, and then select it to three pictures like this, or perhaps even four to four, enter, there we go.

And now with this border radius, we also have border radius around our main design, okay, so I'm going to create, so I'm going to create a border radius over here by clicking over here like this.

Wait a minute, there we go.

It should be 15 pixels.

Okay? Look, it looks quite good.

And looks like the original one as well.

And I'm going to select this, and I'm going to create two more copies, okay, Alt, drag, like this.

Do it again, Alt and drag like this.

There we go.

I'm gonna give you the top over here like this.

I'm gonna take it, I'm gonna take it off the top as well.

And look at this.

I'm going to place it at the Center for a grid like this, okay, like this, wait a minute, like this.

There we go.

Now how to place these images, Okay, come back to assets, okay? You see these three images over here? Let's copy them, okay, by selecting them one by one, by selecting them all by selecting all of them together, right Shift, click, click on the name, click on the name, okay, now out copy, like this out, drag over here like this, okay, now, right click, move to page desktop like this, okay, and go to next up, zoom out and see where is it? Here is our image, okay, click over here, click over here, click over here like this, bring it over here.

Like this.

And do you remember the steps, you're gonna click over here.

And you're gonna scroll at the very bottom over here, and remove this vector from here, okay, delete, click here, click on this, click on this frame over here, and then change it to group over here, like this now is going to remove all our extra additional white spaces, okay, now drag it over here like this, come over here on the main design, control, I mean, select this one and look at this width and height, 359 Ctrl, this one and come over here, select this, select this little constraint button over here, like this, and paste it over here like this.

Ctrl V, enter.

There we go.

We have a little icon over here, we can place it over here like this.

And you'll see this, we have a little part over here.

Do you see this part? We didn't have this part over here.

Okay, so in order to remove that, we're going to come over here and Ctrl, click like this and hit the Delete keyboard, hit the delete key on your keyboard and it is going to get vanished like that.

Look at that.

There we go.

Let's copy the name from here Ctrl, click alt drag, like this, the same process for the music and pharmacy as well.

Like that control, click alt drag over here like this and do the same process.

The same process for this images over here.

you pause the video, take a minute and complete the process.

Okay, I'm going to come back in a minute.

All right, now I'm done doing the process.

Now what we are going to do is we're going to center our image and the text at the very center of our card.

How do we do this, we're going to click both the illustration and the chemistry like this.

And I'm going to shift plus a or click this orange layout over here like this.

Okay, now look is gonna get at the very center.

And the next thing that you're gonna do is, you're gonna click it over here like this, and click it over here to keep it keep it at the center both horizontally and vertically.

Okay, like this, look at that.

Okay, and click it over here again and remove all of this gap over here, get zero like this, enter.

Now what you're gonna do is you're gonna copy this button from here, okay, control, control, click over here, like this, and alt drag, okay, place it over here like this.

Do the same for all the cards as well like this.

Now let's look at the gap between our button and our text.

Okay, so I'm going to come over here and control click and hold, press the Alt button on your keyboard and put your mouse on this text over here.

Now look, we have 19 pixels of gap, okay, so I'm going to come back over here, click this one and click this one by clicking my shift key by clicking my shift key on my keyboard like this.

Shift plus a it should be 90 Okay, I'm going to put 19 over here.

And in order to put this button on the very center, I'm going to click this over here and click this.

There we go.

Now click both of them together like this.

Now you're going to click and then all plus h, which means that we're going to center both of them horizontally and vertically together.

So out plus h, all plus h, all plus v like that, look at that we have horizontally and vertically centered both the card and the content.

Okay, like that.

And I'm going to select both of them together.

And I can either group them together in a group, or I can also use or allow, so I'm going to just use the group, okay, Ctrl G, like that.

It became a small group over here.

Now you duplicate the same process and fix these cars over here.

Okay, I leave this to you.

Do you see this design over here, this is the same as number one over here and number two over here.

Okay, so you're going to do this on your own.

Also, I believe that you can make this footer over here.

So I'm not doing this.

I'm just giving this for you.

Now, let me show you how I made these cards over here.

Okay, so I'm going to come back to my assets over here.

And I'm going to come to, let's say that I want to see like just the first one, okay, I'm going to see like this, and alt drag over here like this, okay, right click, move to page dekstop.

Okay, like this, it moved to my desktop, let me zoom out, here is my asset over here, I'm going to keep it over here.

Oh, by the way, what you're gonna do is you're gonna move this to the right by clicking over here, Shift, click like this.

Okay, you're going to select all of them together like this.

And you're going to move it like this.

There we go, it got moved over here, like this.

And I'm going to come over here, and I'm going to select my F on my keyboard, okay, F and then I'm going to create this Dexter frame like this, look at that, and I'm gonna drag it over here like this.

There we go.

And regarding this, and regarding the navbar, what I'm going to do is I'm going to copy it from here, okay, and then I'm going to paste it over here, like this out, and then drag it over here like this.

There we go.

But before that, we also need to enable the layout grid like this control, click this over here, and then layout grid over here and change it to columns, columns over here.

And then what is the margin? click over here and enable this over here like this.

Look at that.

We have this column, grid over column grid over here, select this over here, and we have three columns.

And how many margins 50 pixels of margin, okay, 70 pixels of gutter.

So come back over here, like this.

Select this over here, right through over here.

Okay.

So how much was it 50 and 7050 pixels margin 70 pixels gunner, come back over here, and right 50.

Wait a minute, 50 over here, and 70 gutter.

There we go.

Okay, now, so I'm going to select the first image over here, good double click over here like this, double click over here, double click again over here.

Now keep clicking, unless you do select the image, okay, like this look.

Now I have selected the image.

Look at that.

I can see the width and height over here as well.

So I'm going to copy the width over here like this Ctrl C.

Now I'm going to come back over here.

Okay, I'm going to select my frame over here you see this white space? How to remove that, you're gonna click over here and convert it to a group like this.

Now look, we don't have any white space.

So click on here like this, and then enable this one, okay, constraints property and then pays the width over here like this.

Ctrl V, enter.

There we go.

We have our image over here.

Okay, now how do I know how did I do this circle over here? Pretty straightforward, okay, you're gonna see like this circle, why Ctrl.

Click like this.

Now look at this, I have a circle of 198 by 198 pixels.

Okay, so I'm going to click my zero, I'm on my key on my keyboard like this, enter a sorry, click.

Now look at this.

I have this circle over here, like this constraints properly and right 198 like this, 198, enter.

Okay, now what you're gonna do is you're gonna keep it over here like this, look at that.

In case if the circle is something like, in case, if the circle looks something like this, wait a minute, let me actually show you.

In case the cycle looks something like this, what you're gonna do is you're gonna right click on the circle, Send to Back like that.

Okay? And I'm gonna keep it over here unless I don't see that orange colored guide.

Okay, look at that.

It's gonna be it should be at the very center over here.

Okay? If you don't see the guys watching, we're gonna do is you're gonna select both of them together and hit alt H, which means center horizontally, like that.

Now, you're going to select both of them together.

And then do you see this option over here used as a mask.

I'm going to select this.

Now look at that, I have this option over here.

Again, make a circle, okay, zero on your keyboard, click over here, and then use this 198 like this, tap.

Sorry, enter like this.

Now, there we go.

Now what you're gonna do is you're gonna remove the field from here, do you see this? It has a field, it is green color.

Do you see this gray color over here on our circle, you're going to remove the circle, fill, and then select the stroke over here and select three over here like this, enter.

Now what you're going to do is you're going to bring it over here like this.

Yes.

Do you see this over here, now bring it over here like this.

Now, if you if you move the circle, if you try to move the circle like this, you're gonna see orange colored Guide, which will snap now what you're gonna do is you're gonna select your circle, okay, control, click like this, okay? Now keep moving your circle, unless, as long as you don't see the orange colored, orange colored Guide, which snaps at the very center, we're here like this, look at that.

It is actually getting snapped over here.

the very center, we're here, look at that.

Okay, now what you're gonna do is you're gonna select both of them together like this, and Ctrl G.

Okay, now look, it got fixed.

Okay, so we're done making this profile image over here.

Now, what you're gonna do is you're going to click it over here, like this and drag it over here.

But before that, you need to make this car.

Okay, so how to make this car.

So I'm gonna double click over here and see these properties look with is 399.

Let's consider it 400.

Okay, so 400 or 400, which is a perfect square.

So I'm going to come over here, on my keyboard, click over here, like this.

And what I'm going to write is 400, or 400.

Okay, I'm going to click this over here and write 400.

Over here, 400, Enter.

And I'm going to remove the field from here completely.

Now let's go actually see the main image Ctrl, click like this, and look at this, we have our stroke property of four and this color, okay, Ctrl C, I'm going to copy this stroke color, like that I'm going to see and then I'm going to select our rectangle, okay, like this.

If you don't see the rectangle, what you're gonna do is you're gonna select like this.

Now look, I can see my invisible rectangle, like this stroke over here, and basic color, Control V, enter, and then I'm gonna write three over here like this.

There we go.

Now regarding the book, now regarding the shadow watts, you're going to do is you're gonna click over here, you can just copy and paste the shadow or what you can do is you can select this over here like this, and then click this FX over here, okay, and drop shadow, right then over here, and then on the y axis as well like this, enter.

Okay, now I'm going to remove the guides from here by clicking this.

Now you see this, we have a little odd behavior over here, you see this, we have white colored space over here that is unexpected.

So in order to remove that, what you're gonna do is you're gonna click it over here like this, wait a minute, we're gonna click this rectangle over here, I mean square over here, and then we're going to fill it with the color.

Okay, color off white, complete, pure white, okay, fff.

In turn, now look, the problem is solved.

Then what you're gonna do is you're gonna either write the text over here or copy the text from here, okay, control, click out, drag like this, okay.

And then I'm going to put my image over here like this, you will see something like this, right click, and bring it to front like this.

Okay? Now control.

Now, select both of them together, like this, and shift plus a, and then select this option over here, up at the middle like this, and select both of them together, shift plus a, and then also not see shift plus a, sorry, click both of them together, out V and alt H, which is center, both horizontally and vertically.

Okay, then I'm going to make it a group control g like that.

There we go, we made ourselves a card component over here along with the profile, picture image.

Now what you're gonna do is you're going to replicate the same thing.

So pause the video and complete the process over here and now and I'll be back after a while.

Alright, then we're done making our teachers page now just copy this footer from here that you made earlier.

Okay, click over here, and then paste it over here like this.

There we go.

Now look, now look at these two pages over here, the Contact Us page and the signup page over here, both of them looks more or less the similar.

I'm going to show you how you can make this one the Contact Us page.

And you're going to make this on the signup form page on your own.

Sounds good.

Now let's get started.

Now I'm going to now I'm going to zoom out and I'm going to select this over here by clicking and then Shift, click Shift, click OK.

I'm gonna keep it on the right side over here like this.

Now I'm going to zoom in over here and select a new create a new frame, okay, F and then desktop like this.

There we go.

And I'm going to resize it a bit like this way.

Wait a minute.

There we go.

Now I'm going to copy this.

Now I'm going to copy this from here, wait a minute, I'm going to select both of them together and control like this.

There we go.

And look, we are in the Contact Us page, which means that we need to change this underline.

Okay, so I'm going to come to this RTL design over here, and I'm going to select this.

And I'm going to drag it over here.

In this contact us page, okay.

There we go.

And then I'm going to drag it to cover the cover all the area like this.

And same thing for the teacher section as well.

You see this one over here.

So when we are on the signup page, this underline should be on the signup page as well.

Okay, sounds good.

Now I'm gonna come back over here.

Now I'm gonna just copy this text from here.

out, drag it over here like this.

And here to keep it at the very center, select both of them Ctrl G, and then alt, H.

Now look, it's going to be at the very center for frame over here.

Now how did I make this icons along with the address, phone number, etc.

Now I'm going to come back to my assets page over here, and you see these images over here, this icon, I'm going to copy this from here, okay, out and then drag over here, okay? Then select both of the all of them together, right click, move to page.

Next up, okay, so I'm going to come back next top, zoom out and find there is my icons over here.

Okay, then I'm gonna bring it over here like this.

And I want to select the key on my keyboard, okay, and then I'm going to resize it like this.

Okay, I'm going to make it a small like this, and I'm going to drag it over here.

Okay, I actually need to make it a little bit more smaller.

Wait a minute.

There we go.

It looks quite good.

And let's actually make it.

There we go.

It looks quite good.

Okay.

Now regarding the address, okay, let's inspect what is the address, font size, okay.

Ctrl Click to do that we have 30 pixels, font size, regular Poppins.

Okay, so now let's actually duplicate the same thing key, enter, ABC, ABC at the rate gmail.com.

Okay.

Now, in order to center the icon and the text both here, I would vertically, select both of them together and hit alt H.

Now both of them are centered.

Now Ctrl G to log the position.

Okay, now I'm going to keep it over here like this.

And we're getting this one.

Select again, t enter, okay, 123456.

Okay, now look what I do, okay, select both of them together.

And alt, h There we go.

By the way, I actually changed my mind, instead of making a group, make it a frame, okay, so click over here like this Ctrl, Shift G to remove the group, okay, and hit Shift plus a shift plus a like this, and click this over here and put it at the very center.

We're here like this.

Now coming back over here, in let's inspect this one.

What is the gap between our text and the image over here, okay, there's inspect by clicking on here and then alt, hold your mouse over here.

31 pixels, okay, so come back over here, click this right 31 over here, do you want enter, there we go.

Same thing goes for same thing goes for here as well.

Select both of them, shift plus a, and click this over here is going to be 31 over here.

31, enter.

There we go.

Give it over here for now.

And let's look at this one, it should be ABC comma D, F, okay? So D click like this, A, B, C comma D, E, F, okay.

Select both of them together like this shift plus a, give me the center like this.

There we go.

And now select all of them together like this.

So they shift plus a and then keep it at the center over here like this in order to move it at the very center, hit all plus h like that, change the gap a little bit to let's say 180 pixels like this, and click over here and again, do alt plus h which is center horizontally.

Or you can also use this options over here as well.

Alright, so far, so good.

Now let's make this input fields.

Okay.

So let's inspect this one over here, control click, so 416 pixels by 82 pixels.

Okay, so I'm going to come back over here like this.

hit F on your keyboard, sorry, on your keyboard to make it rectangle, okay, like this.

So it was 416 416, enter.

The height was I actually forgot sorry, it was 82.

Okay, so I'm going to click it over here like this, and eight over here, enter.

Then I'm going to remove this field by selecting this minus over here again, minus and then stroke plus 123.

Okay, enter, then increase the corner radius to 12 pixels.

Okay, there we go, it looks quite identical to this one.

Now regarding this text, how do we input the text? Okay, so I'm going to come over here and inspect, okay? Ctrl, enter.

So we have 20 pixels of font size.

So I'm going to come over here and right click and write your name, and let dot dot dot dot like this.

Okay? It should be 20.

So I just turned it over here.

And now let's center it over here.

So select both of them together and alt h are not all a sorry, Alt v like this.

Okay.

Now I'm going to keep it I'm going to keep the text sorry, not this one in the text over here like this.

There we go.

It looks quite good.

And I'm going to come back over here.

And do you see this? It looks, this is the original design, do you see this color over here? In order to replicate the same? I'm going to come to my original design over here.

Okay, I want to control click over here.

And do you see this transparency over here it is set to 100%.

I want to set it to 50%.

Okay, control 50, enter, there we go.

We've replicated the same thing.

Now what you're gonna do is you're going to click and select both of them, then Ctrl G, I have made a group over here, okay? out, drag like this, okay? And write your email over here.

Email over here, like like this.

Okay, there we go.

Now, how do we make this, this text over here, the same process, Okay, I'm gonna control click over here and see if inspect the elements, okay, for one for Y to 10 is the dimension over here.

So let's do it.

So I'm gonna click over here and copy it, like this over here, like this.

And I'm just gonna simply drag it over here like this.

There we go.

And I'm going to click over here and Ctrl Shift G to release the grouping.

Like that.

I'm going to right over here, your message here.

message here.

Okay, now I'm going to select this option over here, do you see this option, or width? There we go.

And I'm going to keep it over here like this.

Then Ctrl G to lock our positions.

Alright, looks good.

Now let's see the spacing.

Okay, I'm going to click this first element, not this one, and then hit Alt on your keyboard, move your mouse.

So from here to here it is 50.

From here to here it is how much 46 Okay, there's duplicate the same, okay, it should be shift plus a, and 46 over here, okay.

And from here to there, it should be within shift plus a, okay, and then center it over here like this.

It should be 50.

Okay, right 50 over here, like this.

50, enter.

So we have nailed our gaps.

Okay, now keep it at the very center, okay, like this, Alt H, like that, and button.

And regarding the button, you make the bottom yourself.

So I'm leaving this signup form to you, this is the same process as this one.

Okay.

This Contact Us form and this one over here, this first page over here, I really hope that you can do it on your own.

Congratulation guys, we have successfully completed the web design for the next version.

Now we're going to create the design for the mobile version, the mobile design is over here on this page over here, why don't we if you can recall, I have created these two pages over here, the laptop and the tablet version over here.

Along with that, I have also included the style guides over here, I mean, the typography guides over here, so that you can practice on your own at your house.

This is your homework.

So I'm going to come back move version over here and then I'm gonna show you how I made this design over here.

Okay, so let's get started.

Alright, the first things first, I'm going to move all of these elements all the way right side, so that I can create new frames, okay, so I'm going to select all of them together like this, okay, like that.

And then I'm going to move it by clicking over here and then drag dragging over here like this.

Alright, there we go.

Now I'm going to zoom in here over here like this.

Now I'm going to click the F on my keyboard like this, and then I'm going to select this phone option over here and then I'm and then I'm gonna click this over here, iPhone 11 Pro Max, like this.

There we go.

We have our frame over here, and then I'm going to align it like this according to this frame.

And then I'm going to select this one rjL one, okay, like this.

And then I'm going to look at the border radius over here.

I mean corner.

Yes, it is set to 40 pixels, okay? So I'm going to take this over here, and I'm going to say over here how much 40 like this, okay, enter.

Now let's make this navbar over here, you see this one? Okay, so I'm gonna Ctrl click on this logo over here and see its properties.

It is set to semi bold Poppins font family and font sizes, 48 pixels over here, okay? So I'm going to come back over here, okay.

Click on this hc t on my keyboard and click OK.

So I'm going to write a do sorry, a Jew dot Pio, like this and is also and then I'm going to change the settings to for gate over here.

Like This semi bald and then Poppins.

Alright, looks good.

I'm going to keep it over here like this.

There we go.

Now, how do you create this hamburger menu icon over here? Okay, so you have two options, you can manually create that.

Or what you can do is you can download it from somewhere, I mean, download the icon from some website, like freepik, and many others.

Alright, today, I'm going to show you manually how to create this hamburger menu icon.

So let's get started.

Okay, so I'm going to first of all, I'm going to inspect this element, okay.

Ctrl, click like this, and then I'm going to see it properly.

So how much is it set? width is 30 pixels, and the height is four pixels.

All right? So I'm going to come over here like this.

And I'm going to draw a what rectangle Okay, on my keyboard and then drag it like this.

All right, I'm going to right over hit 30.

And what was the height, it was four, four, enter, there we go.

Now I'm going to say to which color Tell me not black, it is this color, I'm going to come to this Dexter option over here.

And I'm going to come to my color palette over here you see this? This color over here.

Okay, so I'm going to click it over here and copy it like this.

Alright, so I'm going to go back to the mobile version.

And I'm going to come over here, and I'm going to paste it over here like this on this section, okay? Ctrl V, enter.

Oh, now I'm going to create it three times, okay, I will replicate it three times.

Okay, one.

So how I did this, okay, let me show you control that, first of all, you're going to hit Alt on your keyboard, okay, and then drag your mouse like this.

Okay, there we go.

And then do the same thing again, like this alternate keyboard and drag.

There we go.

Now let's come to the original one over here.

And what you're going to do is you're going to Ctrl on your keyboard and click like this, okay, now hit Alt on your keyboard, and then move your mouse to this portion over here, I'm in the second line, okay, so that you can see the gap between the first and the second line is how much five pixels, okay.

So I'm going to come over here.

And what I'm going to do is I'm gonna multi select all of them like this, okay, and shift plus a, now send rate like this.

And then I'm gonna click it over here and you see this gap properly.

I'm gonna say two, five, enter, there we go.

All set.

Now what you're gonna do is you're gonna center both the logo and the icon, horizontally, okay? select both of them together, like this, and shift plus a.

Now look, the icon jumped at the very top.

Let's fix that by clicking this over here and keep it at the very center horizontally like this.

There we go.

Now let's come to the origin document over here and click this.

Okay, now let's see its layout.

Great.

Okay, so I'm gonna click this icon over here like this.

And then I want to inspect this one, okay? It has how many columns, one column margin is 20 pixels.

Now, let's recreate the same Okay, so I'm going to click over here like this, and click this.

Okay.

Layout grid.

There we go.

And I'm going to change it to what columns and then one over here and how much is the margin? 20 margin.

Okay, there we go.

Now, what you're gonna do is you're gonna, I mean, we're gonna lie it over here, okay? I mean, the logo and the hamburger icon, okay, so we need to increase the gap so that we can stretch it, I will stretch the icon to the VA, right on my, on our layout grid.

Okay, like this.

We're gonna.

Okay, there we go.

Looks good.

Now, I'm gonna come back to the Wait a minute.

Yeah, it looks good.

Now I'm gonna come back over here, click this, okay.

And now look, what I do.

I'm going to select the Alt on my keyboard after clicking this nav bar over here, and then all on my keyboard.

And I'm going to put my mouse on this screen over here so that I can see the gap between the screen and my content.

Okay? It is 19 pixel over here, and 10 pixel at the top.

If I come over here is going to be the same, I guess no strange.

Okay.

So I'm going to keep 19 over here.

Okay, so how do I do that? countries that, let's see if it is okay or not.

Okay, so I'm going to click this one, almost on my keyboard and then put my mouse over here, this 20 over here.

And over here it is how much 21.

So there is one pixel difference, okay? Not big difference.

So let's actually increase one pixel over here, click this one, and then come over here and just increase one.

How do you do this, click the up arrow sign on your keyboard, okay, like this.

And then the problem is fixed.

Now let's inspect, okay, so click this over here, altering your keyboard, put your mouse over here, so it is 20 over here and on this side, out, and then look at this 20 over here as well, but at the top it is how much nine.

So move it a little bit, just what one pixel Okay, so click this and then down arrow on your keyboard, down like this.

Now let's inspect alternative keyboard.

Keep it over here.

We're going to stand 2020 this symetrical Alright, looks good.

Now.

Regarding the image, how do we work with this same thing, come to assets over here and look at this one, okay? Click on here, Alt on your keyboard, drag over here like this, okay? Right click, move to page, what mobile.

Alright, so zoom out a little bit so that you can see where our asset got transferred, okay, so it is transferred over here, bring it over here, like this drill is the same, okay, you're gonna double click over here, or what you can do is you can just click on here or not here, sorry, over here, and you're going to select, I mean, you see all of this vector gets selected, okay, just select the very last one, okay, there's one, and Delete on your keyboard.

Like this, it got deleted, and look at this white space.

If I click this name over here, you see this unnecessary white space.

In order to remove them.

Click this frame over here as a group.

There we go.

All our unnecessary work split whitespaces went away.

So I'm going to keep it over here.

Look, it's very big.

Okay, so we need to resize it rescale.

Either you can hit K, either you can hit k on your keyboard, or just hit shift on your keyboard and just drag it over here like this.

Alright, like this.

Let's do it manually instead of copying the properties from here.

Okay, let's manually shift, hold shift on your keyboard and drag like this.

Again, it's gonna resize proportionately legs.

Okay, now, you're gonna follow the orange right? Now you're going to follow the orange guides over here, you see this orange guides resuming.

You can see the orange colored guides, okay, you see these guides, you see that? It's snapping.

Okay, so I'm going to stretch it till my layout grid over here.

Okay, there we go.

Boom.

Notice inspect the gap between our nav item, I mean, nav bar and our image, okay, on the original document, click this alternate keyboard and put it over here.

47.

So click this alternate keyboard over here.

So 36 point 71.

So what was this? 47? Okay, so I went to, sorry, which is over here, let's see.

This must get click over here and all to put it over here is 58.

Okay, it should be 47.

So shift plus up.

Let's see how much is that we have moved 10 pixel up.

So out on your keyboard, this 48 so it was 47.

So click it, click again and put it in, press up arrow sign one thing like this.

Now look, it's equal measurement.

Alright.

And regarding this flakes over here, you see this little flakes.

Okay? You want to put them on your own.

Okay, so I'm going to leave it as it is, because I showed you how to recreate this doodles over here, this flakes over here, okay, what you're gonna do is you're gonna come to assets over here, okay? And then you're gonna use this assets over here, okay? All right, let's come back to the mobile over here.

Let's duplicate this text over here and create the button.

All right, now click this altar on your keyboard and drag over here like this.

Okay.

By the way, I also given this chart over here, the typographic guide, like what should be the size, font size of the logo, and the large text, small text, size button, etc.

so that you can make all elements with accurate calculations.

Okay? So zoom out and come over here.

Alright, so what we are going to do is we're going to copy this over here as well.

Okay? Like this, click over here, Alt, drag like this.

All right, there we go.

Now let's see how to create this button over here.

Okay, the same thing, okay, what you're gonna do is you're gonna hit t on your keyboard, okay, then, click like this.

Now you're gonna write log in like this.

Okay, now come over here and inspect the original document, click, hit Ctrl.

And then take a look, we have font size of 24, remoto.

Both.

All right, so come over here, right 24 Robo Joe, and then it should be how much Bose There we go.

And we're gonna change the color to white because it is because the original one is white in color.

All right, like this F F F three times, all right, six times, Okay, it looks invisible.

Now what you're gonna do is you're gonna hit Shift plus a on your keyboard and make all the way up like the shift plus eight.

Okay? In case you can't find your invisible button over here, do this.

Okay, if you select like this, then you can select your button.

All right.

Now come at the bottom over here and hit fill, and fill it with a color black 000, enter.

There we go.

Now we can see our button.

Okay, so come over here, click.

I'm in control, click, look at the height.

It is 55.41.

Let's consider it 55 and the width is 374 which is I will which stretches from the very left to the very right to all layers.

Great.

So what is the border? Yes.

9.49.

Okay, so click over here, right the border.

Yeah, I'm in corner.

Yes.

9.49.

All right, there we go.

Now the height is how much 55.

Look at this, the height and the width is locked in order, unlock it, just come over here and drag it a little bit over here, like this resize a little bit over here, the height gets unlocked.

And do the same over here a little bit over here, the width gets unlocked as well.

All right, now in order to, if you notice carefully that you can see that the text is not at the very center have a button, how to do it, just click over here, center like this both horizontally and vertically.

Okay, now the height of the button should be 55, enter, and the width, instead of doing it manually, instead of doing it over here, directly, just put it over here like this, and then drag like this, okay? extend till the end over here like this.

Okay, there we go.

Now, copy the button over here like this.

All right, now control, click, double click over here and then sign up.

There we go.

And then what you're gonna do is you're gonna click both of them, then hit Shift plus a, and now sending the button both horizontally and vertically together like this.

Alright, now let's inspect the gap between our first and the second button.

Okay, click, sorry, control, click, control, click on the original button, and then out, hold your mouse over here how much it is 17 pixels of gap, okay, so come over here.

And click this and it should be 1717.

There we go.

All right, now looks good.

Now I'm gonna remove the layout grid from here like this.

Okay, along with that, remove the layout grid of the original document as well look at that it looks symmetrical, identical, except the flex over here, okay, except this flex over here, because I have kept this for you, so that you can do it on your own.

Alright, now look at the second frame over here, this is the same as the first one, okay, so what you have to do is you're gonna click f4 on your keyboard, then phone camera phone option, and then click iPhone 11 Pro max like this, and you're going to get this frame over here like this, resize it, you don't have to resize it because it's perfect measurement.

And then what you're going to do is you're going to come to this over here, okay, click over here, Alt, drag like this, and then paste over here like this.

There we go.

And you're getting this one, inspect the corner yet is 40 pixels.

So 40 pixel over here as well for zero, enter, and we're getting layer grid, click over here, okay, sorry, two columns.

20 off gap between the pixel gap, column count should be one.

Okay, and there we go.

And now what you're gonna do is you're gonna center it over here like this, at the very center vertically, or what you can do is, you can just keep it over here, like this, and just click it and alt H, which means center horizon view like this, or what do you have the, or you also have this option over here, you see this, we have the Align Horizontal Centers, okay, I'm going to keep it over here like this, click it over here, like this, look at that it got centered horizontally.

All right, so I'm gonna keep it over here like this.

aggroing.

Good, according to our design over here.

All right, now I'm going to leave this entire design on your hands because I truly believe that you can do it on your own because this one is similar to this one over here, the first frame over here, okay, so I'm not doing this, you're gonna do it, okay, including this little doodles over here.

Okay, so you're gonna do this on your own as well.

Now we're gonna move on to the next section over here, you see this? We're gonna make cards over here on our offered courses section.

Okay, so how do we do this? Okay, so first of all, create a frame over here F on your keyboard, okay, and then select this iPhone 11 Pro Max, okay, so I need over here like this.

I mean, with the original document at the top like this, look at that.

We have our orange color guides over here.

Okay, now click on this, select the corner radius, corner radius to 40 over here, and there we go.

And now you can stretch it till over here, unless as long as it doesn't snap over here at the bottom, you can see the orange colored guides.

If I zoom in a little bit over here, you can see the orange colored guides, Okay, there we go.

I mean, it's gonna snap, okay, you can feel it, that it aligned together.

Now what you're gonna do is you right click our frame over here by selecting this name over here and then layout grid, right click on this and select columns, just one column, enter.

All right, now click on the original document over here and select this.

Not this.

Sorry, this one.

Okay, let's, let's inspect how much margin do we have? We have 20 pixels of margin.

Okay, so this one, on our practice case, it should be 20 pixels of margin as well.

So click OK.

So So click over here and select training.

Okay, enter.

There we go.

Now regarding this nav bar, you know the drill, right? Just copy it from here, like this out and then drag over here like this.

There we go.

And in order to center this nav bar horizontally, what you're gonna do you remember, Alt H, or select any one, or select this option over here.

Okay? All right, looks good.

Keep it over here at the top.

Okay, now in order to complete these designs very quickly, what you're going to do is you're going to come to this Dexter option over here, okay? And this is our offered courses.

This is the original one.

And this is the practice case over here.

Okay, so I'm going to click over here and and then select Alt on my keyboard and drag over here like this.

All right, look at that.

I have successfully copied it.

And now right click, move to page what mobile Alright, come to mobile, zoom out to find the frame.

That is it, we have our there is it, we have our frame over here.

drag it over here like this, again, this corner.

And now what you're gonna do is you're gonna see like this text over here, along with the underline, okay? Copy, throw out, drag like this.

All right, there we go.

And now what you're gonna do is you're gonna shift and then resize like this.

Or what you can do, you can just even hit k on your keyboard and drag like this.

Alright? Now look at this, it is getting small proportionality.

Okay, now I'm going to keep it over here, you can take the help of the orange color guys like this, okay? Or what you can do is you can just keep it over here as it is and click it, Alt H or select this option, okay? align content horizontally.

There we go.

And let's inspect the gap between this one and the left nav bar, like this out and put your mouse over here.

38 pixels, okay? click over here, alternate keyboard, put it over here, this 59.

Okay, so what you have to do is you have to just give it over here, and let's inspect right now, alternate keyboard, select 40.

Okay, so I'm going to click here, and then press the up arrow two times one, two.

Now it's 38.

accurate.

All right, looks good.

If we're going to if we're going to recall, we made this card on the desktop version, okay? Although that that now in order to make the design for the mobile version, very quickly, we're going to take the help of oral layout.

So what we're gonna do is, we're gonna select all our cards together like this, okay? And then shift plus a like this.

Do you see this option over here is this called the oral l? Do you see this little button over here? Oh, by the way, you're going to click this over here, and then center both horizontally and vertically, like this.

And now you'll see this little button over here, this is activated, which is, which is align content horizontally.

Now we're going to select align content vertically like this, you see this button over here, click this Now look, it made us content for our mobile version, okay, so I'm going to drag from here to here like this, okay.

And then I'm gonna, what I'm gonna do is I'm gonna keep it I will align without layout grid over here, like this, right now when I select key on my keyboard, or hold, shift, and then resize your cards like this, as long as it doesn't snap to our layout.

Great on the right, okay, like this.

There we go.

It looks quite good, I guess, click over here and put it at the top like this.

There we go.

Okay, now it looks quite big compared to our design over here.

So in order to adjust the settings, what we're going to do is we're going to click over here, double click Okay, and then double click again, double click again, as long as we don't see this blue colored lines, our lower image, okay, look at the size of the image.

Okay, you see this, just copy the width Ctrl C.

And now come over here, double click, double click, double click as long as you don't see the blue colored lines around our image, okay.

So I have selected this one, select this option, okay, constraints properly, then paste the width over here.

Ctrl V, enter.

There we go.

Now let's change the text.

What is the font size of this text? Okay.

Ctrl.

Click.

Now look at this, it is 50.7 just consider it 50 pixels, okay, Ctrl, click, select 255 zero, enter.

There we go.

And yeah, select this option over here as well or a width.

So what it will do, let me show you the control set.

What it will do you see this extra gap over here is going to remove that extra extra gap so that we can do our measurements accordingly.

I mean, correctly.

Okay, so click this over here now.

Now you can see that the extra gap got removed.

Okay, like that.

There we go.

And we're getting the button lis instructed what what is the font size model? Okay.

Ctrl click like this.

24 pixels.

Okay.

Ctrl click.

So it took You fall over here, Enter.

And then look at this, we have so many gaps over here.

Okay, in order to remove those gaps, just click this over here or Oh, wait like this.

There we go.

Alright, so far, so good.

Now look at this, we have our content on the very left side, so we need to center it both horizontally and vertically.

And now let's look at our original category here.

Okay, so double click over here and look at this height over here.

Okay, so I'm going to copy the height of a Ctrl C, and then come to our practice case over here, okay, double click over here and then paste it over here like this, okay? Ctrl V, enter.

Alright, now, so far, so good.

Now we need to center our content both horizontally and vertically inside our card over here.

Okay, so how do we do this, first of all, we're gonna on frame or frame, okay, like this, I'm going to click over here, and then click this over here, okay, from frame, we're going to select it to group like this, okay, and then Ctrl Shift G to remove that group like this.

Now, it doesn't have any oral layout over here, it is just a single plane card, I look at this over here, it is also behaving like a group.

So Ctrl, Shift G, remove that group as well.

Alright, now the next thing that you're going to do is click this content over here and this button over here as well.

Okay, both of them and then shift plus eight, to put it inside a frame, okay, and then select it to zero, like this, and let's enter.

All right, zero over here as well, there we go.

It is removing the extra whitespace from our content, okay.

And now what you're going to do is you're gonna select both the card and our content like this, okay? And then shift plus a, okay, shift a, and then centric, both horizontal and vertical.

Okay, you're gonna select this button over here, like this, and then select this button over here, or what you can do is you can just select alt, H, and alt v on your keyboard like this look, or v h like this.

There we go.

Now look at this.

We have so many gaps over here, but we have a minimum gap over here.

Okay, so how do we remove those gaps? Okay, so let's inspect this button over here, okay? Ctrl, click like this, look at this properties, okay? Look at the height, it is 55 pixels, okay, so I'm going to come back over here and control click like this, and set the height to how much it is set to 62.

So and it is also locked.

So what you're going to do is you're going to select v on your keyboard and drag it a little bit up, okay.

And now set it to 55 pixels.

Great.

55, enter, there we go.

Now, this button is not at the very center, I mean, this text is not at the very center, what you're going to do is you're going to click this over here, okay.

And let's send it over here like this.

There we go, boom.

But still, you have so many gaps in our content, I get it.

So let's inspect.

Okay, so click over here.

And look at this, we have 7.66 pixels of gap.

Okay, so let's, let's see, to see, enter, there we go.

Now select both of them together again, and alt v alt h to sender both of them both horizontally and vertically.

There we go.

Our bottom looks exactly the carbon copy of the original one over here.

Now, I'm going to leave the rest of these cards, you see this card over here, and this card over here as well.

I am leaving this to you fix them.

Along with that this design over here you see this design, this is similar to our design, I mean frame number one, this one and frame number two over here as well.

So do it on your own.

And yeah, you're gonna do is footer over here as well on your own.

Now we're gonna make the teachers page.

Okay, this one.

All right, so zoom out a little bit and delete this one from here, delete.

All right, and then we're going to move it to the right side.

Select properly like this.

Alright, so right so over here like this.

There we go.

And now come to the next version over here and you see this page over here, the original document this one, so I'm going to copy it from here, okay, the original design, okay, click on the name over here, Dexter for all on your keyboard and drag it over here like this.

Alright, now right click, move to page which one mobile like this, okay, now come to the mobile version, zoom up, find it.

Where is it here Is it okay? So I'm going to keep it over here at the top, and I'm going to move it.

Both of them live in all these design building designs over here on the very right over here.

Okay, let's zoom in over here.

Click F on your keyboard, select the iPhone 11 Pro max like this, okay, drag it over here like this.

And said the border radius, I mean corner yes to 40 over here like this, enter.

Now select this layout grid, say two columns over here and then count will be one enter.

So the margin 20 pixels over here, enter.

All right now just just replicate the nav bar by Alt on your keyboard.

drag it over here like this.

All right.

Then release it like this and then alt h to center heart, the center horizontally like this.

Okay, there we go.

So far, so good.

Now look at this desktop design over here, okay? So out, drag like this, okay, keep it over here, then and then hit k on your keyboard, okay? Okay, and then drag it like this, as long as it doesn't get shrunk like this a bit like this one, the original design.

Let's make it, let's make it a little bit smaller like this, and then click on here, select this, or Alt h on your keyboard.

There we go.

Keep it a little bit up like this.

Alright, looks good.

And now select your frame over here like this, and then hit v on your keyboard, okay, V, and then drag it to the very end over here like this.

There we go.

So far, so good.

Now we're going to replicate the cards over here.

Okay, so how many cards? Do we have? 123? Sorry, 12345, the five cards? Not six cards as the original design on that on the text version.

Okay, so.

So do you recall that how we made these cards over here? Okay.

So what will we use over here, the same as this one over here, you see this design over here, we made this, the same as this, we're gonna use the auto layout.

How do I do this, like this? Look at look, follow me.

Okay, I'm gonna select all my cars over here, like this shift plus a, or right click and add auto layout like this.

Look at this little button over here.

Okay? It is horizontal, say to vertical like this look, it became designed for our mobile version, you see this? Okay, I'm going to keep it over here like this.

There we go.

Alright, and then I'm going to resize it by hitting key on my keyboard and resizing like this.

As long as you see this one, as long as this one, this line doesn't align with our layout grid.

Okay, like this.

There we go.

Oh.

And I'm gonna keep it over here like this.

And we're getting this cards over here.

Same thing for the same thing, obviously, all of them together, and then shift plus a, and then click this over here like this.

All right, now keep it over here, like this, and then resize it like this.

Okay, key on your keyboard, and then resize like this.

Actually, it is very big.

So I'm going to keep it over here like this.

Now, what you're gonna do is do remember how I resize this first frame over here.

Okay, on our offered courses section, this one, do you remember how I resize this card according to the original design, you're gonna do the same thing over here.

Okay, you're gonna first or resize this card, and then this two, and then you're going to resize these two cards over here, and whether we don't need the last one, okay, so like, we can easily I will, we can delete this one, okay, like this still it, we have two cards over here.

Oh, by the way, we can also place it over here like this, there we go.

Now, what you're gonna do is you're gonna resize these cards, according to the original file over here, I mean, the original designer, I showed you how to do it right over here, I showed you how to resize it according to the original design.

So do it on your own, do this section on your own, because I truly believe that you can do it.

And regarding this footer over here, you don't have to recreate it again, because it is a component.

I mean, this is the original component over here, wait a minute, this is the original component over here.

And this one, wait a second, this one is an instance of the original document.

Okay, so this is just an instance.

Okay, just copy it from here all and then drag over here like this.

There we go.

And if in case if we want to change something over here, just changed the original document, okay, just changed over here and everything, I will all the children will get changed according to the parent component.

Okay.

All right.

Now let's look how to make this contact us for Okay, there's one over here.

So we're going to create I mean, we're gonna move this to the very right side like this, select all of them together, and then drag to the right side like this.

There we go.

And then come over here and hit F on your keyboard F, you're gonna click F on your keyboard and then select this iPhone 11 Pro max like this, give it over here.

And what was the corner DSC room, we're for the Texas So hey, 40 over here, okay.

40, enter that oralia I mean layout grid over here, say two columns over here, like this columns.

And let's set one, enter, and over here, right in the basis of margin, there we go.

Just copy the nav bar from here because we made it once.

All right, and then what you're gonna write is, what you're going to click is this one, Align Horizontal Centers.

There we go.

Boom, keep it up at the top like this.

There we go.

Or you can just use your mouse and move it like this.

There we go.

To beat over here, and just copy this text from here.

Click and then drag like this.

Alright, and in order Take it, I mean, in order to keep it at the center of H on your keyboard, Alt H, move it a little bit up like this.

And if you want accurate measurements, just select this and also on your keyboard and drag, keep your mouse over here, this 15 pixels, okay? So I'm gonna keep, I'm going to click over here, keep my mouse over here, like this is 30 pixels.

Okay, so let's move it a little bit up.

So how to do it, click over here and then hold shift on your keyboard and press up like this one, too.

Okay, now let's inspect, click over here, alternate keyboard, look, it is 10 pixels of gap.

So click over here 12345, I pressed five times the arrow down button over like on my keyboard, like that.

Look at that is now accurate measurements.

All right, now copy this line from here as well out, drag over here like this, okay.

Then alt h to center horizontal.

That gives you the we're here at the bottom of the get in touch text.

All right, now how to recreate them.

Remember where our assets it is over here on this assets page.

All right, not this one.

This one over here.

Wait a second, this one.

Okay.

So I'm going to select all of them together like this, and then out drag like this.

Then select all of them again, right click move to page where Come on, tell me it's mobile.

So come to mobile over here, zoom out to see where is it here Is it okay? I'm going to select all of them together like this and then select k on my keyboard and drag or select shift on my keyboard, okay, and then drag like this.

And that is going to get resized like that.

Okay, I want to bring it over here like this, within that.

So it's quite big compared to this one.

You can, you can also inspect the icon size like this control click like this, you can see that it is with 50 pixels.

And the height is 38.09 pixels, okay? So you can do that as well as what I'm going to just use my Scale tool, okay, so I'm gonna select all of them together and the hit key on my keyboard, and then scale it down like this.

There we go.

All right, now now what we're going to do is we're gonna select this phone over here like this, okay, I will, we're gonna make it horizontal like this.

Okay, now, let's copy the text from here, okay, out, drag like this.

Double click out, drag like this, okay, or just click over here, I'm in control, click over here and all, no sorry, out, drag over here like this.

Or what you can do is just control click over here, like this, and then alt, drag like this.

Alright, now what you're gonna do is look at this very carefully.

I'm going to select both of them together and take the help of home auto layout.

Okay, the boss is over here, kick it over here, like this, the plus thing.

All right, now keep it at the very center over here, both the text and the icon like this.

There we go.

Now let's keep a gap of 30 pixels, okay? between our icon and the text.

Okay, the same thing for for here, shift a, click over here and center it over here like this.

All right.

Now, how much was the gap 30 pixels, okay, see, like this curly, enter, go.

The same over here, shift a, how much 30, enter, see like this, keep it at the very center.

We're here.

Okay? Now, so far, so good.

It looks like this one.

Okay.

Now, now if you notice carefully, then you can see that this text are not aligned to a single line.

Okay, so let me bring my ruler over here like this, like clicking over here.

And then rulers over here like this.

So I got my, so I got my ruler over here that I'm going to click over here and then keep my ruler over here like this.

So I'm going to keep it over here, okay, to this line.

Now, if I zoom in, then you can see that the text is over here, okay, according to a ruler, and what this text does it align with a ruler over here at the same time, this text doesn't align with the ruler over here.

That's because the width of this icon width of this icon and the width of this icon is not the thing.

So in this case, what you're gonna do is you're gonna just remove that oralia How to remove the auto layout, okay, click over here, and select this group.

And then what you're gonna do is you're gonna click this and then Ctrl, Shift g on your keyboard, remove that group.

Now, both of them behave like individual elements.

All right, same thing over here, remove the frame to group and then Ctrl Shift key to remove that group.

Come over here.

Select this frame to group Okay, Ctrl Shift G, remove that group.

There we go.

Now what you're gonna do is select all the text over here like this, okay, and then use auto layout shift plus a like this.

Now, our texts are at the very center here, according to our what according to this ruler over here, you see this ruler and you see this continent we're here.

Now if want to even also use this one and keep it over here, okay? On the left side of the horizontal line like this.

All right.

Now regarding this icons over here, you can do the same, you can just use auto layout as well, by clicking all of them together, I mean selecting all of them together and then shift plus K.

And then we need to keep it at the center both horizontally and vertically.

So click over here and look like this.

Alright, then, so far, so good.

Okay, now we're going to select all of them together like this.

Okay, and then Ctrl G on your keyboard to lock the position.

All right, there we go.

Look at that.

It looks very nice.

Now click this original document over here like this.

Alright, and then alternate keyboard, put your mouse over here like this, how much is the gap between our address and this text? 46.

There's duplicate the same as well.

Click over here and then keep it over here like this.

And the alternative would give it over here, how much how much is this? 53 so you have to go How much? Nine more steps? Okay, so he nine times the up arrow sign, okay.

123456789.

Now let's inspect Okay, click on here, Alt n and then put your mouse over here.

44.

Wait a minute, it was how much? Sorry.

46 Oh, sorry, I moved to pixel up.

So I'm gonna go to two pixels down.

So click two times the down arrow.

Okay, one, two.

Now it's gonna be calamy exact measurement.

Okay, so click on here out and put it over here like this.

46.

There we go.

Now let's create this form over here.

Okay, so let's inspect the first one.

Okay, click Control, click over here like this, how much is the height 63.9.

Let's consider 64.

Okay, so come over here.

And if you want to remove the ruler, what you're gonna do is you're going to click over here, and then select this rulers and the rule, go away, like that.

Now hit r on your keyboard and drag it like this, how much was the height? 65? Right.

64.

All right, so I'm going to click over here and write 64, Enter.

And I'm going to keep it over here like this.

And I'm going to drag it until I didn't cover the entire width of one layout.

Great like that.

Now what is the border radius corner? Yes, is 9.36.

So of the RTL design, so I'm going to click over here and write line boy 9.36 over, hit enter, there we go.

And then at some stroke, like this, how much three, enter? Not sure sorry, let's consider it to enter, there we go.

Now, you can see that this form at the top, and over here are the similar, I mean, similar identical.

So what you're gonna do is you're gonna alter your keyboard and drag over here like this, alright.

And we're getting this one, the same over here as well drag it over here, like this, and then drag like this, there we go, boom.

And listen, let's remove our oral layout and the layout grid from here by selecting this or you can also remove it permanently.

But don't do that.

Okay, just select this one.

And it's going to get removed, I mean, the oral layout, so comment and whatnot over here.

You see this forms over here, select this and remove the field.

And it's gonna get white just like our original document over here.

Okay, the same for this one.

And do the same for this one as well.

Now I'm leaving the rest of the work to you.

What you're gonna do is you're going to place this text you see this text over here, this text is text, this text and the button on our practice case over here.

Okay? I believe that you can do it.

All right, all right.

Now do you remember our last frame over here? This is the same as this one.

Wait a minute, this one this frame that contact us frame and this one, okay? The first frame over here, okay? The process is the same.

You have to do it on your own.

I'm leaving this I'm leaving this to you.

Alright guys, personally, I think that this video became extremely long.

So what kind of content do you want? Do you want very big in depth tutorial videos are short videos, let me know in the comments down below.

So ladies and gentlemen, we're done with our tutorial.

If you liked the video, give a like, share with a friend and feel free to subscribe.

Till then I'll see you in the next video.

Bye bye