Figma UI/UX: Entwerfen Sie einen Website-Helden-Abschnitt mit Prototyp und Animation für Web und Mobile

1. Welcome to Hero Section Landing Page Design in Figma: Converting websites Eero section with animation, motion graphics, interaction, responsive design, good user interface and user experience both on web and mobile is the aim of every brand all over the world to get more customers and clients, and that makes them to hire the best and professional UI and UX designers. Hi, my name is adria Pandy. I am instructor for discourse. I'm going to teach you step by step how to design and create an interactive and responsive converting Eero section for web tablets and mobile, with the latest trending designs in the UI UX world, which will make you stand out from other designers. I will start by navigating you through the Figma interface, teach you wire framing in Figma, and moving to designing real world projects with practical application for different brands, which include food brand, tech brand, fruit brand, and real estate brand, both for web mobile and tab view. I will teach you Figma prototype, animation, interaction, motion design, at layouts, variables, components, resources, ins, icons, fonts, colors, tools, City bot ins, shadows, how to cut out images, automatically and out to blow images, and so on. Also how to export the design result after completion. I have made the project files for this course, including the fonts I used throughout the course, available for you in the resource files. And also, you have an assignment at the end of the course in order to practice all that you have lent in this course. This course will help you take your U I U excuse to the next I will see you in the next lecture vio. 2. Getting Started: Guys. Thank you for taking this course. Before you begin, you should download the resource file for this course. These are the resource files for you to download this resource file. You will find the link to the resource file in the class description and project description. You click on the link and download the resource file. You're going to download ZIP file. Now let me take you back to the Zip file, how exactly is going to look like. It's going to look like this exactly. Right here, we can actually right click, then what extract files. Then it's what you present, then it's extracts. Then we have it perfectly. What do you do? You double click. Yeah, we have it. Here we have it. You double click again, we have everything we need. We have the project files. Everything we need in this particular figma course is here. From the mbuger to the leaves to the logos to the images we need to use to the arrows to the logos and everything we need to use right here. Everything unique is right here. Then let's go back. Then we have also what the exercise file. That is at the end of the class, you need to practice on your own. You're going to be designing a creative unique. Ero section for a tech brand like you know a brand, a brand into tech and also and also for a school actually where you're going to create an ero section of the landing page for them using these two images. Those are the assignments. Those are the assignments. Then moving here also, we come over to forms. If all the forms are used in this particular course, everything is right here. Prevent have the forms, you can just install the forms here. Everything is here. Everything is here in the resource file for you. Okay. So, let's go back. So this is everything about the resource file. So go on and download through the link then install it through the link, then download it straight into your system. Then we begin. I'll see you in the next lecture video. 3. Figma Interface - Part 1: This lecture, I'm going to be teaching you the Figma interface. If you already know how to use the Figma interface, kindly move to the next video, we're going to be starting with the project wire framing. Now, firstly, you can see, you can see that Figma actually is divided into panels, you can see from the top to the left and also towards to the right. So coming over here, we can see this is what we call the menu bar itself. We have file edit view, object text arrange vector plug ins, widgets, preferences, libraries, opening destop app, and so on. Actually, if you click on back to pies, it takes us back to where our normal pies are being saved before we actually go into the interface. This is what this is the menu bar. Coming over here, we have all these as what we call the tuba. We have this as the tuba All these as as the tuba. The tool actually we use all around. In FDMA. We're going to learn how to use the most essential tools for us in this particular tutorial. We have to move to the scale two. Now we also have the frame the section, the slide. We also have the rectangle two, the line, the arrow, the ellipses. Polygon, star and so on. We have the pencil, we're going to which we're going to use in cutting this out. Also, we have the text two, which is only one. We have the resources, we have the components, the plug ins, the widgets. Also, we have the tool. Also we have the tool, and also we have the comments. Whereby actually phrase we can actually put it over present something here, then what comments. Probably the designer wants you to change something probably one of your clients. We'll just tell you, let's put something here actually. Let's put exactly. Change the contact. Okay. So let's say. Then presses enter, then it's actually stays there you can see. Now, chang the contact to about. The person would actually understand. Well, actually, we don't need that actually here. We don't need that that's just an example. Okay. So actually, I can take this away by just coming over here clicking on this. Sorry. Coming over here, right click then what's comments. Good. So now, Another thing we should understand here is that we can change our title. You can see it is untitled. You can double click twice. Then change for example, towards Boger Sorry Boger press enter. You can see. That is one. Or you can come over here, select this then what rename, and it's re names. Fine. So just press enter Boger for example, for example, is an interface video. Okay. Now, understanding the tools we have actually which we're going to lend the most essential words in the Sutorial. Left hand side, we have three different types of important options in feed M. Firstly, let me go to assets. I'm coming back to layers. You can select this and try to search for something actually. The only thing you can search for something around this particular bar or panel here. But I don't need to search for anything. Just come over to assets. Assets here actually, when we call something asset and liability asset are things you keep. For future purposes. Come up by this, we have pages. That is set, things that have been created by FDMA themself. Why you just try to select something like this. It pops up, you inst just like you want to copy whatever has been made before. We're going to create things from scratch. We don't need to copy from anywhere where you can actually copy from other persons work, but we are not going to do that here. Let me try to collapse this, expand this UI components. That is components you've made. Things you've made. When you make a particular thing, you keep them in the components in the UI components. For you to be able to use and reuse them, that we call them assets. Things that have been created by. By FDMA, it's left for you, you can use them if you wish. You can see things like this the button. But we're going to create everything from scratch ourselves, except except from images, icons, and some other things we have to import. We have to use, we have to take into FDMA. Now let me delete this. Press deletes on your keyboard, sorry, delete. Good. Now let me collapse this. That's for assets. Whenever you are actually saving anything as a component, which I'm going to teach you in this tutorial. Saving something as a component. Saves here. It saves in the UI components here. Let's go to page. Now we have to understand something consigning page. When you're talking about page. Now, this is page one, or the projects we are creating in this Figma tutorial is going to be created in just one FDMA. We're not going to open another tab. I just open another tab and click in a new tab, we're not going to do that. Everything is going to be in this one tab. What do we do? We have four projects to create to design. What do we do you create a new page by clicking a plus icon. That is page two, then what then you can click here, it's done. This page one, the first project, then you pay two for the second project, that we Okay. Click on the plus icon again. You can present enter, page two, page three. Again, you can present enter page four. So the first project should be the first project should be in the first page, page one, second prog page two, third projects. Page three fourth projects. Page four. So that's how it will be well aligned well structured just in one FDMA tab. When you send your work to your clients, you make them know the phosphor on page one, the second page two, the third and pagthe fourth and page four. Now, that's it for the pages. And if I want to go back to page and just come s page and you can see page one that this is telling me something is there. You can see when I over around this, you can see something actually happened here. When I select this, what happens, it tells it's selected you can see it selected. Now this leads us to where to the layers panel itself. So when I select on the layers, you can see, it's been actually it's been selected, come, click on this, then click on layers. Fine. You can see it's telling me that there is a particular thing. Pavent let me just click on this deletes. Select this deletes, you can see it becomes empty. That is why in the first place, I when you open Figma and you see the interface, it's empty until you have something there. But I decided to paste this here exactly past this here so that we can be able to see what is really happening. You can be able to see something here in the layers. Let me delete it again, you can see deleted. Delete, can say nothing is here. Assets something page, there's always something. But you can see, actually, there is nothing in the layers. Let me contrive, contrives to paste. It's back there because I've copied it into the clipboard already. Now we have this this perfectly. Now, select this. You can select this from here or you can click outside or you can select it from here. It's become selected you can see. Normally before there is nothing. It's just white. When selected, you have a light blue color. Highlighted over it. You can see the light blue color over here also. You can see very, very perfect. Now, coming over when you can see, when you come over, you bring your mouse, your cursor over, you can see, it's actually shows something like this is unlocked. You can lock it. But when you click Oden drag, you can see, you can't even change its position, you click Wooden drag. It's not even selecting, you can see, not selecting because it's locked. What do you do you unlock. That one that you can click Oden drag now, you can see, very perfect. Contra it as to what to do. Don't forget, you can click. You click first when you click. Okay. Most times when you click on this layer. When you click on this particular you're clicking on something else, you're not clicking the frame. Because you need to understand that this particular area. Okay. Is the canvas. Whatever you create it is what we call the frame or some people call it at can actually find it over here, come over frame. Create a new frame, you select this or use a shortcut F. Now, you need to understand that. This is the canvas. This gray stuff is the canvas. You can create multiple things. You can see as I'm zooming in and zooming out. Before you can zoom in and zoom out, you can use your middle mouse pot which is scroll scroll up, it goes up, scroll down, it goes down. Point able to zoom in perfectly. You can actually come over here to this place zoom in. Okay. Come over here. Zoom out. Come over here, Zoom fits. It takes you directly directly, no matter how fight is, click come over here, Zoom fits. It's fits perfectly for you. Okay? So we have Zoom to 50%. Zoom 200% Zoom two 200%. But all of these are just like you know, it's just manually automatic how you do it automatically. It's a short cut. You need to understand the shortcut. What do you do? Whatever you put your cursor, prevent put your cursor over here you can see, let me say at the global here, the ambger. I want to zoom in the ambger straight, you can see it's been selected. It's not composite selected. Just put a cursor here. Then what do you do pre on control or command. It's a mac command it's windows, control. Press on control. Then what you use the medium mouse, then what zooming you can see. It goes straight to it very perfect and very fast. You can zoom out again. Zoom out using this scroll, medium button. If I want it to be on this, put the co present control, then zooming. You can see, very perfect. You can see coming to the customer click on control, then what zooming? Very perfect. If for example, no sign up present control. The use the medius button, then what zooming perfect then Zoom out. It's perfect and nice. Now use the medi button towards zooming, perfect. We have that, very good. 4. Figma Interface - Part 2: Now, you need to understand that this is a. If you want to selected this, everything becomes blue light blue. E for example, when I select this, for example, you can see the bog the Boga bytes, you can see, it's actually showing there is an highlight on it. Let me select the logo itself. You can see the logo has been selected, you can see. It shows that whatever you select, everything is actually. It's no composite. Let me click outside here. I composite select. You can select from here. Then it shows that you've selected. I can select this. You can see satisfied clients, I can select this. I can come over, select this. You can see our menu bots been selected, that's bot in two. We have bottom one, you can see, we have the minor theme. You can see that the main theme, you can see very perfect one. That is a solid we have there the sign up, you can see it's been selected over here. The logo been selected. You can select from here, the layer panel or select in the frame itself on the board. That is the layers actually houses, eps, whatever you've done. In the art board or on the box in the art board. It's actually houses, whatever you've done in the in the art board for you. What we need to understand, let little bit to up little bit in the middle bottom I try to know scroll using a scroll in. So what do we do now? We need to understand what layers really mean. Now, coming over here, let's take, for example, we have rectangle. Let me select it because whatever I pick, when I make a new layer, it's actually creates on top of every other thing. Even if I had click layer, if I try to create a new rectangle, which is the shortcuts are, I use shortcuts mostly in this, in the storia. Shortcuts are without present, let me just come click. This has been selected. Just press on R on your keyboard. You can see it goes you can see. Normally, I have this. The move is V. Well, I want to come to select the rectangle. I'll use I'll use the shortcut which is. You can see the blue eyeless would jump immediately to this place. I select the I'll present the R now. You can see how present. You can see fine. Now, what whatever creates actually shoes up above, any other layer which is here. You can see rectangle three. Very perfect. Let me use under the. The O is a shortcut forwards for the circle you can see. Let me select, you can see. Let me click and select, you can see. It goes above. That is it's been laid. So lay something above another thing. When you lay one thing above another thing, or you create a new thing, it's lays on top of another thing. A new thing lays on top of on top of another thing. That's what layers are. Okay. So it is not difficult just for you to understand, it's been laid layers and layers. Another thing you should have to you can understand. Let me try to, you know, let me try to give this a color on its own. I try to give it red, for example. Let me try to give this, you know, to give this let me say blue. We're going to lay above this, don't worry. Let me see this type. Good. Now, we have this. When I bring this when I bring this here, you can see the red is actually on top of the blue. Why? Because the blue is here, why the red is here. I can decide to bring this blue over the red out it. This is the blue selected. You click and drag it. You can see that's you know, that's dark dark but a little bit, a little bit it is dark. Okay. If I say that dark line, tell me this is exactly where you want to put it and it goes above. I can decide to bring it downward. If for example, you can see, when I bring this here, it's on top of what. Of our design of frame. I take it back of the frame I do. You can see exactly, you can see the name detopx I can change it by double clicking here. Let's say mboger also bogerre enter, you can see it changes here. I can also change the name here. Double click. Let me say new boger It changes here also, very perfect. Now everything I'm seeing actually here, it's under the aboger. I can decide to collapse this collapsed. I can it becomes very neat. I can decide to because when I set on this, it expands itself. You can see show me, this was what you pressed, sorry. This was what you pressed. I selected the bugger. Oh, show me. Now I can decide to collapse. You can see very neat. Now, this is on top because this is actually on top of the layers. When I click hold and drag this up here, you can see this goes down. Very perfect. That is exactly what layers are. Okay. I can decide to click and let me bring this back here. Can click and drag this back down, you can see it goes back. Whatever is on top here goes over it. You can see. Sorry it's going to enter, it's going to click into its fig understands a lot. You can see that. Now, I can try to collapse the amber again, click mistakes. Click Old and drag it up, you can see it's above the two, even above the third one itself. You can see perfectly. When I try to click d and drag and bring it down, it goes below everything. That is actually what layer actually portrays. Now, another thing we need to understand is that is that the next panel or bar we have here is called the inspector bar or what we call the properties bar that is. Whenever you click on anything, it shows the property of that thing or options of that thing. You can see when I selected this, show me that the field for the color for this is blue with 100 present opacity. When I click on this also, when I select this also, you can see, you can see show me that this is red. You can see when I select this also show me that this is gray. It's also showing that this is what's visible. It becomes now I've selected this, it becomes invisible. Then click again. Then click again, it becomes visible. Also, all the other properties actually depends on the selected objects. Now, let me delete this and this and this select multiple things, you just select this present sets, press, select and select this then delete. Now, going straight back to this project. When I select on this asp, you can see, everything is just like one to three for like four or five rules. When I select on this burger forsm you can see. It shows me the property. Whenever I want to D change some things to it, you can see, let me just zoom in here, select this black color, sell this black color and change some red you can see. You can see the changes you can see. Like blue, going like this, you can see the changes. You select this force and come over here so you can see it's changes. That is actually it's the property. I mean just control or let me just select and change it back to black, click and drag down here or down here e two. Another thing you can do is just instead of me zooming in and zooming out and doing like this and doing like this, I can decide to use the two. The two is here. You can select this or use shortcut, which is H. You can see when I select this changes to an end. Let me go back to V, which is a move two. It changes exactly. Or I can press and old. I can press and old the space bar. Press the space bar, then you can see it shows the. It must show the end. You press on the space by d then click the left mouse bot, click old then drag. You can see you can press the control, zoom out. Space bar, old click d drag move around something like this, you can see. Click d and drag left mouse bot, you can see, perfect. So I can come over here. Zoom to fix. I don't use it mostly actually. I use the control control the middle coon scrolling scroll out, you know, it depends on meets it's mind. Use the space bar, press, click to the click and drag the left. You have to understand, you need to press space bar. Then click the left mouse button, click Old, then drag it. Still pressing and ding, the whats the space by you can see smoke it's tu was actually here before. For it just zoom in like this then press on the space by clicking drag does icon or just automatically just press on H, then you click and drag, zoom up zoom down, press control zooming zoom out. But I just prefer to use the space by its very long. It's it's okay for me. Select the V, that is from it jumps straight back to the move to very perfect. Now we have this very perfect. Now, once again, you can actually select on this. You can see selecting this brings out the property, you can see, there is a green color black color, it tells me that there are some front that as the green color, some fronts that as a black color. Figma is very good and perfect. It's not the things a lot, it tells us exactly what things are. Now, selecting on this so it prints out this property, selecting this also prints out this property. Selecting this also the leave the leave we have. Brings up this property contrast. So that is very, very perfect. That is about a property bar actually, we've talked about the to bar where the layer asset, the pages, and the properties are called pectect panel. Actually these are the things you need to know consigning interface. I'll see you in the next lecture video. We're going to be starting the projects. 5. Wireframing - Part 1: This lecture, I'm going to be teaching you wire framing, starting from the first project to the last one. Now, firstly, I will change the title just come over here and just rename. What do I press wire framing. Good. Nice. What do I, what is the next to do? Now we need to understand as I've said, this is what is the canvas to crate what creates an board or we call it a frame. We come over here, select this arrow. If you select on this, it's going to just select this. But just select on the array. It's going to pop down section, we have slides, we frame, and the shortcut is. I'll be using shortcuts often. Often. Select frame. When you select frame what apps, you see the property of that particular tool is somewhere. Okay. When I select this, you see the proposed changes you can see, as I've said earlier. When I select this, you would see this also. So Now, we have this. What are we trying to do? A trying to make projects for dektop Macbook television presentation, watches select as you can see, W is apple watch, paper, social media, feedback community. But no, we're targeting is what dektop. What do I do is a wire frame is a TV, dest desktop and likes. I would prefer to choose destop B it's just normal as wire frame is. Select destop Now it's been selected and just control present control and control. Then use the middle mouse put in to zoom in. As I've said in the last video, you present control, use the middle mouse put in to zoom in. Zoom out, it actually pays more. We need to understand what wire frame is. Wireframe is a blueprint, a visual guide that represents the skeletal framework of a website. That is the blueprints. The thing we actually in a traditional way, we try to sketch something out that actually gives us an idea that projects for us how a particular website should be. It's just like a sketching a traditional way, using a pen and a paper, but we're going to use a desktop exactly straightforward. Using a pen and paper, sketching on your tab and the lights in order to have a blueprint, a visual guide, a visual guide of how a particular website would look like. It'll actually serve as a blueprint, actually serve as a guide for us to know what we're going to create. So we have. Four wire frames we're going to create here. The first one actually consigning the first website we're going to be creating. I want to go to the traditional way as I've said earlier. I'm going to use the pins tool, not pain right now, but pins two. The shortcut is Shift P. You can come overhead. Click on this R, you can see S P. This is a pencil P, why the short pencil is shifts P. Now we begin. You can see if I click den drug like this, you can see, pick on the drag, click Oden drag, you can see something like this. That's how it is. Just click den drag something like zigzag. Just contrast that's to do. Contra contrast. One. We begin, not add for it to be able to use the mouse, hold it perfectly because it's a sketch. It's not composite straight. So if you're using a tablets, fine, there's not a problem. So you can start with the circle, we're going to start with the logo, click track Most times g also, what do you do if the brand name, something like this, you can control Zigzag. Can I have perfect? That's a post 91. Now what do we do? For the first project, I want to make sure that you on the product, the service, the contacts, and all those things up there actually. What do I do? I come over here. And like this. All the contra set back. All the economic it straight, you click, you click drag, press shifts to make sure it's strat. You can see momictratsw that it's a sketch. It's a sketch. Let's look traditional. Let's look ron that's how we feel it to make sure. This is really a wire frame. This is really a blueprint, a visual guide, so contrast. I'll try to draw with mu and tries to be perfect in a little bit. Okay. And the controls it and it's okay like that, but I prefer to contro it. So the platform that we have the log in button around somewhere, the log in, not the button, it is a text button actually to be clicked as to log in. And we also have the sign in the button, so Good. That's perfect. Now, we have the main theme is where the team are going to be the main theme. You can see. Let me just say three lines. Three lines. We have the minor around just say two lines. Okay good. Now we have the button itself. Let's come down a little bit the button. The first one you're going to be having two buttons. Okay. Buttons. The evidence, we want to show some customer some client satisfaction stuff. So I have some wordings right here also. So something like this. Apart from that we have an image, you know, images can be circle form or, you know, rectangle or square. But I make this rectangle. I do not think to understand. Let me confuse it. I think it's quite too much que to Yeah. Something like this. So when you have an image, you need to show like we have bots. Bot should be in a box like. So when you have an image, it's going to be a very big bot. So what do you do you try to put an X stay shows this is, this is an image, very perfect. So the first one we're going to be designing. The first one we're going to be creating, it's going to have a particular type of background. So the solid background. So the background actually something around. Come down like this. Sorry. Cora it. Can I feel leave it like that because it's sketch. Come down like this. Let's come down like this, then it's entering into this space, so I don't want it to be. Like this. Come down like this. Good, perfect, then calm down like this. Very, very perfect. This is a first sketch of what we're trying to create. I actually make sure that the ones come down a little bit. What do I do? I press on V, which is a move two. You can see. You can see the move to select it. You can click from outside, click drag try to select all the things here. It's being selected. Then click, bring them down. You're going to make it st press on shifts, actually make it straight. You can see. That's perfect. Okay. So that is exactly the first wire frame. So now let's move to the second wire frame. 6. Wireframing - Part 2: Now, in this lecture, I'm going to be creating the second third and fourth wireframe, very first, not difficult at all. I can press and contro then use minimize button and zoom out a little bit. What do I do I click on H can see changes to the icon. Or as I've said earlier, let me go back to V, that's gone back to the move two. I most times I like to use the space bar. I press on the space bar, Spres and old, click the left mouse potting, click Old and drag like this. Nice one, go back to the move to be. So what do you do? For you to select this convas itself. When you click d and drag like this. Nothing is happening just highlighting things. You click on this cavas double click nothing's happening. So what is happening exactly? And press on shifts. Press cod sheets, click d and drag the left mouse spotting. You select this particular thing, just like you selecting this, selecting this, selecting this, you need to go straight to this place. Destop can try to watch the click on this, let me come again. You can look at this destop one. You can see over just bringing a cursor on its what happens on this det, it's ylights. Now moving away the cursor, the eye light goes away, the blue eye light goes away. Bring it back, it shows. It tells you what exactly do you want. When I come over and select this, You can see me, you can see all these been selected. That is everything has been selected. Compared to you just selecting these and selecting this. When I select this, everything has been selected. So when I click when I come down here and click and drag it actually moves everything, why it's been selected already. So let me control that. Again, B the courser click outside here, nothing has been selected here. You can see. When I select this, you can see Okay. Let me. Sorry, select this line. You can see. It's been selected. Second circle can see the logo has been selected. When I come over here, it's been highlighted. When I select it, everything has been selected. So now what do I want to do? I want to copy this and paste it to the right side. So what do I do? I'll select this first. Press on press on. You can see of present, you present old. Then you click anywhere around it because the frame, the board is being selected, then you click old and drag it outside. Why drag in outside you can see, if you move up down left right, it's not actually in proportion with this. You can actually look at this and do like example like this. You can see the line, the red lines. It's in proportion, fine. Make sure you trace it or what do you do? Still pressing on your hands still on. Then you put automatically put another finger automatically put another finger on on sheets. I drop you can see. If you go up and down, it's not going to change. It's still going to be proportional to the first dext one. So you drop the mouse first before you drop the keyboard put. That's perfect. What do you do? You try to come over Zoom press pres on control and use the minimus zooming double click here. What do you do? Wire one, press enter. Control Zoom. Space. Press space. Click left mouse button, then you click den drug. Press space, old press space around somewhere. Good. Don't forget, you press on space old space. It changes to the course of changes to an icon. Then use the left mouse button, click Oden drug. None. Double click here also change words wire frame is. Now what do we do? We try to, you can click Old and drag from outside. Forget you click Old and drag from outside. Then what you delete this you decide to delete them actually, you try to make some adjustments to them. Okay. So what do you do? I can try to delete this. Delete don't call it. I'm now in the move to shortcut. I've set the move to Shortcut or you just click here, move two. Good. Now I'm going to make the difference is just that the product services contact won't be here. So I'll just click here. I'll click and drag to the right. Why doing that? I can press on shifts to make it straight. You can see. That is just to bring about some differences. So that's how it's going to be here. Apart from that, everything would actually look the same. But this click wood and draw from outside this wouldn't be there. What would actually be included here to make things different and unique. So the first now, we don't have any solid just like this. No solid shape around here, just like this. And also the contact and the s is normal here is now here. That's one difference. And the difference is just that concerning this. You can see. Firstly, this is squire frame one collapse. You can see. You can try to make it invisible, try to make it visible and I can try to collapse. Look at this. Look at this triangular area, select it. Everything collapse. You can see it expands, it's collapse. Now go. I'm on the wire frame. So what do I do? It's very very simple. Now, This wire frame to is a dark background, a dark one. Actually, when you click and drag this to select Image so I will know in the background form, a dark background. This is actually a light one, so this is a dark background stuff. So let's leave it like this. So I want to paint the wire frame. I'm not going to do that. So now what do we do the satisfied customers clients here. But this wire framing two, I'm not just going to write 200 plus clients. I'm going to put the logos of the clients here. It's going to be here. So they're almost like more than five. So I think around eight to. I'm going to go back to the pencil to, which is what shifts and your keyboard. That's a shift that you can see. Come here. So the pencil to you can see, very perfect. What do I can decide to zoom in control then your mouse board and zoom in. I'll trust it by. Then like eight. That's one. I try to keep on creating and creating and crisess becomes eight like in the gmular box and everything. But I don't want to do that on a copy and paste. This is perfect immediate already. Pres V cyclic den drug the press copies. Then pres sheets to pockets that's cod drug that's three's five, six, seven. Let me try to bring this around here. Let me just try to Sorry, select this first. Hand. Select this present sheets or just click it, select this, click, sorry. Present sheets. C in drag like this on. Then I can actually click and drag this is present on odds. Is the last 20 year because black in proportion with this. You can see very, very perfect. That is this is a dark background. So a copy and pages select this click. I've set this wire frame two already. I set it from here, the name, click d and drag down present odds, bring it down here. You need to press on ships here, bring it down here. You can see it's in proportion. You see the red lines, then drop. This is a dark background fine and this is a light background. The differences between the two is that It's a different brand. Exactly is a different brand and tile and this is a different brand, and this is a dark background, a dam, a light team. So it's almost the same thing. We another difference is just that the contact and the lights would actually be what in the middle. So sorry. I'm going to drag them to make it easier. You click did, track it to the middle. That is, you can see the line for the middle. Very perfect. Good. Now the last one. The last one is actually also a dark pg, so then bring this down. You click this, click press bring down and present on ships. Actually, also uses grid lines. You can see perfect, so then drop. This background actually actually be home contacts and everything actually the same way easier. But the image will be deletes, I'll delete this also. Then delete this also. I say that everything together, I just want to make the difference. What really happens? Let me try to zoom space around. What's going to really happen? She the words are going to be around here. That's one. Okay. Let me make it three, let me make it two as the main theme. So this is a minor thing. Min Min we have in that and we have the call to action that is the bottom bots bot one. And this was bad We have that very very perfect. And that's all actually consigning that. Let me use the move to press on the move and the B. Click and Drag alight from here and click and drag it down. You can see that is the middle. Okay. Perfect. Actually, that's okay. That's fine. It's just a sketch. That's fine. So we have that. We exactly will the image It's a background image all compared to compared to the Apgar we have here, which was cut out compared to the bicycle, compared to the Apple here. Then actually is a real estate o section for your website. What do we do? It's a background image. All we do is that we try to make sure we try to show that there is something underneath. So how do we do Shift P, the pen you try to click around the click and drag around there, bring something down like this. Perfect. Then it goes down. You can see are also around there. Bring something down like this. And move something down like this. So it actually shows others, there is a particular image there because it's in the frame, the shows us what there is something underneath it. You can see now you need to understand something that when I copy the wire from one to the wire frame two, I change the wire frame two, as when I copy the wire three, you can see still what person. You can see it's actually Immediately itself changes it to what wireframe three. The changes what wireframe four. That's our feedback actually recognizes a lot of things. Now we have the wim one. This is a blueprint is a guide to the first ero section landing page we are creating the second one. This is the third one and this is the fourth one. It's going to help us guide us being a blueprint, a visual guide for us to be able to create perfectly and nicely the way the website is meant to be. In the next lecture, we're going to start the projects. Starting from the Amberger project, the Amberger brand. I'll see you in the next lecture video. 7. Food Brand Hero Section Design (Beginning) - Understanding Layout: But I'm going to teach you layout. Firstly, what is layout. Layout is the arrangement of elements in a particular design. Whatever design it is, layout is the rangment of elements. Firstly, *** come last thing we did was wire framing. Let me double click of Cname then chant what? Projects. Projects, enter perfect. You can see over here coming over here, we have layers, we have assets and we have page two. Definitely, we had a page one before. Okay. And it's what contains the wire framing we did. Now, what do we do we try to just do coming over this wire frame one, two, three, four f. So we coming over to page two, you're going to start a layout. Then the first design which is for the boger brand. Coming over to page one. Then what do we do? The first wire frame you select forget you don't select this itself. You don't select inside the space itself. You select here itself. You select you select on the title. You select on the le of that at board you can see. So I've been putting, I've been going round and I've been overing when you just over on wireframe, just select it, take away your curso. You can see it stays. So it's been selected, what do you do you control C, that's copy. Or your right click. After right clicking on that particular para copy, you select copy. Coming over two page two. Now, coming to page what do you do? You control or your right click and what's paste here. So it's past actually was a hand just ment before, that was the call to change. Select here and change it to block. Yours wouldn't be like that. So normally it shouldn't be so good. Try to close, sorry. Good. Now, some out present on the control, minimize the zoom out. So we have in the wire frame would actually up and guide us on what to design. So the wire frames are as a guide, the blueprints for us to for it to guide us on what to design. So Another thing I teach you is that instead of using the space by present space by oding it and using the left mouse boting. You can actually use the du mouse bting of of your mouse. Is the medium mouse butting of your mouse. That is the scroll there. So you don't scroll up you don't scroll down. You prese and old it's down. You click it and old it's down and move up, move down, move left, move right. So it does the work of the d two. You can see perfectly so that mostly actually. Let me use that here. Let me put some control them. But I put it at the left hand side. Then do whatever I want to do by the right hand side. I can put it on top and do what I would like to do by wards at the bottom. Then put it by the left inside the pens. If you have no, I'll put it towards, I will put it on top. Okay good. Now we have two collapses Good. Now I need a new frame. I need a new at part. So what do I do just come over to this space. Select this. Select on frame. When you set it on frame, the property shows. You can see when I selected. This was the property. When I set it on frame, just present this arrow or you sing this present this or the shortcut is what F. When a precio cut, you see it goes straight to the space. F, then it changes right. Good. What type of frame do I want? Textop actually, let me collapse. Let me expand destop actually. Now, destop is being selected. Then what you select destop again. Second dektop and it shows perfect. These have been selected already. Click Oden drag mic in proportion, you can see, perfect. So you can come over here and words Zoom fits perfect. So it's begins here. Before we do that, actually, you can actually use the minimize button and try to drag away, present control zoom in. You want this only to show for now. It's to show for now. That's perfect. There's something we call out grade. But we can't see it right here. It's supposed to be Why? We're not selecting anything. Nothing has been selected, selected and outside the canvas. For us to see the layout grid for it to appear on the property or on the spectral panel, we need to select that spectcular aspect select particular put it works on every pot. Select this. You can see the property shows we call layout grid. You don't select this you select this by now. You don't need that press outside. Go back. Sorry, sell this. Now, what do you select on the plus icon? Selecting a plus icon. It shows the grid. It shows on every art board you have that camas. Okay. Now, it's been selected already. So that's it, it's been selected. You can tually canceling by canceling this selected by selecting on the plus icon. Now, this is the grid. You can create under grid the plus plus grid, but we don't need that. We don't need it can just close and close. Select one. One. We need to change it's option, we need to change some things, some settings. So here we have the layout grid setting. Most of the settings, most of the selections you need to do is being identified by icon. So you can see the minus icon to delete the icon. You can actually select this and it goes for this particular pot. So You can actually set it and it goes, it becomes eating. I find. You can actually set this for some some more options. Actually for some more options regarding the layout to actually press way. So actually, When we're talking about figma in general, it uses different icons for you to know just way to understand what is this icon about what this icon about. Now, second is yeah actually. What do we do first, this is a grid we change we change to colons. You can see. Apart from that, you can actually change what rolls depending on how you want to use it. But I'm depending on colons. Not rows because naturally that is. That is how it has been used worldwide, talking about anything that is web. You basically use column. You can try to use the grit. That is not a problem. Okay. So we have that. So this is count. How many roles do you want there are five rows I want to what naturally we use 12, and that's the highest. Change to 12, you can see that is a step. You can change the color if you like to any color if you like, you know, color is in blue. Blue using yellow or anything. But no, actually, I want to click Oden Drag. You click click click or click Oden drag to the left. That is where it is, or click Oden drag to the right. Red at the beginning, red at the end z You can click click click click click Old and drag around to the end. The original one is default is a default one. Perfect. Leave this as it is 10%, le as it is. Then type type is stretched. But one stretched. Cancer this. I don't want to stretch. I want to center. You can see very perfect, so it's actually step by step. I want it centered. Now, apart from that, I want this I want this 12 columns to have a width. That is the length. Now the right now, the length, how long it should be left and right. I want it to be can actually you can say 100 is 1,000. It's actually that is just like it occupies almost everything there. I don't want it to be 100. Normally, we do have it as wood as 80 90 to 90 and see what happens. It's actually too much because we need what we call, we need to talk about layouts. All out, there is the arrangement of elements in a particular design. There's something we call white space, white space, or we call it negative space are the space given to the elements to breed. The species must be in. It it will make the design look attractive and well arranged. So that is it. Now you just coming over here also, select, let me put it at eight. And this is perfect enough. Here is what is called G. Got is the spaces in between the colons themselves. I feel like I can change this to 50, the colons. You see the gaps gutter Just leave it at 20, is perfect the way it is. Now that is it. But firstly, let me come over here and do click or just double click around here and just change this to aboga itself because that is the first project, perfect. Now we move to the background layer. 8. How to create a background: In this video, I'm going to be teaching you the background for the Amberger brand design. Now let me use the middle mouse button and try to click wooden drag to the left you can see. The layout grid also affects this and also affects my main art board or frame. What do I do? I can actually decide to come over here to hide. But it actually affects only this particular one also. I can click outside here and try to click. Nothing shows up. I have to select one end. What do I do? There is another way we do it actually whereby It's degree degree disappears and affects every other thing, not just this only one both. What do we do? We press on shift, then what press on G that shift shifts plus G, then select does it or you pres on option G. You want to make it show again, or you want to make it visible. You press on shift G again, you can see layout grid visible down here. Then press on **** gayout grid very, very perfect. So the middleme button to drag somewhere. So that is the first thing. So whenever you create a layout. Another thing you should know is you can actually change the color of your layout. Whenever you create an art board. Another thing you should know is that you can change the color of your board. So you can select the title and border. You can see there is the color here perfectly. F, that is the X code for white. I can try to try to delete that. Nothing shows it shows me the color of the worth of the canvas. Well, I'm going to know that there's something else what the ti is two. So I select ti two, then you come to feel how is the color of whatever you. Okay. So now I can select on the plus icon that a fill automatically add twice. You want to change it. If I have the code with me, I can select this when you selected, you put the code D black bla and press. That's DDDDD translates to DDD. But what do I do? I press on this rectangle, select this cd. Just click it once. You can see, click click somewhere, click somewhere, click on green, click on blue, click on purple, red, yellow, and some other things like that. Okay. You can stretch colors like that. Having that with you, but what do I want? I need pat color, the way it is perfectly. So you can change the opacity else, you can click Wo coming lighter and darker going. So depending on the color you choose if it is right, it changes. So it's very simple like that. So I need white. If I need black I can click and drag to the bottom or click drag here, it's white white. It's black black, sorry. But white actually, you click den you click from anywhere and drag it then drop Then you close this somewhere on the canvas. You can see white. That is the first thing. The second thing to know is that consigned is ambger design, Amberger brand design. I actually used a solid to bring about much more effect on the background. So how do rap that I come above that. Present on the control Zoom using minus was in a little bit. Come over here to rectangle. The shortcut is reason shortcuts more often in this stuttera let me just come over here to R T a rectangle set. Click Old and drag, click Old and drag like this. Perfect. Now, after you click w and drag something, spent been drags become successful. It goes back directly towards to the move two which is V. I can click and drag it like this. Okay. I pick drugs inside here. It enters automatically because Figma recognizes what you want to do. I can't click a bring it here. It comes out comes outside and enters into the space can see very very perfect. I want it into here. I want it to enter into here, so So you can see what exactly I want to achieve. Let me come back and you can see, something like this, a nice looking effect. I don't want to be in the middle. No, sorry. I want it to be in the middle. No. I want to be something in the middle can actually bring an effect, but not really what I want. So something like this. Yeah, something nice and it's perfect. It's already it very nice. This way I frame one, let me try to collapse. You can see. I'm bogar Collapse in this amberger we have one element for now, which is this background. You can see when I select, it's been selected. When I hide it, it's been eaten, you can see when I lock it, it's got be taken around. You can see. Only this can be taken around. You can see. When I select on this, it's can be taken around. So try to unlock, can select and try to drag, you can see perfect contrast, it goes back. And when you try them maps, and when you try to the ambuer, it takes everything together. They all together. Very perfect contrast. So I think that's to shot thermiclic and drag it electic. Yeah. I think academically and P. I think that's perfect. That's perfect. Very nice mis put in to adjust a little bit. So we have that, so I can actually present shapes G to see the layout. You can see very perfect. So it's not composites actually aligning with the layout with the layout grid, but I can actually try to adjust and put it somewhere. You can see. Whatever I put it on the line, it'll be showing a red demarcation a red line for me. I actually put it around around Let me see shapes g. That what ames? I think that's perfect Shas perfect actually it's around the notes It's around the notes around here. Okay. Let me see this also. I think park also but I'm going to make some little adjustment so you don't worry, okay, but let me just put it like this. So if it's okay, I would have to leave it like this. But if it isn't, I would have to change it. So control G, sorry, SG. Let's it the way it is. So now, let me give it a color. Let me give it its color. The brand we're actually dealing with is like, you know, a brand deal with mburger with food, vegetables, things that actually is nutritious to the body. So what do we need? We need a particular color. Yeah. A nice green light color. Let me use it like that. A nice green light color that will actually tell us more about the brand. Okay. So I will select on select on this, then come over it. I actually want to make it green, selecting this color, color icon, this rectangle. So I can actually come to green selecting it doesn't mean it's going to change. When you selected here, you have to come and select. You can see any type of green I feel like using any type of green, any type of color you feel like using normal colors red, some nice colors, bring about an effect. But when you're using any color, it must be in line with the brand color. It's very, very important. You should understand that. So The brand actually I want to use. I have the X code. There's something we call cope, something like this. This is when I start moving this, these numbers changes, you can see, it changes, that's what we call xcope all over the world, so a designer. A x code is an the code for a particular color remains it's code. Whatever you do probably designing graphic designing, UX in general, um, w development, whatever, whatever. The X code remains the X code. So if you bring in an X code from animation, bring in an code from motion graphics. But here, it works exactly as the same X code all over the world it's exam. So the X code to use is actually green also, but a type of green that actually looks unique. So the first thing you do is select. So the codes selected. Okay. Just sel once, not twice. The X code is six, 47. A, A 02, press enter. Perfect, you can see. This is exactly the one I need. You can see when I select it, you can see, it actually comes over. You can try to drag it up, make it lighter or make it darker depending on what one is, where you can cancel it and what press control said it remains exactly the way I want it. So in the next video, I'm going to teach you how to cut out the mboger from its main image. That is it has a background, so we cut out the mboger on its own, mboger only on its own and use it for our website, O section. 9. How to cut out images: Now in this video, I'm going to teach you how to cut the amberger from its image itself, you know, just cutting out an element, bringing out an element from a particular image. So now, I'm going to my file my resource file, just coming over here to image, and coming over to the resource file. After downloading it from from the link we are up there. So double click. Coming over a project files. This is the first one. So now I can click and drag this down, re bringing it down weare into Figma right here and just drop it in no time, very fast, it gets into Figma. So what do I do I use my window mouse button to click d and drag down then press on control the Zoom out click drag this up. I don't want to do two B. I can actually come over here. Click d and drag this, but actually it can actually look somehow. So control press on K. K is a shortcut forward for scale. Coming over you would see just press on this R, you see K, which is k. It's actually going to make it in proportion, press on K. Okay. Click what and drag down its goal in proportion. So I don't want to s to be on Zoom. Then let me zoom into the space. Then what do I do? I want to use a particular resource, a particular plug in in Figma that would actually cut out this image perfectly for me perfectly without even bully stress of using the pen to. What do I do? Now it's been selected and come over to resources, click on this piece. When you click on resources here, come to plug in. When it comes to plugins you click on this place and the sch. What do you do you press icon icon eight background. Okay. And actually, it's it's pops of icon background removal. Then you select it or just come over here, actually. Press on the three dots. When you press on them, you go towards view details. It's going to show you details and everything you can see going down up just run it, select and run. Remove background. But firstly, that is you should have selected this image, then remove background. Then It's takes some little seconds or probably going to minutes, but seconds actually to remove the background for you. It's actually recognizes whatever it's there. It knows the image we're actually trying to remove from a particular background. So yeah, very, very perfect. Now, We have this. You can see it's actually called the background and Baron is out and you can see, very perfect. What do we do with this? Actually, you can click you see, click hold and drag, you can see, very perfect in no time. Real engine. The other particles around there, how do we take them off? Just come to the pin two. Right now what do we do use the pin two, you press on P, which is a shortcut for the pin two. Now we need to cut out the burger itself very first, not taking time actually. Isn't the pencil from the other one because figma was not able to recognize to that extent that we don't need all these particles here, what do we do? So just come over a flicks very simple. We're not trying to make it perfect because it doesn't cut out already, so we just need some things to be taken away from here. Country. Zoom in. Is the minimize posing to drag is good. Is the menize bots to drag. Take this was. Okay. Okay. Z's come over the Then try towards. You can see. This last node actually must are with this. You can see the red line there, you can see, very perfect. You select. Then use them out, very perfect. Now, how do I take away these particles from the mboger itself? One has to be very careful. Now let's change it back to the move to present. Now we have that. Now I can try to click the drug for outside and selecting these two, but really actually. What do I do? Just come over at the at body Sorry, come over here on the canvas, then double click twice. So it goes back to norm. You can click anyway. So you can click and drag now. It's actually select the two together. Fine. That's why you you can actually select this line then click on the drug or conf it, you actually come over, select this inside, then click. Perfect. Now what do I do? I need to follow some processes to follow some processes. So what do I do? I first thing I do is a selecton this. Try to follow it the way it is. I second this, which is the traces. Okay. It's as a stroke. I'll try to was deleted stroke, which is present cancel, then creates a field for its present plus icon. You can see that very perfect. That's the first step. Then right click on it, downward sent to back. Then it goes back. Perfect. That is it. Then I do next. The next thing I do is what this has been selected. That is the tracing line, the line has been selected. So I can press on shift and select the mboger If paravent mistakes being made, you know, now this vector, this line is actually at the back of the mboger you can select selected selecting this. There's a problem. Just come over here, select on this. You'll be able to click the rag yourself. You can see contrast. You can click the rag around yourself, contrast if it's proof difficult for you to select from here, Come over the select, select select anything if you select around here. Present vector. So I want to take this to together. I want to select the vector and also the Amberger. What do you do? You can come over here, click Oden drag outside then like this. It selects the two. So when you click Oden drag, you can see it peaks fine. Control. Now that we have this we do, just come over here. Look at this icon here, like an a moon select on it and what's use as mask select You can see very perfect. That is you're masking something that is you're saying the only thing demarcated here should be shown while it's showing is the white actual while the other particles actually around it, shod should become dark, that shouldn't be visible. It's very, very simple. It's very. Just follow the processes. I can go back and watch it again. Firstly, Given the vector line a field, it's been a field the back to taking it back behind the amberger. Then after being behind the amberger what happens, I shall select the two together than what I used the word the mask. Okay, perfect. Now what do we do, we try to bring over here, click Oden drag like this, bring over here. Then press on K to scale it perfectly. You click. If you click Oden drag like this, it goes to the right. But when you press on on out, it's actually goes in proportion very perfect, perfect. I can click den drag. You can see it's been at the middle of dz very perfect. Bring it down a little bit. Okay. I think that is perfect enough. I want to make this too much. This is perfect enough for us to use. Yeah. I just don't want it to be too big. Present K a. Select this present. Then click and then press, make sure it's coming down proportionally. Then click use the ships to make it calm down perfectly also it's quite permissible. Okay. So that's very, very perfect. Okay. 10. How to create shadow & Blur: In this video, I want to teach you how to create a shadow for an image. A it will look exactly like the floating burger. Let me just zoom in around there. Minimal floating. Perfect Ile outside. What do I do? I can press on or is a short cut forward. The short cut forward ellipses. Very perfect. Click and drag like this. Set me drag in normally, but I want to make a shadow so should be around here. Yeah, very perfect. What do I do? I come over, click over here, then click Wood and drag, black perfect, then close this very perfect. You can actually click wood and drag it to make it somewhere around there, just come over here. But actually perfect the way it is like this. Now what do I do? I try to reduce the opacity. You should bring a cursor near this. You'll see it changes. To the left and right, may you click wooden drag to the left then to the right. Okay. So you can actually reduce it, keep on reducing our taste because it needs to be blood, it needs to fade, not perfectly black to that extent. Okay. I think that's a very perfect. What is the next thing to do. The next thing for to do is to add an effect called blow. Come the effect then presently plus icon, the select this. They have the layer blow. It's quite different from drop shadow or any other thing. What we need is what the layer blow on layer block, you can see it changes succumb to its property. So you can click old and drag to the labs old and drag to the right depending. I want to actually it's very blow. Keep increasing. T I'm actually satisfied with it. Let me try to click wood and drag outside. Just bring it up a little bit. Let's see what happens. Is this perfect enough? Let me select it again. Blow sorry, come to the properties for the blow to reduce. I don't know to keep on showing what's showing the shape of that circle I want it to be disorganized. That's fading too much. It needs to show that there is something there. Yeah, I think that is perfect. Yeah, so that is something that ambogs quite floating, very, very perfect. I can click and drag present shifts themed to bits. Okay perfect and I can click and drag this down bits. Click and dips. Good. Nice one click outside it. Yeah, very perfect. Click. Bring them down to piece present sheets to make it proportional. Not too much zooming pre sheet to make it proportional make drag down. Yeah. I think that's perfect. So that is a shadow. I can try to, you know, I just more if I feel like let's select a click put drag to the right, you know, we feed more drag to the left to, you know, some of this. But no,'s just press control set. And this is this is perfect enough. So lastly, what we can do is just that you select this press on shifts and select select this. It becomes two, so you can group them together, or what you select this. Press on shifts and come over here to this to this ellipse and select this itcmes two, or you contra again. You click Old and drug like this. When you click Old drug like this, it select this background also together. What do you do? Just select this and press on shifts. Then if you find it difficult, just come over here, select this ten. What do you do you can click on them. Then group selection, or you use the shortcut trig. You can say just click outside the come back and click. It's together. So they float together very perfect. One thing you can do is just come over here. You do click, double click aboga itself. I'm sorry for that, bogaag The name of this artboard is aboga is the amboga image itself. The A, then press enter. Here we have direct tangle which is just fine, correct. And that's perfect. 11. Leaves Effect: In this lecture video, I'm going to add the leaves. Actually, it's actually in line with the hamburger, there's some leaves, some vegetables, actually makes it look perfect. I can actually zoom out a little bit. Come to the resource file here. This is the leaf. We're done with A one, A to click Oden drag, then you drop it here. Dropw can click drag over here, it enters into into it, can make it out anywhere you feel like, very very perfect. So try to bring somewhere around there because I don't want to d stop the writings, the text, that'll be the themes. So let's bring it around somewhere here. Push it very well. Yeah, I think that's perfect enough. Let's zoom in. Actually keep on changing the way you feel like, but it's perfect the way it is. Okay. Perfect. So what do we do? Let's try to give it an effect. We try to blow. Give it a layer blow this drop shadow, and then the drop shadow and a layer blow. Set layer blow that come to the properties, then try to increase borinss. I think this is quite tool, quite too blow Okay. I reducing continuities come by. I wanted to show something like but I wanted to be in a blow in a blow mode. Yeah, I think that's perfect enough. Yeah. That's perfect enough, very perfect so I can try to adjust more. If I feel like I'll just leave the where it is and just contro so very perfect. So it's not been here would not actually affect the text. So it's been here actually stated where it's meant to be. So so that is it for this video. Okay. Okay. 12. How to use & arrange Logos: In this video, I want to import the logo, the brand logo. Don't forget, pres on control G. We still have our grid line. The logo will actually be around somewhere. What do I do come over here to to the resource file again. Just click over here, add the logo here for the brand actually here, click den back to back to feed MA, then drop. It's quite present K to make it in proportion. Click den drag. Okay. Sorry. Zoom in. Bring it around there. So you can see around this red line, left. You can see. I don't want it to be outside. This is a great guideline for whatever we're doing. So what size exactly is this logo going to be? Okay. I can try to make it you know try to come over here. You can change the size here. Okay. So try to come over here. This is its position, you can position in left or right, you know, something like this, you know, something like that, but let's contra Let's leave that. Now with the length, the I can try to know. Something like this, you know, this also, you know. Let me just make it something around, you know, like 49. Okay. And how do you feel like the press on tap you bring your cursor over here and click this 49 by 46 present as an one. But if you want to make with the same size with the press on the constrained proportions. Here you can see my this icon is constrained proportion. That is, whenever you present 100, definitely the s actually adjust itself to be around 100 also you can pay hundred. Present you can see 95.87. So it goes along the constrained like they are in purple. They're together, they're trying to be equal. But when you click on this and try to remove, you can see that thing in the middle when you click on it, it changes. So 11, for example, put this at two. You see, this doesn't change press and enter. This maintains its proportion. You can see very perfect. That's actually what I want. So I can click on this and press what 49 then tab or you come over and set this click 46 here, then press enter, very perfect. So I click over here, bring it around somewhere, nice on you bring down. Okay. Good. So if you want to know the size, the length from here to here. First thing you do you just select on that particular icon or something. The present. Don't click anything. Just bring your mouse over here. You can see 44. The length from here to here is 44. The length from here to year is 130. The length from here to the next, no, just like that. So you want to know just press on this present, then it shows you the length from here to here, this is 449 Zoom out. You can see actually going in proportion with with the wire frame, the ambger the leaves, the solid is, the the bot, the amboga logo is. Other I can actually pres on ships G. It goes away. The layer grid goes away, very perfect. Now we have this idea. I can actually come over, bring it up a little bit. Click and present ships to make it in proportion and it goes up, very perfect. That is a logo. Then now I have to give the logo in name. Okay. So now what do we do we need a text text write something. So there's some called text to actually only one. So just select come over, select also just click somewhere. What is the name of the brand? The name of the brand is gates Vagas. Nice. Press word, press enter it will actually enter. You see? What happens? What do you do? Just come over to the come over. Come over outside the article then just click once, and it goes back to the move two from from this toward to the move two or what you do just okay fine, for example, you've selected text two. You're through with it. Just come over to the word to the move two, and it's perfect. Just click outside here. But first way just to just click outside. Yeah, click on the word on the Canvas nice one. So Now zooming in actually now, we have burger bytes, very, very perfect name. The first thing that we do actually here, we have the properties for the text. Things. Let's go straight over here. Come over here, this is the text. This is the name of the text. Okay, set it on this. Once it like this, it brings out different different forms. But just come over such forms. But using. You can see the forms in the resource file, actually it's there. Just download it onto your system. It's in the resource file actually attached to this course which I've explained earlier. F not a B K M D, quite bold. So I can come over to change its forms. Something like 20, something like that or 16. I think 16 is more preferable, but let's make it 18. Let me select this 18, perfect. So what do I do? I can click old and drag it like this. You can see. I think it's in the middle of I want to make it in the middle of this. Perfect. I think it's quite okay like this, nice one. Okay. Very, very perfect. So we can actually zoom in. So clicking this is been selected in present out. Let's look at the margin 32. Let me try to click wood rags present shifts, make it come closer a little bit. Okay. Okay. Present again, let's see. Okay 28. That's nice enough. That's nice. Okay. Click upside here. You can see. Very, very perfect. If it look quite too big for you from here, actually, you can zoom in. You can click this and press on shift then click on this. Triton present the triton scale. It's been reduced. Perfect. Let's see what happens. Okay. That's nice. It's quite good. But this is actually in the middle. Let me click present shifts, bring down. It actually proves it's at the middle, but I don't think it's is to me. So I'm going to put it around there, so sometimes computer doesn't really make mistake to that extent. Sometimes medical things, it doesn't look centralized to you. So this is actually perfect to me right now. So that's it. Okay. 13. Creating website top menu: Now, in this lecture video, you want to make the product, saves and contact, you know menu something like that. Perfect. So you just try to zoom in. So you can say the middle bo puts and click with the track around here. So do you can actually select on this. Select this. Then press on the ship then select the Boger itself. That's two. Then what's control perfect. It's been grouped then double click here. Then press on what Boger. Sorry, brand logo. Why Boger Boger every time Boger. I love Boger. Brand logo, then what's present enter very perfect. Select this also and double click. Change it to leave leaves c two wh what is wrong? Use the words present very perfect. This is like rectangle actually, sorry, dtanguvu leave it as it is aching solid or any hot. So what do I do? I can slate on this. But what is happening. I've already grouped it, so just controve But what do you do? We can actually even if you group thousands of things in one particular thing from the thousands of things, double click. You can see then click. Old and press on old then new drag it outside. You can press on ships to make it in proportion. Now we have this. You can see actually, it's actually moving together, but I don't want this actually double click on it to be along with it to be together with this. So what do I do? Now, just select this when you select this? Where is the new one we did just now? This is just double click on this. You can see. But when I collapse, when I select this, it shows everything inside this one group. I will try to expand, bring out this one exactly. Click old and drag it on top. Here, it goes outside the group. It's normal part of them. When I select this, what happens, it takes only two, and this remains itself. That's the best and fastest way to do it. Very perfect. Now you can try that again. Now, present T, which is a short cut forward for the text. Then elect itself. Then what do I do? I present the new things. So I present Sorry. Sorry for that. The press on enter actually app on that way. Just come over to the move to. Perfect. Then after selecting the move two, press on what, select this empty space, which is what the canvas. Perfect. Now we're up that. What is the next thing to do? You click. D, then press on sheets then press on. Don't forget contrast. When you click d, press on. It's actually copies, it's out, but it's actually moving, not really the way it meant to move. Press on ships, then it becomes straight. You can see it's actually telling me the inches, the numbers of spaces there. We have 40 40 around 34. It should be close but not too close. I think 32 is okay. Perfect. Then I can click d d and drug, pres on d and shift again, making 32. We need actually 44 menu there. Four leks. Click Old and drag, press on shift and ten, 32, very very perfect. So now what we should now is come over here, press on T, then try to try to change the name. This product. Okay, do it to me. The present. That's all come over here also, there's a mistake. Present. Click in your customer, click around there, then deli thing you can do just press on escape. Select this present. We have service. Press escape, then select also press on. Then contacts. Then you can press escape very perfect. So I can decide to T is actually 16. So actually, I think it's perfect like that. Okay. There's no form to change the forms. There's no reason for me to change the forms. So Need to change the column of this. Now, changing the color to select on this actually wants us to make the page. Actually, it's an ero section, but actually it has to be identified that this is a page. That is the selected page needs to be more identified, need to be indicated than the product service and counter. This is the page. Come over s this and we change the color. Actually, Figma recognizes the latest color we used. Just select on this. Then it changes the color. Another thing we can try to do is apart from this actually, I can actually save a particular color style. Save a particular color style. Prevent actually in this particular tutorial. In this particular story, I'm going to be using this color very much, very much. What do I do? Just come over to the plus icon here, which is what's new style of variables. They're also called adding a variables, keeping on variables and fed Ma. Now, present on this new style of variables, what do I do? The name for the variable that is trying to help save a particular color style or a variable. Now this variable does select on this flit Then you say brand color. Okay. What you do, then create variable, very perfect. Now, you can just cancel. So anytime you need this particular color, you have it actually. You can use it. When I select on this, for example, after selecting on this, just come over here, you can see perfectly the brown color is. When you select, it gives me exactly that brown color. That's how it is selected anything come over here to its field Instead of just selecting here and you're giving this red, just come over to this particular I co thousand variables. Okay. Then you would have no need to search for anything or start creating anything. Just select this perfectly. What I want to do is actually letter design things, select on this. Present shift select on this, present shift select on this. I'm going to give you something black in nature. Okay. Let me control it because I don't want the colors for that one also control it. I want them black in a gray like color. It would actually make them fade away quite fading away. It would actually be different from the on page because right now we are on the on page right now. Select present she select this present sat select. What I can do is just come over and try to reduce black. You can see very, very perfect. You can see latest designs actually have things like this. I can show red, whatever color, I want it to be green colors like this, green, blue, whatever it is. But no, I want it to be gray like. This is black. And you know you click with drag black and click up here. And give it a particlor color that actually, it will show but slightly actually will actually fade a gray. So if I don't want to use this particolar color, I can actually have xcode select on this place. The press A D, D A zero, the press, very perfect. You can see when present this you can see the colors actually someway can try to click and drag it somewhere like this. Perfect. But actually contra I like it the way it is. So you zoom out. You can see We're actually getting there. You can see it's actually going in line with what in whatever we have here. Okay, very perfect. Now let's move to the icons in fed. 14. How to import and use icons: Using icons in Figma minimal brought in. Now I want to put some aros beside the product, service and contact links. It would actually indicate a drop down list for product service and contact apart from the link, which we are right there. Try to zoom in, so we can actually create an aro ourself that actually indicates a drop down list. Or we can actually get one from Figma very, very fast without wasting time effectively. What do we do? Don't forget actually FDMA auto saves itself. There's no just a present contra don't need actually Fiat saves. It is what online based. We can get it from FDMA, but although I have mine in my resource file, but I'm going to put you through the ones FDMA. But let's use, let us use the one I have in my resource file for. Now, I need to get the R from my words from my resource file. Coming over here, click on this, bring down 91. Then drop very perfect. Zoom out. Click wood and drag it out outside, then we zoom in, using the mouse button, press on K to reduce it drastically. Zoom in. Click wood and drag like this. Bring around there. Then press on court road and zoom in. Press on to make it scale very well. Then click wood and drag it down, then bring around there. You can see it's showing the lines. Perfect. Let me scale it a little bit, make it smaller. Bring around there. Okay. I want the line which which actually showed me. It's in the middle of but not showing not bad bad thing. That doesn't have a problem rather. So try to, you know, use my eyes to gauge. Click wood and drug present shifts to make sure it's actually looking good and nice. Yes. I think that's perfect enough or Let me bring it out a little bit and see how it actually looks. Okay. Yeah. Perfect. Actually, I think there's a mistake, it is products. They should be X as a mistake that's quite a mistake for me. It should be x. Nice one present Skip. Then bring click on this, bring a click wooden drag like this. Okay. Perfect. I'm going to adjust the services. That's not a problem. Click on this present shift present this tight click here around the present, let's see from 13. So let mem out. Then click dens and go more present shifts, you can see. That's 19. Okay. I mean, present. Let's see from year to year, is 29 27. Present ships just keep on going. Present. That's three nice. Just use left mouse arrow on the keyboard just once, then it actually turns towards 32 very perfect. Now I have this here. Now, before I actually group products and services, I can actually click present ****. Click Olden present ship the present then try to try to bring around. You can see. Perfect. Then click Odgreson ship and you can see, just put around here. Nice spacing. Okay. It shows two you can see the species two, two, two very perfect. That is the space between the contact and the 02 service and RO two in this perfect. Now what do we do set a product and set on this then control g. Certain service the country. Group them together. Perfect. Certain contact and select on this control G perfect. Now what we need to understand from here is that when you select this present out, you can see 32, the space in between s two, present and present 32. But I think this is not 32. Present and present shifts and bring it around somewhere. You can now very pv. The grid lines shows the demarcation line shows for you to be able to know how many percent something is very paved. This is grouped. Now coming over here is product. Dubcis and give it what Products. Present. Come over here also. At you can see service here. Service present a. Then come over here to also it's contact, double click contacts three contacts. But no, contact. That's perfect. So So that is just perfect. You can bit way it is this is the brand leaves, Amberger image to rectangle solid. Let me see background. Exhibit way is actually. Everything is actually we selected, well kept in bugery perfect. Now, apart from the icon I use which I was created. So we can actually create icons and apart from that I'm not create icon actually now. So let's come over to resources, come to the plug ins. You can actually come over here and select icons. It's going to pop out different icons, icons, you can use use and use. You can see you can come down, select this. You see this run that is to run the plugin or to save it actually also. You can actually select save. It brings about a solid black, then you run it then let's see what happens. So this is it. You can decide to choose any icon you feel like anyone you need. Now the thing is when you just click by a click O N drag don't worry about this, or you just click once. But the thing is that I have used average limits of the free plan. Okay? I've used more than I've used the limits, probably like two, three, or four, five, I can't really remember. So you can upgrade for $19, but you don't really have to upgrade. There's some other ways you can do it. Okay. So that is and I'm going to show you that it's much more okay for you than this. But for you as a new user, it would actually work out. So you can close this come back to the resources. You can see you can see any icon with this black solid It's the ones I've actually saved. You can actually set on something like this also. See what happens. It was going to load. Okay. Did you see this Amanda fin. This is number one. Now what do I do? Come over to this menu here. Go to back to files. Then come over to this place actually where you actually know your gmail and everything. Come to what we call community profile. So then select on your e mail there, then it takes you straight to the community. We have libraries, design templates, design tools and the like. Come over the search. There's something we call icon Sass press enter. Okay. Now we have on sacs different type of icon sacks. Anyone you choose perfect the first second third this, we want to use this. Select on this. You can see different icons for use then open in FM perfect. It's going to open in another word another type. It's a load in. So you can see name icon, 6,000 icons contra and 3,000, you can see, money icon, video, audio image, you can see images, messages, you can see location, grid, designed to content, editing, programming settings. Okay. You're going to use on apps on, you know, websites, notification, callings, businesses, crypto companing building, astrology time. A lot of things shop, you know, delivery security, you know, a lot of things you're going to be using quite designing apps, designing websites. Actually the main thing I want to use is what is this particular aro. You can see this art I used just now. And I'm going to be using arrows like this. I can actually select this Ps on control and select this or sorry, I can actually select this prison shift and select this then control come over here back here. What do I do? I come over here. Then select on this. Then back here, I go back towards projects, which is one I'm actually designing. Double click, double click. Then we move towards page two. Perfect. Now we have it here. What do we do? Just Zoom are to be dow Control V. When I control you can see actually, you need to Zoom for it to be able to see, so you can see perfectly. I can use them, click and drag them somewhere here. Okay. Zoom in select this only, click bring around here. You can see and start using them the way I actually want to use them. You can actually get icons from going back here. An icon you feel like copy and paste them here and it's actually free for you to use very perfect. It's in the Figma community. Unlike the ones that have actually exhausted. So that is it for the icons and how to get the icons where to get them and how to use them. That's perfect. Okay. 15. Understanding Figma Auto layout: Now, I'm going to be teaching you auto layout. As have what we call auto layout. Probably we have two different things together. I want to make sure that the spaces are in propulsion. For example, let me select on this and press on shift and select on this. What do I do? I come to what auto layout, select on this. When I select on this, what happens, auto layout added. And zoom in, select here. You can see looking at this and looking at this, select this. You can see it's already been grouped together using the auto layout, and the shortcut for the auto layout is what is what shifts A. The shortcut is shift A for to layout. Now, when you just click outside come over here. You select this space. Place I added the ship the auto layout. So you can see a red, you know, when I click around the, just so just not an apples, control. When I just come around there, you know, there's a red stop showing here and click around the end, not an apples. What do you do? You need to be selective and very Perfect. Bring the cursor around here. You can see this red thing showing and make sure it changes to this four like, you know, we have a line and, you know, that car lines. So you click and drag. It actually stays in proportion. You can see. This is two, when I actually select man product service and contact together and try the auto layers and you see, it's going to actually work perfectly. You can see. Now, let's go back control. What do you do try to select this? You can see the auto layers, then try to delete the auto layers away from here. You can see. Just try to right click and what's on group because as a result of what happened, it has been grouped. So So what do I do? I need this four. Select on this set on this present shifts. Of first make sure this has been group already. This has been group with the group with. Make sure it does. Select this present shifts, select this then select this together. Do not group. There's no refer to group anything there. What do we do now? Just come over to what's layers or what's present present shifts. But let me just sell this. Perfect. When you see it you can see the red line. When I just click anyway, you can see let me try to zoom out. Okay. Select. Okay. Outside select this. Okay. Just come over here. So from sometimes you can see I'll select this. Sometimes it's won't show the red stuff until you try to zoom in. You can see it's showing. So perfect. You can see. You can see everything. It's actually telling us that the species in between the prototypes is six increasing 24, everything in proportion altogether. Altogether, you can see, perfect. Very perfect can see the species altogether. You can see the species are moving together all they are all in proportion. I don't make everything 32, 40 for example. Perfect. Zoom out then, you know. The minimus was in you can see, very perfect. I think I need to make it knows quite is quite too much. I think 32 35 should be okay. Yeah, perfect. So that is about layout actually. It works on two minimum of two, three, four, five, you know, things actually. So that is contained to layouts. Okay. 16. Creating the Log in & Sign up Button: Video, we to teach you how to make the login and sign up button. Fine. Definitely, just come over. You can select. You can select this. Just come y, double click. Okay. Click present shifts out, then, you know, try to bring around there. We can try to create a new text, but let's just copy and paste something, fine, bring around the truck, perfect. So don't forget actually. When you select on this, you can see actually, it's just double click on this, you can see it's inside. Just click Wood and drag and bring outside. Not outside the mbuger that is going outside the board ambger but just being the Amberger end. You can say it's separate from this particularly. So what do you do, press on T, which is what the text two. The log in. Sorry, log. Nice one, the press escape nice. Come on the color select this color, then click and drag it up, log in. Perfect. Then what zo. That's for the log in, so I can just zoom in little bits, minimal button, Zoom in. Then click present ships and try to. We get around the little bits. Bring it around here a little bit. This is called a text board. Actually, there's supposed to be a solid shaped rectangle around, but I decide not to put it here. I'm going to put it in the sign in to make it visible to people from RR To make it visible want people to sign in to log in fine. But we need more customers, more people to come into the website, a call to action signing, just signing. We're going to we're going to press on R, which is what the shortcut for the rectangle we can see R rectangle. We click den drag like this. Like this. I want to give the size actually. The button doesn't really have a specific size. Any button doesn't really have a specific size. This is a solid fill button which a text will be on it. Let's give it let me see. Make sure what's called your constraint proportion is not like this. It should be like this. There's nothing in the middle, should be something like this. And I'll give this 110 by let's say 56. Yeah, something like this, perfect. Zoom in Click Wood drag. So check present sorry, contrast think should be mixed in the middle. It's act in the middle of this. So I can select this and present to this 24. Let's make it 32 probably. Let me see. 30. Let me just the right and the right out on the keyboard just twice, one, two, the pres on 32 perfect. But I think that is too much for it. It seems quite too far from the log in, click present shift them. Try to adjust it and bring it nearer. Yeah, very perfect. I'll try to change the color. Select on this, come over to color, come over here, where we have the brown color selected. But it would actually blend together. So what do I do I cut the link, detach the variance. What do I do? I select it and try to, click wood and drag. Try to make it a little bit lighter. You are adding white. A little bit of white is being added to it. We adding white. I think that is okay. You want to make it darker, you can bring it down. I want to make it lighter, you bring it up and it's perfect. Very perfect. I think it should res a little bit, not too much. I think that's perfect enough. So so you can see zoomoanC. You can see this brings about contrast. Now that it's actually same color lighter than that. I select this click present, then what bring around here. What is happening. It's showing but what is happening, it is below the rectangle. You can see the logging, then the retangle. I try to take away the dtang you can see contrast. Se a log in and click and drag it up above, very perfect. What do we do? I change it towards present does text two automatically does a shot then sign Then press escape. Click can use this by putting it in the middle of this. An thing you can do is just select this then select this click W A thing you can just prey on ships then select this. What do you come over to align, you aig ors and also lie what vertically you can see, very perfect. So you can actually zoom out. Okay. So we have that very perfect. It's quite perfect. So I think the bus is quite big probably. So tri reduce it some like hundred by let me say by 40. Oh no, that's pathetic. Hundred by let me say 50. Yeah, I think that's enough. So just in the middle. Then click the present then select dtangle also then middle, the middle, perfect. Yeah, that's nice and good. This actually part is perfect and looks good. Actually to make people new customers be able to be prompted to sign up quickly, sign up quickly, and logging. So that is very, very perfect. So I can actually keep this as a component also as a component so that I can be able to use it in another button, you know, so that I can be able to use it for another button. But I don't want to keep it as a component for now. When I get to the button, the cut action baton or no, our menu and the so I'm going to use it as a component. Okay. 17. Creating and using texts: In this video, we dive into into the themes. Now, we're through with all those ones. Now, just present, which is the text two. I'll just copy click here. Perfect. Because you can see actually from here, you can see the themes here, we're going to start typing them out. Now, which is d some type of copying, nice copying to make sales. Nice. Please let me try to Zoom Okay. Please and by your cravings and clamation. Okay. So that's the first thing, which is the main thing itself. Now, what do we do present clip. Now click Oden something like this. So the first thing I would like to do is if I just come and start to change, it's not going to do anything. You know going like this coming like this is actually So I can actually come by the zooming, if you can actually see properly Zooming, click like this. No showing when I try to bring this down, it's actually no. It is like auto responding. It's actually respondents, whatever you do, just going down like this. It's understands. It's feedback actually it's perfect, very, very perfect. Also, if I just come over, I just click like this, no, no, something like this, no. So Okay. Perfect. So just controls that controls it. Actually, if you want to make it. But if you don't actually want it to be something like that just present k to scale it's perfect contra. Scale something like this for you. You can see. Perfect. But I'm actually after that for now. What are we going to do? I want to make sure that I press the text two. Try to break down some things. Click on click here. Press and click here, press enter. As a designer as a visual designer, the UI designer, you should be able to and as a UX designer or you should be able to by down text. So sort whatever you're doing. Now you can say things like this. Perfect. So let's press on scale. Now, just select this. You can press on k, try to increase, depending on self. One thing we need to do right now is just come over a change font, select change fonts towards scary. Century skull boy century 75cn BT. That is exactly the point we're going to use here. Very perfect, very good looking front and beautiful point. Nice. Select on this, not forget just present K. Click wooden drag. You can actually give it the size we feel like we can actually adjust it to your taste to the way it suits you. Okay, fine. One thing we actually need to understand here is that Okay. So now if you try to click around there and just try to increase, it's not working. So what do you do just contract? What do you do? Just present scale, then it's what it scales it for you perfectly. You can see very perfect. So I'm going to put it around something like, you know, probably 500, something like that. Yeah. Very begin. So this leave actually around here, just click and drag it somewhere and you know, fine. Perfect. So it's not obstructing anything there. So what do we do? Try to select this select this, go back to the move to because the move is quite different from the s. The move to select this fine. So when you see it over here, the property is over here, something we call the line line something we call a letter space. So when you click and drag to the right to the left, you can see what is happening. You can see it's moving gradually, little by. You can see little by two by two. So you can see you can looking at the space also we have letter spacing. You can see coming down like this. You can see different things coming down like this. You can see very perfect. So what do we do? Consigning consigned the letter spacing. We can actually give it something around, you know, Let me say I think this is perfect. Yes, it looks good. I don't want to be too much. Okay. F 40 lines. I want to give you something around let's give you something around something around 900 quite Click wooden drag to the left, or you can just click here and what night then that's perfect, very perfect. So one thing I would like us to do is to go back to what shifts, G, which is what D layout. You click around the and make sure it is what it shows by the left side around that D B d ble ble you can see it has to be in line with the other ones. That's what we call the proportion. That is it. So I think I've been able to notice something here. Okay. Come over here. Select the select the rectangle. Rectangle, click present shift and try to adjust 82 bits. Okay. Then present the aboger also boger image. Click deny boger image, click Oden, 82 bits. Good. Actually, I can select on what you can select on this and press shift and set on this this two. You can actually group them come over double click. We should call it log and sign. That's okay re Perfect. We can just select them, click and press shift and try to adjust them. Now you can select on this back again. You can see this rectangle, try to click to why you do it like this. It's getting too much, try to some nice adjustment. That's right. Good. What is the next thing to do? Now we have this perfect. Now in order to being about nice effect, just present, firstly, you select this present. Then click around here click Oden to select. I want to change. I want to change the color from black to something else. Select on this pace actually, or you can actually find you select this, you can actually find it here. But let me come over here. Select this then with the brown color. Just give it the brown color. Some nice contracts, contrast, black and gray, nice. Come also select this. Click Oden Boger and cravings, nice contrast colors. Fine and press Escape. Then click anywhere you like, perfect. Nice looking cool. That is the first one. Now the second thing, this is the main thing now, the mi minor thing, actually. What do we do? We click Press sheeps press on to bring down. Perfect then drop then press on T. What do we do now? We try to reduce it to something like no. 15, it's going to be a minor text. Okay. Very, very minor. Not as bigger the last time. Okay. So just a little bit more. Nice one. I'll try to go back to V. Sorry, t press on cap nice one. Just click like this. Okay fine just move it around some way. It shouldn't be too long to that extent. What do we do now press on. It highlights everything, then severe of flavors in every Okay. More sorry in space. That's a mis Ware bites then pull stop. Nice one. So what I want to do here actually is present escape. I want to do your right noise, I'm in every should be somewhere around there nice one. So what do I do? I just press on K? Try to reduce it a little bit. Pre K try to reduce a little bit. Very, very perfect. Click. Oh sorry, that's bad. Then I critic click here actually, it recognizes that it's still scale. So just try to bring up V, change it to V, which is what they move to then try to reduce this like this. Perfect. Even if it is as long as it just try to double click, it goes back to the normal way to meant to be. So for this, what color should we use? I don't use black, you know, try to reduce its opacity like, you know, you say nice effect cool ones. So it's actually being about being creative, been a creative designer in any aspect, a crit view designer. Crieig try to bring it around. Something like this should be nice. Fine. Nice. Nice contrast. Is a nice contrast or should I make it darker? I think that's perfect and that's okay. That's perfect. Just try to select. Try to select. Select it. Now good. Perfect. Now we have this. Now a this, I want to try to change its line eight a little bit of changes to the line. Okay. Probably let's say like 100. Enter Let me see like, you know, 120, enter zone. Let me see like 115, enter perfect. So now, the containing the letterpacing, we have fine. That's okay. We can actually three. No, I don't worry countries. That's perfect to try to, you know. Just control. I'm sorry, Shift G. Let's say the layer. Let's see if it's actually good, nice one. So what is the next thing to do, use the minimize button to control them out? I think I need to change this. It's quite somehow. It's 110. 13. Yeah. That's nice. That's good. Then shift G. Perfect. Okay. So 91. That is for the main or major theme in the minor theme. So we move to the City a call to action button in the next video. 18. Creating CTA Button: This video, I'm going to teach you buttons, just like the sign of button. Okay. Now, we're talking about the main cal action button, which is to order and our main actually nice one. Just come over a comprison ships g. Press up, the shortcut for what for the rectangle, just click around here. Somewhere okay. The button will be very, very clear to people. They must be must be explicit, they must be able to see it from a far. Now to call the action, call the attention, call to action. Now to call them to be able to take what to take action. So I'm going to use the brown color for this, okay, which is coming over here. Then selecting this perfect. So I can shape G. Actually, that's lid for now. I'm ping to that, but for now, we have that I might not even try decide to use a layer layer grid. I can just click put around vacancy. That is another grid entirely for us to use very perfect. So we have that actually the size of the, the size is quite okay. The size for Yeah. I think the side is quite okay. Let me see from my far. Okay. Yeah. Nice side actually if I want to adjust. I'm going to still adjust if possible. I probably ready to adjust it. Let me try to increase the width a little bit. Okay. It must be big enough not to be too small. Okay. I actually try to increase this also. Oh, that's not too much. Okay. I think that's perfect enough. That's okay. Let me see from my far. You can actually say the button is here actually, but it's a sketch. See from my far. Okay. Quite not to be. Let me clay old and drag prison sheets. Okay. One to be very attractive to able for them to see. Okay, very, very perfect. So press on T and try to select there and what order now? Very, perfect. So just present escape. Just click d and drag this bring this here. Now a drop this order nil. We look at the rectangle here right here. So bring about this order, bring it above the rectangle, and it shows. So what you can do is just come over and select this, click d and drag, go to white. Nice. So what I can do now is I just selecting this and press and shift then select tangle then control G. So double click and give it a name, basic. Order. Okay. Nice. Just try to collapse through this. Tries to collapse collapse brand logo collapse of sorry, collapse. Okay. So what I was this, which is the minor text and and shifts then this major text dangerous country G then That's put themes. Okay. Very, very perfect. Those are the tax. So what do you do now consigning this, select this double click on this because it's group, so just double click on it. I can double click on this, try to increase, you know, around I think the system is quite small. Let's make it 15. Click I think that is quite to be. Small it will be to that extent, s contras it may be like that. But I think it's quite small. Let me see it very well. That is quite small. Just double click. Then give it give it what is called two square two, give it 181 and 818, press enter. You click wooden drag. It shows those nice bricks for us. Nice one, very perfect. So now we have in this. We can use what we call layouts. Select select them. The pin sew them are grouped. Press shifts. You can see two layouts added. Nice one. For example, let me just double click on this and I'm trying to change the names to, you know, porches. Oh, sorry, sorry sorry. Present escape. Present good. I'll try to te you can see porches now. You can see it's actually actually responding to the way. Whatever type respond porch is now and move and move on. You can see very, very perfect. That's why it's not for the auto layout. It's not happen like this. Okay. So the right there. Now. The write again. Other? Now? Very perfect. Cape the layout is actually doing wonders, click click Old drag press on and shift, then say. That's fine. 28 is okay. Coming over here coming over here. Double click on this. Then what do you say, press on T Nice and perfect, very, very nice. So just escape. But I want this I want this actually to be a line button we call it an outline button, we'll call it a border button. Okay. So just click this and come over to the field right here and no feel anymore. So what happens. What is wrong? So what do we do? We create a stroke for it. Create a stroke. Then it's having the stroke, having the stroke. Coming over here, just come over here, then what use this particular color for the stroke. I'll just come over here. Yes, use a brown color for the stroke. Just come over here and then increase it to some temporary three or four but three is quite okay. No further we have what's it called our our men. We have our menu. So just double click it's right here. If you can see it actually come over our menu, select it. Then change our menus words to the brand front front and very, very perfect. So I to bring about a contrast. The one that will be more attractive will be words the order, more more attractive. They have to order. But if they want our men more over our men, they will actually come over here, it's a button. Let me just click and drag this around here a little bit. Not so far. I can actually come over here. Here and check from here. Just select this present. Sorry, present then, no. What is the space 19? So I can use that same space here also coming over select present s. What's space 16. So what did you just select this? Use the right movies like 3 ", 17, 18. Oh sorry. Select the 17, 18 90. Then the 90 very perfect. So it's actually in proportion with the space here. I actually in proportion to this also. So it actually look much more okay than perfect. So apart from that is one more want to add to this. What is it just look at it, guess, if you can, that is not a problem. Just come over here, what's your project fs, we have something like this there. Actually, you can use the out actually, the icon sac actually showed you actually in the video of the icon video. Choose it, then bring it here. I've actually provided it for you, bring it in here, just come over here, then drop it here, very perfect. If we try to scale as usual, present K, scale them on there. Let's see the nice, let's just see what is going to happen right here. Right here, let's see what's going to happen. Before you put it inside because there's an auto layer there. It's automatic. So just try to reduce, okay? I was reduced to the extent you want it to be reduced to. The one you click Oden dragons you can see what is happening. There is a line showing what is happening there. Let's see what happens. Drop then very perfect. It's perfect it's for us. It's what it's perfect for, very perfect. Actually, because of the auto layout, so you can actually come over here, zooming perfectly. You can see perfect. It's perfect. It's perfectly for us. It's made it perfect for us. Can you see 91. So this is very, very perfect. Actually app in the button. I mean, the order now, the bot in and, you know, very perfect. So you can zoom in and actually select this double click on this Double click on this and adjust double click on this also. Okay, press on T. And let's see what apples. If pvc something like you, something like this, you can see. Perfect. Very perfect. Very perfect. So a layer is something very very as a designer, you must not use it perfectly. So our menu, n one, very perfect. The present escape. Then we move. So that is it for the bot, you know, the border bolting or the line out time bolting, and also the fill bottom using layout with them. That's very perfect. Okay. 19. Creating the client's satisfaction section: I want to add some things here concerning the customer satisfaction. You know, like for people to be able to know how people have been satisfied, how many people, how many other things like that. So you can just select this. Let me just use it T Let's create a new thing. That's 200 plus. Okay. So 100 plus. Then just escape, k. Okay. Click wood and track up. Nice one. Bring around here. You can see ship. You can see the green line. Okay, actually. So I'd like to change the forms of this, okay. So after present on scale, the properties are showing you can see, go back to what can present, going back to the move to. You can see the properties that are now showing. So select here set on what four, then put M d t. Select this very perfect. Then go to bold. I'll try to change its. I'll try to change its later spacing. So let me just reduce this a little bit. Okay. I think that's okay. That's nice enough. Okay. Try to change its color to to the brand color also. Nice one. Let me try to shift. Yeah. Nice. Good looking. Now, fine. Perfect. So I can actually click this present shift and bring this down. Then press on C. And what do we write? Sorry. Satisfied clients. Then press on cape k. So I'll try to reduce this down. Sorry. So I'll try to use this down. I'll change this back to V. I'll try to change the color to. I don't want to use the brown color again. So try to detach variable. Then come over here. Try to choose a part color color here, probably. I try to change some color. I want to make the color perfect to this color, so I can come over it, use this eye dropper tool. Select this and come over here. You can see it's actually showing somewhere around this. So if it's on this green fine on this nice yellow, Savory nice one. But I want to be on something like this. So just bring check the space you see actually if it actually matches it. You can see perfect then select then it changes this very perfect you can zoom in, then click prison ships and come down a little bit. Nice one. So try to close this and we have this very perfect. Click outside. Good. Try to reduce its one red and certified customer. You can try to select this press on shifts, then select zooming, then select this, the contra g. You can come over here then double click. Now what do you call it $0.05 enter very perfect. So I can press on K and try to try to reduce n one. So control them zoom out. Then zoom in. Now I can just pick this leave, I think you just bring it down with a little bit, or bring it up, no, bring it down nice one. Just bring it out somewhere, I think. That's nice enough. That's perfect enough you can see. The leaf is actually somewhere you can see. Just try to collapse this also. Collapse this Any other one to collapse? No, that's all actually. So we can actually collapse everything like this. Everything you done. That's perfect. 20. Import & use arrow icons: One last thing I would like to do for this particular ro section landing page is that I'd like to add a particular nice icon like an arrow there. So there's something called double arrow. You can see double, which I have saved here already. Anything you save in the plugging and the legs, the plugging would actually be down here compared to any other things. So just pre you can press on. There are some other arrows there also that you can actually use. But the one I actually want to use is just such form, let me go back. Doodle my doodle doodle. It's actually going to pop up, depending on network. I can say it's black here, that it is saved already. So what do I do? Then select this. Then what do I do? Is runs. When it runs, so we need to select the. It's actually loading actually loading. Okay. You can see bring around there. You can see different types of R for you to use. You can just select one. It shows up. Select one, it shows up. Let me go back. Sorry. Let me go back. You can just select around the one. Fine. It shows up. You can see select this also shows up around especially at the meddle. When you select something, it's actually possible by the middle. You can see. So you can use them. This one is not attached to any license. So let me delete this de this. We're going to actually let this. We're going to actually need this, let me just select this. So I don't. I mean this is the exact one I need here. Just select it and it's part of then close this perfectly. Then click and drag this down. Try to, you know, I want to rotate it. So just bring a court it to you can see the cuff stuff, click drag and bring click and drag it down here. Then present try to scale and press on its scales together perfectly. Then zoom in. Zoom around there and press on K. Then pres on, try to reduce. Reduce. So flickiding drug here. Then present odds Cliqu I can come offside here in fight. Very, very perfect. So now move to the press on the V, then what is the brand color nice one, and we have that perfect. So the R is actually pointing to this burger. You want our menu, you want to taste, you want to eat more or now things like that, very perfect, you know? So looking at this and this is actually looking at the two. Actually we finalized. This is a nice thing. So that is. Looking at that. Okay. Perfect. Okay. 21. Understanding how to use Figma component: Video, I am going to teach you what component is. It's very simple. There is a cars, very simple. The first is we just set on this. Okay. When you try to save something as a component, create something as a component. That is when you select it here and create it as a component, when you get to any page in this tab in this particular design in this particular figma, you'll be able to use it again. There's a need for you to start creating and creating and creating a new button, creating a new. Most times it's been used for boting or any type of image you have or any type of icon. You just pick from the asset, which is what you actually when I create a component. Now, for example, I use this boton many times, which is actually, yes, I'm going to use bot in many times through it's going to happen. Just come. It's very simple come by. You can see C component lick on it. So now come over, then, select this. You can see something changed to pop and you can see the icon has changed some type of, you know, pyramid or what I call it. So pyramid prison stops. So you can see that very simple, but something has happened. Come to Act. C, it's actually. Let's say, for example, the also set on the they come with the present component it shows. When you go back to layers, you see, it has actually showed this particularly. Now let's see what happens. Let's select on this. When I sit on this, actually, I'm not seting on the bugger. I'm certainly leave Okay. Just press on the bugger image. Then what do you do you select create components. Come over to assets. You can see the pogerw what do we do? Now, come back to layers. Go to page one, where there is no bugerw come over to assets. Sell page one. Then select this. And in instance. And what do you do? The boga is life here. You can use it in any page, whatever page you are it's not composites that page. What about bring? We have the. What about the order now? Bring insert instance. It has been inside. Okay present. Pre increases the way you want. Depends on you. Click wooden drug put around. This also presents increase. You can see, very perfect. That is about component is actually a ups to save something. And able to use in other pages, other places in that particular fed MA program. So that is our component. Components can be used and you reuse. Instead of creating and creating a new component you'll use and you reuse that is our component. Okay. 22. Food Brand Hero Section Design Conclusion: Looking at this, look how perfect it is, we have the brand logo, the logo name, the product, login, sign up, it's well sketch here and actually, it's just the leaves able to sketch. So we have the main theme, the minor theme, the bot the satisfaction. At least, we don't have the ad I don't have the out. But actually, it's nice. Actually this is like a blueprint that will actually guide us in designing stuff and designing things. So very perfect. You can see from here actually. Okay. Thing like this, you know, very perfect. It looks identical. Just the arrow and the leaf was not actually there, okay? That's very perfect. You can try to, you know, just bring about, you know, just come over to the pen so so. Okay. I'm sorry. That shifts p. And try to know. Just put an arrow like this and try to something like this. No. Nice one. And that's very, very perfect. And some leaves, you know, things like that, you know, some leaves, nice leaves, like an artistic drying stuff, you know, things like that. Okay. Okay. Perfect. And it looks, looks nice. Go back to V. It looks nice and no. Perfect. Looks artistic. Nice. Looks good. Nice, cool. Okay. So sketching the real image and you can see, let's just see let's go some nice from sketching from real left to what to sketching, from sketching to what, what? Real life. Quite look identical. Nice one. So that is it for his Amber garb. We move to the next one where we're dealing with bicycles, you know, apple and, you know, real estate. So I'll see you in the next lecture video. 23. Tech Brand Hero Section Design - Part 1: In this part of the lecture video, I'm going to teach you how to design for a tech brand, a tech brand into different types of gadgets, automobiles, and the like. Actually, this is basically to target anything. But for this, this basically to target bicycle, a tech bicycle. And just like that. So then you can see my actually here. What you're going to do is just come over we have page one as this page two. Just coming to page two then pres plus icon. Just say come over to page three, the last page and present what this icon. Then it shows you page three on your page four, don't this here actually. So what do I do right click on this page. Now this is page three, good. Then come over to page one back. Select on wire frame two. Contra. Then what do you do, you come to page three, then contra view paste it's paste. Now then after that after that just press on the, the canvas here. Come over here, select this come over the frame. When you select frame, you can see the property shows the second detop then detop again, then that textop shows. You can see showing here, but yours will show us dext one Mito two. I'll delete this. Good. Now, we begin a set of Nice. What do we do to make things very fast for us because all these things are all in because all these designs are all in one tab. What do I come over to page two. Set on page two, just selecting everything, then control C. That's copy. The move to page three, then control. That's paste. It's actually paste and it's just click track click track around some way then drop. Okay. Let's just like that. Nice one. What do we need for this one, actually, it's a dark theme for a dark theme, a dark background because that is how the photo actually looks like. Come over to our resource pal you do? This is a resource double clip that is through all this dli Now we're going to this very perfect. Clip this d and what drag drag inside and drop. Yeah, very perfect. It's loads. Okay. Perfect. What do you do? You press on control, click wood and drag, try to zoom outside. Then what do you do just press on the scale, scale tool, click wood and drag like this. Press on to make sure it's sorry for that. Press on to make sure it is work to make sure it actually scales down in proportion. You can actually zoom in. Click still on scale, press on us. Can actually bring around the left top left. Okay. You can see check can click and drag and make it bigger. Just click over here and try to make it bigger. What we have to do right now is just just right click on it. Then do what flip horizontally. Yes. I change from the red image given to us. We have that. Now, we need to go back to the move to because we are trying to click and drag like this. It's it's not going to work because it's in the scale, the scale, you know, It is in the scale tool. Just control it. Change back to what change back to the move to present v. Then now we can click. You can see perfect. Very perfect. Now we have this s, it's there already. Perfect, very nice. Now that's how to import an image and click it in the frame without any problem. What do you do now, just click outside here on the Canvas. When you click here once, the artboard one and you drag you're going to drag everything inside. You have to click the second time and it chooses whatever image is inside. That's what it needs to understand. Contras click outside. When you click once, it clicks It takes everything in the artboard. Click wing drag you see. But when you if preventio you need the image itself, you click the second time. Then it chooses the image inside, you can see. It has actually highlighted yet. You can see then you adjust and so just contras it back. Another thing we need to do now is what one to give it ingredients. I want this particular place to be darker. This lighter maintains what it is because texts are going to be around here. It has to be darker. It has to be there should be shadows there and the lights should actually be maintained here. What do I do? I come over to feel as usual. Set plus icon, then come over here, normally as usual. Then we have this solid, this is gradients. This is exactly what they need. See what select ingredients. You can see what happens. You can actually flip. This is vertical flip it is horizontal, n one. Actually click wood and drag this down at this and we can actually change it. This is black, the shadow. This is white, is the light. You can actually flip that this is now white black but we won't black one y, so let's flip back. Now we have this, let me zoom in course to be able to see it very well brightly and perfectly. Good. Now we have this. Fig mas gradients is the simplest to me because I've used gradients in many softwares and this is actually the easiest to me. It's very easy. Just bring the cuss around there, just over around there you can see, I've not clicked anything, but showing me you can put more, you can put more. But the first thing we have to do concerning this is that what Okay. When create gradients in Figma, it would actually have 20% parcityll be transparent. I don't give you the exact complete color, click over it and move it to the right. You can see it's darkens to the right. Okay. Perfect. You can see when I come over, click here and do like this. You see what happens. If normally it was that 20%, it's one have worked. Number one, it would actually be in 20 something percent, but you have to increase it to 100%. That's the first thing you need to know, understand that. Now, I want more points for the gradients to be here. I come a select. You can see I've actually selected a point. Then I can take the points, click you can see becoming black. Fading. You can see. I don't want it to be like that. I want it actually somewhere. I stay here. Then I stay. After that, after that to create another one near to the space click there. Then bring it around the Yes, you can see this space is getting darker for the text to be able to for the text to be able to balance well there. Now let me create one more put around the. I think that's too much, delete. I think this is okay. Here. Here. I'll click here, click here, then bring it here. Perfect. I think that is enough actually. Yes, we have that correct. Perfect. Now you can actually close this very perfect add more just select here, then what it actually shows up. You can actually reduce it a little bit. Yeah, I think it's okay. Okay. I think it's perfect. Then good, you can close this very perfect. So the text will be seen better than being here. This would actually maintain its, its lightness. The shadows will be here and actually protects the text. So now for the logo and some other things first let's come over here. Okay. Try to set on the present ship set on the pres on ship set on this. What do I do, I try to copy and paste them just to make things very fast and easy because we've read something similar to this before, so it's very easy for us to just copy it. Press on this left mom button pre present also the man down, present shifts, then you drop this head. Okay. So, perfect. Then come over zoom in. Nice. Then come over here you can see actually the mboger actually is here actually because I copied it, try to collapse it. This is text of one. The word double click and it. Then you can give it any type of any type of naming what bicycle, whatever it is, put on it. Tech press. That's Amberger. You're going to do the amberger when we through this. We just need some particles, some things from it. So Okay. Now we can see how this one has been arranged. We have the logo here and the log on, but the own products and service is not here. It's actually here beside. So we have statement of that. It has to be inside also. First, I'm going to actually select on this. Double click this. Give it a white. C wooden drag, white, showing white, nice one. I'm I'm going to make some tweaks to the color, but for now, let's continue like this and don't forget actually the layout grid. So just select this select tech Just come over layout grid then. It shows the layout grid actually as usual. Just come over here, str make some tricks to it, colons. Okay perfect. You're going to make this. Now, we move towards center. That is it's type center width should be around eight and enter perfect. So, what do we do? Now, the first thing to do right now actually is the logo. We go back to the work to the five to the resource p. This is a logo for it, click denn This becomes very easy because we don't want already, click Oden present kno in z. Nice one. Then you can double click this. And double click this, and just look at the size as 44 by what 41, for example, set on this puzzle and give it what 44. Tab one. Present enter. After you in this, there's double clicking just delete. Fine. Bye bye. Nice. So just bring this around there. Bring this around there. At the line here. Cool. So it's there. What do you do? I think it's outside the tech. So click and drag to bring it inside the tech. So then you will see the lines are now showing before. The line was not showing. Now, the line for I mean, the grids around it are now showing there. So We up this. I can actually select this present and look at 13, very very perfect. Now, this is not the name for the type complaint. Just select on this and present. Then click wooden drug like this. I then the name is what move in one. The move is white while the E is what is another color. What type of color is it? Let me reduce to you a particular type of color which is quite something like this. Okay. I call quite blue. Spread on this, some blue, and change some things there. But actually, it has an X code. And the X code is just come and select this six D, d86d8. Downwards, pres and that very perfect. This color, we're going to be using all through very perfect color. Now, press on, sorry, sport. Escape, press on V. We have this as move downwards. We try to escape fine. You can see white and brand color, perfect. What do I do? Iselate on this. Then make sure this is the brand color. What do I do? I make sure I this color. What do I do? Iselate on this. Then come to what come to plus as usual, thew brand color. Just have to put what brand color to brand brand Bron color two is one then, very, very perfect. So now we have two different brands. Reason we're assisting the brand colors because we say under the same tab, page one page two is the difference. Okay, good. So now let's move, let's move right here. Now, control G. Just to see where our design actually falls. I need it to be in line with this. Perfect. Now we need to change the color of this so double click. W double click. Firstly, take away the shifts green need the mal, the field. Just come over we need this brand color. Just select it nice very perfect. The sharp edges of the button needs to be changed. You want to make it we're going to make it different from what from the past, from the first aboga brand. Just come over we call corner radius. I click drag to the w to the right start changing. Don't need to waste time just select on this present 50. You can press 100, perfect, very, very nice. So what you can do actually here is just that you can actually zoom out and see. Very perfect. Sometimes you zoom out this actually changes the front actually changes and there's some things that happen to fine. That's not a problem. You can double click on this. They make it bold, come over here to the front bold Also this you can double click on it make it, make it bold. Perfect. So coming over here. Now what do we do consigning this you click drag this to the w. So what do we do consigning you click drag this to the right, perfect. Not too much just a little bit. So it still own product, service, and what encounter, still the same thing. All we do we need to change this. You need to change this double click on this, then give it what the brand color. Which is, which is this. It has changed. Nice can see. We're moving very fast because we've done things like this before in the first design. So actually, some nice tricks needs to be made to it. So shot is in line. This is in line. Select this and present ship select this, click drag this 11. So the green line actually is the two to guide us on whatever we do. Perfect so ship g. Take it that away. You can see this is not the number of whites that has been reduced. Okay. So you can leave it like that. That isn't a problem. Nice effects. Nice one. So let's see actually on the space from year line from year to year. So I'll select this present on 51, nice. I can just move over here. Let's see the space in here also. Then the 67 wow way too much. What do I do?F all these are actually in horizontal, I can actually select this, select this force, the control group them together. They've been group, select this with ships, prison and shift in selecting all these one nice one then try towards zoom in, click and drag it up a little little bit. Yeah, I think that should be okay. Without even looking at it, I think that should be okay perfect enough. So we have that very perfect. I don't know why actually it kept on showing some wrong stops and things like that. Fine. That is not a problem. We move. We move. Now, what is the next thing to do? The next thing to do is what is to add the theme, the major theme, and the minor theme and also the bott. So we can actually is normal, we can actually selects has been what has been grouped 91. Present shift select the bot selecttin also. Nice one, you can see that. Then what do you do, you bring them down, press on shifts and works and bring them down nice one, very perfect, then drop. Coming over here to the layers, make sure the ambergers didn't collapse back. You didn't detect to be op Nice one. Just zoom in. Click zoom in. Then what do you do? The firstly select this and change everything to words. Firstly, when you come over here, the brand color here. That is anything that has the brand color should be changed to white. So what do you do, there's no we can change anything here. So you just come over, disconnect detached variable. Okay. That's number one, that's been detached. So it's been detached. So what do you do now, you select this then click olden drag to white. Select the black also anything having black, click on the white and drag to to white. Anything having gray or so, click the drag to white. But I don't want the gray taken to white. Just a little bit of white should be added to it a little bit. I want it to serve as a contrast. To the major theme. So what do I do Because we need to make some adjustments, so I can just bring down the porting to bring them down first, bring them somewhere. Okay now. Let me deal with this. Now we need to. Now these are being groups, so just click on them and group them 91, select this only for now. So number we need to change the forts. That's the first thing. And number two, we need to change the words the writings. First thing we do just change the forts, select on this, say the same sanctuary forts, Santy. But this time around century go. Nice, century century go. But not just regular one come over and change word because that is the main that is the main thing. Nice one. We have this here. Okay, bring this down a little bit. Sorry. Conte click on this one and bring this down. Good. So we have this dtgle should actually cover it because probably I'll just try to something like good. So Okay. What do we need to change the text? Pregnancy, then empowering Enter cyclist. Sorry, with versus tech, N, very paved. Direct, we can just come over here press on the move two, which is first you select the escapes press on the escape two. Then what do you do? Double click here? It matches together, double click here. I actually understands. Prep and see if it's actually in line. By the left. Yeah. Actually in line, very perfect. So what do we do? PG again to what to hide the grid layers. So now we have this as empowerment cyclist with versatile deck. We can try to reduce it because it's actually getting closer to the bicycle. Okay, so just present k click wooden click wood and drag Okay. Very, very perfect, then I think that should be that should be okay to the extent it's meant to be. Good. Present on that can back to what do they move to. I think the line and also the letter spaces actually perfect and to the extent wants it. So now is just press on, come by a cliqu drag the cyclist, Intsicly what the brand color. What do you do come over where we have the saved variables, then what come over to tech also. Just bring about some contrast, you know, some contrast between the blue and the white bring about just like we have it somewhere, black and green. So here we are white and white white and the brown color u nice one. So, um So we have this as we as having the brown color also. So cap. Then click somewhere around there. So we can see actually. If you click at this, you can see, and see what is happening. Very perfect. So we have that, and that's perfect enough for us. So now what is the next to do you click Wooden drag this personal sheets. It's make a proportion. **** G. Let's see if it's actually in line. Nice is one again. N one. That looks good. Let me drag this ability bit. Okay, perfect. Now, what do we do? Present, then try to change it because this will be quite much than the last one. Firstly, what do we do? Present, sorry, we change the fonts, very important. Century also century go take this time around. Okay. I'm not going to give you the bod. I'm going to give you the regular. S here is a contrast, the two colors blue and actually white and also see here, the bod century gothic front and also the light century got font. This will bring about some contrast for us. 91. So select this. Okay. I'll try to reduce this just present k to be that bk to that extent. Okay. For it to show the one back to, which is a moved two, one. I can just click drag this down. Click on drag this at this in case of kit in case of anything, actually, it might be too long. Just as on T, everything has been highlighted, price. Now, Purdle into the future. With with our tech. Sorry. Infused. I can continue what I'll just press a because I've seen actually it's not going to be worse. It's not going to contain it to elevate the enter your right. Should be able to know how to arrange works. It will actually help you in a long run very much work. What do you do escape then? It goes back that is it goes back towards the move double click and also double click. Perfect. There's no problem in this actually pushing out than the main the main thing. So five that p to the extent, more than the main thing. You can actually present, click good drag this to P. Okay. Let's out and let's see what is happening right here. You can actually see it's going in line with everything we have here. 91. Perfect. Another thing you should actually selecton this and selecton this, that's conf g, grab them together. Then click d and drag them with, click d and drag them with down a little bit. Okay. Yeah. Nice. I like we have this here. We have this here. Nine is one. We're moving forward. It's getting better. Let me zooming I think actually this is not in line. Sorry. Care double click. Click d to the prison shifts. Sure is in line. That's nice. Now we move to the next step, we start correcting the bones and also the different satisfied clients with their logos in the next video. 24. Tech Brand Hero Section Design - Part 2: In the conclusion of this particular brand ero section landing page design, it remains the button and some other some stuff and some other some stuff Now we've copied the button from the other side to displace. We just press on display on sheet then bring around here, bring into this place. You can see very perfect. Actually, just try to zoom in. Using the bows button. Fine. So select this. When you select this, go to wear, go straight coming over to the field, then actually try to disconnect this away. Disconnect this, then set on this actually post thousand variables, then choose what's the brand color. Very, very perfect. So what else do you choose? Also coming over here, select this. And also, this is stroke, f. It's very important. Try to detach this away. Then select on this then what sorry, coming over here, then what brand color. Yeah, also just double click on this, then detach this away, then select this, then use the brand color. Select this. Double click on this. Okay, fine. W double click just come over here, select on this, then this. What happens? Nothing happens. Definitely this type of this type of icon is not really a perfect icon to that extent. It has some, you know, I still has some edge some outline somewhere. So for that to have just contrast. Finally we have that. Then I've actually provided this for you in the resource file. So just click dw click d and drag it down here down into this space, then nice Control. Zoom pre Pres on K click drag, click drag, drag, drag, fine. Zoom in, sorry, mi mouse button, bring that around there. I want to delete that first. I want to size it and make sure actually present K. Which is in line with this. It's quite small. You can see press, then you can see 91, I think it's actually telling me the length fine. What do we do? I double click on this, then delete. Then you can see it's responding because it's to layer total responding. So you can see the line ten, it's increases, very perfect. Now we're going to do is select this and actually, you need to the radius, the corner radius needs to be changed. Just give it 50 Nice. This also set on this and give it what? 50, nice one, then enter. What do we do for now? Just double click on this and press and press T. We need to change that. This brand uses what by now. You can see our responsibilities by now. Nice. What is around with you. By now, perfect. Escape. Come up by double click. Then present what is for this, but explore for this explore very perfect. Then escape nice one. What can you do now? Don't forget. Looking at the space here, don't forget. You can just come over come over, select on this. Press on, then look at 19, so you can actually use the same. That is the best. So move up. You click Oden press. Sorry, that's a mistake. Press on shifts Click den. Sorry. And drag to the left present present shift to make it the proper present and is 2024, use the left arrow on the keyboard. So just like just like move to the left like pin that is 25 24 minus five s 19 1234. Five nice one. Select your present and 19 perfect. I'm good at mathematics mathematics, good nice one. What do we do now? We have this very path. We're actually going I remains with the last one year, which is trusted by. Now, just like the last one were whereby we wrote 200 plus satisfied clients. Here we're going to put trusted by Trusted by making it a little bit quite different from the last one. Just press on T. I'm going to put some logos. Just press on T, trusted by. Trust nice one escape. Okay Let me change the forms. Something like around, I think is okay, fine. Nice one. Just bring it along here. Make sure it's in proportion, nice one. Trusted by. Apart from that now trusted by, I'm going to put a complex logo there. Tra possible to reduce it to capacity. I don't want it to be to I want it to I want to show to that extent, some contrast to blend with the program to just come over here. It's going to show some two arrows, left and right. You can just click it and drag down. You can see very, very perfect. It's going to show but not too much. You can see perfect. This is bold. Let me change towards medium. Nice one, it's still there. First G, and let's see what happens. Let me close this umbo stuff. Okay. You can see the trot is crossed by. Very, very perfect. Perfect. Now, shifts away. Click and drag up a little bit, nice one. Now the logos, we're going to select actually. You can get logos from anywhere actually. Just go over to plug ins. You select and plug ins, then come over here to work. Just select logo correr, there's a mistake logo crater. It's going to bring out this for you, the one with the orange logo with the white white L and select it. I've actually saved that on my system or on my f already, so it's going to load for you. Now you have this. You can actually select this, you know, get different logos from different places. Any type of logo you feel like, you know, we have black and white collections here also, different worms. Depends on you. We have random symbols, anyone you feel like you just as a map up to use, not exactly original worms, then you can see we need tech. We can actually talk about microsoft. I don't think is a microsoft yet. Talking about Microsoft or, you know, some other tech companies that are actually into D. Okay. Facebook can actually testify to be in Facebook can actually say, Oh, we trust this brown, we trust this brand, things like that. PayPal. Okay. Some other ones like that. A lot of them type, tweeter, fine. It depends on anyone you feel like you choosing. Let me choose Apple. I think Apple should go I'm selling Apple, which it actually shows around there that does there. Apple. I will need seven to eight probably seven to eight probably. Let me go back up and let's start from the start from the beginning. Let's stick for example. Let's just stick for an example. This is a brand that deals, click and drag it can drag it out. That' not a problem. For example, a brand that dealing in light and the s in technology light, whatever it is. So you can actually click or the drag this, sorry. Or just select it. Just select it fine. Okay. It recognizes that this like twice, I did twice. Okay. Apart from that also we have I zoomed out then you click. Whatever you click actually, it's going to just drop anywhere so just click on this also. I think we should click on this. Let me just say something like this. That's six exactly. I need two more. Let's go to the up logo inspiration or something like that. I don't want to use this one for now. You can actually use them. That't a problem. Let me use this and also what else B and white? No. Should I use this. No. I don't want any more with the background. I want a normal mal one dew Let's go to the standard collection. Let me I'll choose. I'll take this. I'll take this then, fine. Nice one. Now you just cancel this. Now you have all this come over here. Click on this spray and shifts this nice one. Bring this, bring this over here, bring this over here also, and drop apple also. Nice. Bring around here. We need to give them the size. Just give them a particular size I would actually go. The particular size, you know, just so you can actually come over here to select say probably 60 60 by let's say 5591. So I think that's this particular. Let me use 701070, 70 by, you know, let's say, 65. I think that's nice. So for this also, 70 by 65 70 tap 65. This also Seven tab 6591 through seven tab 65. Okay. Seven tab 65 a 706570 tab 65 N one, Apple also so we have this 70 tab 65. That's the last one. Let me just bring around. Let me just bring something around there. Let me just click with like this present shifts and present shifts here. What do we do we align them vertically. Okay. Perfect, very perfect. What do you bring around here? Then we have all of these. One thing you try to notice is that when you come over here, you would see actually all these all these Ewart, you can see some are above the ambger some are actually inside the amboger which is not supposed to be. So what do we do? You try as much as possible, select on this select on this, press shift set on this, select on this, select on this. Then what do you do you try to bring them inside inside the tech. That is the first one. Apart from that, the ones inside inside the burger. You can the one below at the burger, select on this, press on shift control, select on this, then select on this. Then click and drag them down here. Very perfect. Now what do we do just come over and select this again. Present control or ship, select this. The ones with this type of around the select select this, select this, you select this, you select this. Then that's all then control what control you group all of them. Very perfect. What do you do? You can see them, bring them, you can see. You can see. You can group all of them. You double click and say logos. You Trusted. Brands, then that very perfect. So adding all these, the first thing we're going to do is what we're going to we're going to change the colors. It has a lot of colors C 14 colors. We have to change everything one by one. So what do we do? Select on this and give it white. Okay. So click Wooden drag. White. Perfect. Nice one. So what I can do is just so that I won't be able to so that I won't be dragged into white every time. What I would do that what I would select this. When I select this tile, okay, just come over here. Just come over to plus. Aw say whites. White, then press enter very perfect. So I want change this color also just select this here right, change to white automatically. This also change to white. Come over change to white automatically. Also come over here, change to white automatically, white, white, white, everything white white, over white, and it goes like that. Okay. Y. Now what do I do we have all everything like this scattered, the spaces in between, we're not sure the amount of spaces we have and things like that. What do they actually actually for apple the apple brand can double click and the apple in between just double click it, you can take it away. Then take this and very perfect. Give it its size. Just double click on this. What is the size, 70 by 65. Come over here. Also, 70 by 65 enter 91. You can just bring it around here. Somewhere around there. You can see. So select's been selected. Okay, they're all together perfectly, always together. So what do you do? The sizes in between this is not the same as this as this. So what happens? We go to if we can guess, that's what Auto layers shifts A. That's where it comes in and shifts A, and it gives them the same proportion. You can click you can see. You can see. You can click d and drag anyway. All in all in one proportion. All in all in all in one proportion. Let me zoom out and fish to see very well. On what all in one proportion. Very, very perfect. Very, very perfect. So what do we do just bring it around here, just the center click and drag to the left, and how you feel like and also present shapes, make sure it actually gets to this place, okay? Yeah. Somewhere around somewhere there. Yeah, that's nice. That's okay. Not too much. Let me try to ing in a little bit. Because that's to be in proper. That's okay. That's okay. So that is very, very perfect. What is the opacity we give this SG away? So what is the opacity we give this? And this is 32, sorry, 20. So we're going to select all these also, give them opacity of 20. Now we need to fit this white and try to produce its opacity. What do we do just come over? Look at this I click in drag to the left it's actually run with trusted by. I think that is clear enough, e one. You can see. Very, very, perfect. So I think the logos are just too much. So let me try to delete something deletes. Then to click on this and what delete it. So actually auto auto layer actually knows what to do. Okay? So nice one, present Shift G and make sure everything is in line. Set this and sket good. Very perfect. We have one, two, three, four, five, six, six logos and perfect. Present shifts G, and it goes away. So we have this nice. Just in comparison with this. Let me delete this in this animal. Nice one. We have this two here, perfect, you can see the logo is down here. Okay. Can actually sites, perfect. I perfect teddies, yes. We can actually try to increase this 11 toward around, you know, not so much 12. This is going to show, right? It's going to show. So that's perfect enough, that's okay. So I hope this bicycle is not too dark here, the linear. Okay. If it's too dark, we need to just reduce come over here, just reduce the data bits and actually has more effect on, it actually has more effect than any other one. So it's more too much. Yeah. Yeah. Yeah, I think that's perfect enough. That's okay. So actually, five, six different brands. So that is for this particular tech complaint. I'll see in the next lecture video. 25. Fruit Brand Hero Section Design: Lecture video, I will teach you to design for a type of brand that sells fruits, majorly fresh fruits to people. Firstly, just like the last one we did, but it is a light the light background stop. Just present f for the frame detopn we begin. You can actually notice now that it's actually identical to the second one we did, and also identical to the first one we did. Come over to what page two. It's present this control C, that's copy. Go back to page four and what control bated Fine, it's based beside and brand. Very perfect. Then what's Z. So now, what do we do? We begin the process immediately. The first thing we do is to get the backgrounds to get the image for this particular because they have their own image. We move down to the resource files resource files nice, double click. Yes, this is it perfectly. Click Oden click Odento the space. Very perfect. And it does so Zoom Pre K. Then you will skate press then zoom in, click and drag to the around here. So two will be Must be two small. Okay. Just try to adjust click and drag. Sorry, S. Click and drag. Perfect. So we can actually use. We can actually use what we call Azzure set on this text of. Firstly, let's changes first. Okay. Let's double click. Can you in? Okay. So changes come then double click and change the words. Let's just say, you know, nature nature brand. Then pre enter now, good. Let's say foods brand. Foods brand, then enter very perfect. Now we have that this is very ambogous collapses, is the fits brand one. Okay. So we have this here. Okay. If it needs any other adjustment, I'm going to adjust it for now, we have it like this. A a fast pace, what is it? In a fast pace, what is the next thing to do? Just come over Zoom, select this, present shifts and eels in this. You click drag present shifts, present, bring them down. Then what's the very perfect. Now we have this set on this one. You can see everything here right now is actually inside the fruits brand. If I collapse this, this doesn't have anything to do with the amboga brand. Good. This is very easy. The first thing I have to do is just, sorry, I didn't select this select So it's very easy. So the first p is just change the phones for this. Change the low gara click wooden drag. Drag it down here. Click on K. You use. Does mean? Play on. Okay. Very perfect. This was what was there before actually, which is this itself, this image. Dies from here, the image fine perfect. Now we changes what brand logo. This brand logo. Now what is the brand name Applet. Now come over. It was group before with the last logo brand. So right click and what's ron group. What do you do? So now you select this then what's present. Now what do you do? Apple. Light, sorry, lights. Then escape 91. We need to understand that the brand color for this is right. Now, it's very fast, actually, there's no need to waste any time. We've done this Lt. Just present. The LIT around there. Just give it. Okay. Let's give it a red. Just come select this. Then red is actually very visible. This is yellow, green, red at the side, is at the other side of anyone you feel like. Click old and drag is the last deepest with the highest intense red was actually fine. You can actually save it as usual, select, then what's plus. This ten a brand. Sorry. Brand. Column three, wards creates very, in case I need it for any other thing again. That's perfect. For this also zoom out, the middleme button, then. Oh sorry. It's still here. K good. Then click this outside. Now what do you do? You click Odig to the middle, present and shift. You can see it's where is at the middle of this drop. What do I need to change, just double click on this and need to change this towards detach this from the old brand color, then come over here and what gives a new brand color. Very fast. Just need to manipulate things very easy for Okay. So we have that, what is the next thing to do. We have this here also. So actually, contain this gray color. I need this gray color for this particlor color around there. So what do we do? This color actually. I'll just have to save this color as a variable plus brown color. Say gray Then press on or press variable, no. There's something called logging, double click on this over here, and give it worth that particular color, which is gray, very perfect. Double click on this also and give it that particular brand color, select over here, which is red, very perfect. Also, the corner would be the radius, the corner radius would be would be, it would be be C 50, then, perfect. Zoom out. You can actually make it in a double click and make it bold. This medium, make it orresponding. None. You can actually make this bold also depending on yourself. That's not a problem, make it both to be different from the other ones we have here. You can see very perfect. I can actually coming over here, select the second actually select what we call the layer grid as usa. You can see. Perfect. Com over here as we changes a colon. The should be 12 present we have. Then as we have eight. We should be able to you can see. So we can press on the present shifts and press on this control G. That was to group we click hold and drag using present shifts is one. This is the middle. Also should be at the end here cd and drag, very perfect. We have that n one. So now fast fast. What is the next thing to do? The next thing to do now is to come over just present shift G. So it disappears. Next into the sat on this, se on this because actually right. Actually, we are using just one. This is actually a mistake. Just one call to action or two, one call to action, not two. Very perfect. So you can see the menu, the links, the product and services is at the menu quite different from this which are the left and quite different from C, which was what's at the right and side, very perfect. So So here I just copy and paste this present sits down. Drop drops at the middle and there's a problem. You just drop it someway zooming pin drag Oh, actually, I should copy and paste, but I don't need it again, actually, because it's actually in the page to fine not detached. So I can actually sell this and words deletes. So deletes get nice, then we move. Okay. Now what do we do the first thing to do is this is grouped already, right click on what's on group. Fine. Now we have only this selected. What do we do? We try just click what and drag this. We don't know how long this is going to be. Select on this, then press on C. We're going to make some changes to this. Perfect. Come over here. Is cover a word to break the walls of press enter freshness and flavor. Nice, very nice. Now what do we do? That is it. So can come over press escape. That's all. Press. Double click, nice. It actually shows you click wouldn't drag it down. Very perfect. Concerning to use different options for the text Coming over, you can actually use the center aligned right aligned. Something like this, back to left aligned. Going to more options around there, talking about, you know, actually, when I was typing, actually up to son caps lock for the capital D W. The can do it you can actually capitalize everything like this. Make everything small like this. Make the first words you capitalize the other ones. The first letter of the word capitalize and the other letters small letter. You can take it back to the original weights the way was before. So actually, there's actually one way of doing doing that. Perfect. But as I was typing, I was actually present on the caps lock for the D W f. So certain is fine, good one. So now what do we do again, I'll just press on C, then click word and drag the flavor. Then give it to a nice brown color. Nice This actually brings up a nice licking contrast. What is the next thing. So then bring this down a little bit first, click wood and drag down, bring it outside, then, good. Now, select on this present. Nice one. Then Taste nature point with roto your journey for field lease 9191. What do I do? John I want to actually make this longer than the one underneath. Click press enter, come over the back space. Space escape click wooden 91. That was a mistake for me. Okay. So you can see can adjust depending on spends on. We have this Perfect. Just the way it is normal escape. Now we have the bottom. Okay, let's bring up the button. Click click wooden drag select on this. Click wooden drags not selecting. Come very select it select name the or the or the cell. Fine. Click wooden drag Fine. The first thing we have to do now is just press on SG. Make sure this is in line. Press on this press on this also control G. Try to make sure it is in line. Okay. Zoom. You can see perfect. Now. Click on this also in one perfect. Now just present G, it's back. Click on this, then detach this brand color from it, then give it a new brand color perfect radius corner, the corner radius hurry give you 50. Perfect. What do we double clip on this. Okay. I double click on this. Then present C. Then we say purchase now, Purchase. Go back. You can see auto responding in one. What is wrong. Purchase now in one. Present escape. So for this, I'm going to put an arrow also put the arrow Let me just come over here. We have the white right. Just click Oden nut, click Oden drag down, then paste around there. We have this. Zoom out a little bit. Past. Scale. Now we make it more bigger. What do we do? We click Oden click old and drug around there. You can see the auto respond. It's at the back. Fine. It's at the front.'s bring good and drug put around the end. That's perfect. Purchase now 91. Okay? I can actually select this and also present shift and select this also then control G. C group don't together is a problem. I want to put them at the middle. This is the middle, but I don't think it's actually going to work like that. I think putting is actually more preferable. You can actually select in the picture, click and drag it up a little bit. Yes, 91. Very perfect. What is the last thing to do? We need the companies here trusted by companies. Let me just papis Papiss sk. What we do go towards page three, C copy contra C, and come over it or we don't choose this actually. We just come over a eels selects the control. Then Okay. Yes, then we come over towards page four, and what do we do? Control V. Control V. You can see it's actually pasted here perfectly. So it's not showing what do we do. Now, we have them all here. So first to just select on this, which is what they called trusted by. So what do you do come over here. Change its color to. That's white Something gray like that would actually show. You see the opacity is reduced. That's why. But that's not a problem for us. Let's go to black. Very, very perfect. So after that, apart from that, what we have next, we have the other ones here. So just double click on this or sorry, double click on this. The attach it away from white, select this, click and drag down. Around there almost like the same thing. Okay. The actually is supposed to be black. As a result of it, we took it from somewhere else. We actually copied it from the last design we did. So the last so there's an effect actually used there that's still affected to now although I'm supposed to know. Creates another one, but let's leave it the way it is. If you'd like to change the color to anything you actually prefer. You can actually get it's taken from the resource resources the plugins and actually redesign. But I don't want to redesign actually. I actually report into the canvas. But I don't want to do that actually. I don't want that let's continue. Come over here the second one, double clip the second one. Then detach this. Select this color couldn't drag down nine is one. This one actually around there to double clip. It's not clicking. I think this is locked, that is why unlock it. So that is it. What do you do? Detach it so select click drag down. Another one, selecttach click on this clicking drag down. I think that's okay. There's still two more detach select this, click on the drag down, select on this, touch, color click on and drag down. That's for this product, perfect. Okay. Okay. Just double click on this. Make it both, yeah, both ice You can see this is actually per brand, very perfect. Very perfect. Trusted by this particular complaint and that actually you can actually see from to two here, perfect. Actually is a nice landing page. I'll see you in the next one. I. 26. Real Estate Brand Hero Section Design: In this last design for a particular brand into real estate. Swim very fast. There is no waste of time. Just present F Azza de stop, nice. Just lick it wood and drag it to make it in proportion. Nice to just drop. We can actually use the last one used. Can I actually use a dark dark one copy and paste. Just copy, come over to page five, then paste here. It's past beside one beside on top. Come over here. 91. Well this What do we do? It's very simple. Before we begin to get the background. Go to the resource file, the perfect. This is the lili drag down here. Then drop very nice and perfect. What do we do now Zoom Zoom Presli press Zoom in it is actually at the middle. Okay. Something like this is perfect enough. Let's move to the right to the ye to the right. T musn't show to that extent. Okay. Just to show you know the house how perfect, nice looking it is to buy when you get into the website, firstly wow nice one, this is nice cool Something like that too. So that's. That's perfect. But I need to increase this present and to increase this, click drag this up. I think it's fit in there. 91. So that's it well covered. Everything is well covered right now. Yeah, all covered. So what do we do? There is something we need to understand from here. We need to put some darkness. We need to put a dark layer on top of this, a dark color on top of the image. So that when whenever I put a text, the tech will be able to show just like we did here, this is around the space, there's some dark stuffs here. Whenever I bring something around here. Okay. When I write a text or something, it's going to show. What do we do? We just present plus we add a color, and this color is 20%. The parcitys been reduced as usual. I fig mat as decals just select on this present hundred sorry, that's ten Contras a mistake. Red. You can see. Now, you can see from that we're planning we're planning to put some black on it just to make it you know just to make black overcome, just to make the photo not lights to make it at least a little bit darker, but it's not working. So what do we do? There are different ways we can actually import a picture. That's why this is not working. We're going to use the second one. What do we do? Just delete this. Then what do you do, just click over click wooden drag. You can see this the image, and delete the image. Very perfect. Second this, select on this come to fill. You can actually delete this also. What do we do? Just press on select the plus icon. See the same thing as before, then select this. Okay. Come over here. This is solid, normal color, this is gradient. This is image, and this is what video. I want to import what's an image. Select an image. Choose image. You can see it takes us straight towards download, FDA resource file, then, T is the image, DO one, then. It goes straight into into the box. Now you can cancel it. You can see a bit right to the fili just like this pluses a color gradient. Is it shows also that this is an image. So what have in the field. You can select you see solid gradient image, you can see perfect. So cancel this. What do we do now. Now we select what the plus icon. Now we must have a gradient on this. We must have a solid color on this sorry. Select this here, solid color. You can see something like this, click drag because this is on top of the image, so it will affect the image. Bring back to black. Cancel this. This is what 20%. So just bring the cursor around here. You can see the left and right click coding drag to the right. You can see perfect. Let's try to reduce this. Click and drag down. It must show the image, but not too much. Yeah, 70 should be okay. You can reduce it to what 50 and make it very clear. But I don't want to make it very clear. I reduce it. Yeah, 70 should be. Yeah. That's something should be enough, so that's it for that. So what do we do? Now, for this to have the same the same background, we can actually use from here. So presto Click present shift, bring it down. Is one. Let's start adjusting. What color exactly do we use for this. We like a pinkish color. I don't need this actually dust the booklet on this delete. C press on what select this. Come over here press on what they agreed. As usual, select Cls. We do have a way up to work. Okay. The air center is 20, is what 80. Present inter. Very perfect. What do we do? Zoom in Now we need to group because actually it was with that logo before the brand logo itself. I actually it's still recognized, you can see Brandi grouped with this. You click click and wards group. A said click on group, you can see, it's mal it's now just a normal layer. Present, tech has a text to them, who changes towards Okay, something like that. Fine. Spread on cap. Click drag present shifts here. Nice one, very perfect. What color exactly is the bron color. Actually, they don't have a logo. I is the main bran logo just like x logo. What exactly is the brown color. It's kind of, you know, pinkish, actually, something like, you know, pink color, something like this. But I have the X code with me, select here. Press f008, press on what. Nice, almost the same thing as the one I have there before. Very perfect. That's a brand's a brand color. Now I'm just coming over here. I come over here. Let me click on this, click on this, try to take this away. Detach this. Firstly, I forgotten. When I click on this, I'll try to make this also a brand color. So what do I do come over here as usual. Say brand color. Okay. Brown color four creates variable. The close very perfect. Now when I come over here, use the minimize button and I come over, double click on this, then I can actually come over here, then change towards the brand color perfect. Also, this corner radius, I can actually select on this put zero, then enter very perfect. Come also, double click on it, detach this brand color from it. Come over here and select this very perfect. For this particular brand, they have the m They have property and they have a. There is not like contact so double click on this and let me see. I just double click. And delete this should be deleted. I'll actually recognized. Okay good. W click on this. Zoom in, double click on this one itself then press on, then changes to property. Proper one click wooden using the minimus button, then change this to press on C. But no, let's press on control, ride everything again. So you can see there is a problem here, so that does not have a problem. Let's press escape. Press on this double click. Click wooden draws the left ledges. Should be 2 " actually three. This is left mouse left. Make it words to perfect. Then you can see present escape. Med mouse button. Click click this old present sheets. I will actually have this here. F that bad. Present sheets g. So I can take away the word um Layer grid. What do you do let this present shield on this, then click and drag it up a little bit. Very perfect. Nice. What is the next thing to do? Looking at this, we throw all this nice then it brings text and a call to action very fast, and the image is there already, so that is not a problem. What do we do? We actually bring this over. We actually bring this over fine Also actually for that you can bring one button. That's not a problem. Very perfect. What can we do to this? Let's just at once, delete this away, we did this anymore. So we are battling now with what we are battling now is what is this. Just select on this onwards, put up real estate. Estates downwards, enter perfect. We are battling with only this nice one. Okay, just click over here, come over here. You can just right click on this then w one group because this is actually a difference. This is a minor text, this is a major text. We're going to deal with this first. On this, then you can just zoom in, in one. Now you can actually increase this and increase this time. From this present in one, then let's Okay. Welcome to caps lock immediately to your ***, enter of comfort and So one. What do we do? Just present escaped and drag this this very perfect. Like this, and bring this over double click on this perfect. What I want to use a center aligned because it must be at the center. Bring around the bring around the This is actually what this is this Perfect. Now what do we do we need to reduce the phones? Come over here and try to reduce it drastically. Let's say at around 50, let's say 50 5591, and that's at the middle, nice. Let's try to use the points. Let's just make some nice adjustment. Just present. Click wooden drag this. Come to for, come over here to get a brown color. That was the next style. Then come over here, select this brown color click drag like this, very perfect escape. What is the next thing to do, bring this around here. Firstly changes towards change the center aligned 91. Now what do we do just present, perfect. Let's type, fine. So from the seamless integration of textures press play of light and shadow every Corner President invites exploration. Okay. And admiration for stop. Come over here. You can right click on this and actually correct. It's for you very, very perfect. What do you do? Present skip click drag. You can actually just bring around here and present ships select this treated centralize it vertically perfect and it's perfect, very perfect. Zoom click and drag present ships a little bit z. Now for the bot dom for the bot click and drag this around there. Very perfect. Don't forget actually. Whatever the shape of this is, try as much as possible to make the shape of the main call to action button to be. Now, let's couple press zero. None as a first step. Then try to detach this one, give it a new brand color. None. That's very good really in designing. That's double click here. Now, what do you do? You changes? Escape, that's perfect. Double click. Present, nice. Contact. Present escape. That's nice. Then click hold and drag present sheet. Consigning this, we're going to use a body button, a type of low outline button just like we use for the first one. So what do we do here? We click on this, then make it worth. We detach this, take away the field. Come over to stroke. Then change the color for the stroke or just come over here, use a brand color, and press onwards for either of the two or three actually actually goes on here. You can see that very perfect. Now what do we do we double click on this, give it the brown color, perfect. Present. We want to change the style front the writing, very perfect. Present very perfect. We try to bring about just put an arrow here or something. Set on this and its click right go resource part this, then drop some present k. Okay. Okay. I actually bring over it and drop, very perfect, very nice. Perfect. We can actually click on this and click on this and click on this. Click on this present sheet and click on this and press. Try to group them and you see. Present sheets and slit on this and press, bring them together, perfect. Okay. Okay. And we got it already. We have that already. It's very, very perfect. I'll try as much as possible to just make sure. Let me bring this around here. Click. Click code and drag it up. You can see 15 15 click, very perfect. Now, what is the next thing to do? Just present ships select and select this country G again. Try to group them together. Composite, but okay. Click code and drag them up present ships and you can see this perfect limit horizon, very very perfect. I can try to put it up a little bit. Okay. I think that's perfect. So this is actually the website actually by a type of euro section landing page by this is a real estate website. The log into the website, into the landing page and the CDs. Actually, you know, attractive to them. And actually, you're able to contact or, you know, explore more sign up and, you know, things like that, actually. So that is it for this particular brand design. So we can actually see that it's actually identical to this the image problem that you. We have two things actually center aligned and, you know, very perfect. Everything is very, very perfect. 27. Food Brand Prototype, Animation, Motion Design & Interaction (Web) - Part 1: Section, I'm going to teach you animation and prototype, very, very simple. Right here, actually, after the page five, just press on plus, then it creates page six, but this page seven half page six already. Just contrast. We have page six. What we do? We started animation from the major page two, which is what, which is this particular one. Just select contra C, then come over toward page six, then what. Controver very perfect. Now what you need to understand concerning animation is that it's very simple. Fine, it can actually look, somehow difficult, but no just follow the processes, you're going to get it. Now, what do we do? We can click over after selecting everything you know as usual, you click present shift and to copy and paste outside. I mentioned the words, it must have a starting point and what an ending point. It has to be two. Cb three can be four. But minimum of two. Majorly it would surely have a starting point and an ending point, and also there will always be a connection from the first point to the last point, the starting to the end, and also movement is very important. Majorly just understand two things. It must have a starting 0.1, ending point, the starting 0.1, so sorry. The starting point which is number one, the end points, which is what number two, the movement. The movement actually focuses on the starting points. You can have two, three starting points, but this end point would always maintain itself. These are very simple animations which we're going to go through just now for you have an animation worku perfectly and smoothly. There is something you need to do. Just come over to the first point over here. Coming over here. Now I good. You should be able to group elements come in the same way the same time. The same milliseconds. If they're coming from the top to the bottom the same time, you should group them. Come from the left to the right the same time, you should group them. Come from the bottom up. You should group them together. What do we do? Now, we have this. We love the first ambog a, we have put the second ambger a. Firstly delete the second ambger. Be whatever is done to the first ambger also be in the second amboger. It's very, very important because when you group Here, you group here, you group this also together and you do not group it in the second, the ending point of the ero section. The animation won't go the way it's meant to be. Might not even, so it's very very important. Now, after you've done all the adjustment, then you can copy and paste it to the next place, which will be the finishing point for the animation. Now what we do without this, which is the mboger. This is fine. What we do, we select on this, present shifts, select on this, present shifts select on this. All these elements are the ct radia are going to come the same way top to bottom. What do we do? You contri. Even if they were group before you have to group, you should group them again. What do you do? You contra g. After grouping that, because the animation is coming from from the top to the bottom in seamless trasation, very perfect one. What do I do? What is the next thing to do? I'll select this also. They should be coming from the left to the right back to its position. What do I do, they are group already group again. It's grating on the group. Contra g. Fine as group three, group two group, group three. Is one. Also we have this. You can see if I try to select on this, I will select what the leaves. That is the leaves is what the leaves is over everything. You can just right click on it and send to back for the meant for us to compare whatever we are doing. Select on this, select on this. For these two, I can decide to bring them from the bottom upward for seamless transition of the animation. But what do I do? I don't need to do that. Fine. What do I need to do? What I need to do now is that. I want to make sure that the two of them come from from the right to the left and in seamless transition. Not the same time. I different time. You can see from the intro video, the solid green bubble that came before the the outline. Seamless transition. You're going to say I'm going to do that, it's going to be this going to be separate, this is going to be separate. But I can decide to just contra has been a group. Come over by a country has been a group. Everything we did group one group two, group three group four, fine. That's not a bad thing. This also separately, tra G. This also separately, tra perfect. For this also separately, just contra g. Perfect. Okay. Also for this solid shape, we can see it separately also contrag perfect. Apart from that what is the next, what is this, select on this. Coming over here. I think there's been a mistake here from the onset. Selected. We don't need it. It's not useful here. We have them all group, you can see I'll just come over over it. No clicking as a movie. You can see it's actually showing them on what's on the frame on the app. What is the next thing, dirtul? I thought I just slick on this. This rectangle I I grouped it just now. E one. What is this? Perfect. I didn't do that. Select on what country it's grouped already, which is this? Perfect. What is the last one? The leaves. Just right click on it over here, and what send to fronts. You can actually click over here and send to from. We you are selected, it may not be the one I'm selecting fine it's one I'm selecting fine, Contras it, but just come over. Select it here and what bring to front then right click again. Sorry. Select it and what's control G group. Perfect. Everything is word group from the leave to the border itself with the shadow. The ro, we can separate the shadow from the bugger, but let's leave it as it is. To the RO our menu to the order now to the 2012 certified customers satisfied customers to the adder and sub adding. We have the navigation bar, and Also we have the solid. Everything is well group now. What is the next thing? Now, there is normal adjustment to make only the movements, and the movement is only meant for the word for the starting point of the animation. What is the next thing to do after grouping everything. What we select here, is everything has been selected, so you click. You can click from here or click from here. So you click Old n drag, you click. That's the first thing. Then press one shift and press on d to click Old, L to copy it outside. Just put it somewhere around the perfect so the starting points and what's the end points. When we have, there was next thing to do, the movements. Moving from top to bottom and you know actually Figma would actually finish every other animation or prototype. This is where the prototype and animation is you can see the prototype. You can see you can see different things actually would actually pop up. You can see the arrow, sorry. You can see there will be something connecting, things connecting each other. When the select on this you can. We're going to connect like this and connect to this and some seamless transition, but notar time. Let's go back to design not to make any mistakes. Ni is one. What do we do? Zoom over here for the first one. We have what forget. You should have copied this exactly right here. N one. We have two we have Boger, W is Boger one. This is Boger two. We can actually double click over a double click and change it to two b two, boger two w. Come over g two. One. This is bugger one, is what b two bog. What I'm trying to do here, just bring the bugger one above this because one should always be above two. That is the nom stuff. So just come over here, select somewhere. This bugger one, is bugle two. There is no adjustment we're making to the Boger two, just leave it the way it is. Just leave it the way it's meant to be. That is for the bucket two. But the bugger one is where the movement is meant to go to because after every movement here, we can connect this using the prototype to this to the second bugger, very very perfect. Now what we do we select this. That has been reported. I what the lit is obstructing my view. What do I do? I try as much as possible to to come over here, I can actually try to look for it group two, then select on its tn. Me some changes. But while making some changes, you can actually mistakenly come over here again and just press the what's called the leaf. It's very important just contras it. You know, you won't be able to do that. Select the liaf, and right click on it and what's send to back. And I'm able to do your seamless transitions, animation transitions and prototype. But I don't want to you just contrast back. I don't want to let me leave it well that. Let me just over around here and try to sell it. I think that's group two. Nice one. You click. Oden drag up. You can see. By to give it a smooth dragon to give it something in proportion, not dancing on the dangling or dancing over. Just present *****. Compres it. You click present ships, they move up, it goes up in proportion, very well in good proportion, not coming in like this or something like that. It's a big proportion, moving up. No mistakes. Moving up like this, in transition, like in smooth movement in smooth movements. What do you do? As you're going up, you can see, when you bring a drop, it's showing outside. We don't want something like that to show outside. When you're make a movements for the animation, you won't allow it to show ups. What do we do Contras it. When you select this, you press on shifts. Press on shifts, then also press on what on your space bar. You click old and what old and drag the little the left mouse button. Again, I would repeat myself. Now do you as usual, just come over here to group two. Okay now, click using the left mouse button, click old. Old it, then press on shift and spacebar, then drag out. You can see, nothing shows outside even if I drag up and get it. Now let me drag down. You can see. You can see the drag back up, nothing is showing y, I pressed on the space back that's a nice short cut, a very nice stricken short cut in Figma. You press on sheets for it to be in proportion so that it move to the left or right, just going straight seamlessly. And pressing on the space back to make sure it's not showing outside. What do you do? Don't make it too far from here. Because of the animation the milliseconds. Just bring it around somewhere and that's okay. It's normal showing, just drop it outside. Yeah, drop it. It's showing. If you can see it actually, just come over when you over on this us, it's going to show so you've selected it from outside. Perfect. Now one thing you have to understand for a perfect 100%, seamless transition, seamless animation. Smooth three. Is downward. Whenever you do such a thing, you've made the movement. Now you've done it from the top going up to the top, that is when the animation is coming. I will move from the top coming to the bottom side, but showing at the top here, that is coming downward in seamless transition. Sinless animation, just like you've seen in the words in the intro video. It's going to move like this, coming downward, everything is going to be the top end point here. You don't need to worry about how the animation does. You just give it the movement. Figma would calculate the millisecond. You give it this milliseconds, Figma would make it transition in a very sameness way. But to make it more perfect is that word just come over. Don't go to field. You're not feeling anything. Come over to layer. You can see pass through axon is just give it as it is. Just come over to the opacity. Select on this away give it zero and what enter. That is the way we're going to do everything. That is what we're going to elect this about simplest transition. That's it. Now let's go to the next s. This is the next one. Select on this. You can see I'm selecting on the left. The s b and over. You see, that's Group three. You click left up. Reason shifts. That's a mistake. That's a mistake. Sorry. Group three, the left mouth butting select. O its select s. Reason shifts and space ba click Old and Drags to the lat. You might finish it? You might stop here fine. You might make it disappear completely. That's a problem. Leave it a nice one. What do you do? Select on this ward very important, very important. What is the next thing to do? Just zoom in. Now don't forget because this animation, this one actually order would actually be quicker than than our menu. What do we do? After selecting this, we press on shifts. Sorry. You can actually this is it. Group four, press on shifts and what select is all. We might not select because of the leaf, which is what's on top. When you select on group four, s and press on shifts come away and select on group five. That's not a problem. Click. Press on shifts. Sorry, confusing. Select pres shift a pres space, move like this. How long do you want to move to the position? Then what again, select on group five only. The move its more pres shift a pres space by move it's more like this and fine. Let's leave it like that. Then what come over zero. Be you've seen how it actually looks like in the intro video because this actually the solid button came faster than that. You set these then what selection p zero, then zone. We're going smoothly. What is the next? The next one to do right now is for this 200 plus f c, we just comes group six. Click, P shift and space, bring down, not too much. Select zero Nizone. Select these are also the. Group seven, pre shift and make it coming down more than this act. So now zero. Perfect. Now we go to the Amberger bog bog Boger switch. Group nine. What do we do containing the Amberger? We click. Present shifting in the space ba come down. Is that make it no stop. That's not a problem. Stop a problem, but let's go down. Yeah. Let's go down down. The select on this e zero. Perfect. What is the next thing to do? The next one should be what the solid select on this. This is a solid nice. It depends on how far you go because it's Because the animation is calculated in in milliseconds, in milliseconds. If there's something actually you try to. Let me show you just as an example. I'm actually teaching you. Click, Pres on shift and space back. You move it actually around here. I'm not coming outside too much. I don't want to be here. I want it to be out outside. Fine. You see it's around here and I try as much as possible to come over to the leaf. This is the leaf, Clicke present sheets and what is the space bubbles and drag it outside more, go outside more, far away. You can see it actually somewhere around here and what is the leaf. You can see and this is what's it called? This is the solid. That is the solid would actually move faster, would move faster. Into the frame, into the animation, then what's the the leaf. That is what I want. The solid should move faster. Then the bugger comes inside. Then what happens? The leaf comes last. That is the goal. That is the aim of this particular animation. Now let me select on this. This is the leaf. Don't forget give it zero. It's very important. Let me select on this d give it zero, zero, zero, zero, zero. I mean, I'm looking at this place actually around the side zero, 000. I think there is one I give net zero. So now, what do we do? With through with the movement, we need to transfer this seamless transmission to this. We need to connect this to this. We need to make sure there is an interaction. So what do we do? Just come over to prove that simple. I think, I did that before. If you want to cancel something, you come over to that, that interaction that connects connected rope, click wooden drag it down and it goes away. Very simple. 28. Food Brand Prototype, Animation, Motion Design, Interaction (Web) - Part 2: You come over to prototype. You see when you just over around somewhere you see you see this. You see a sac with a plus icon in between, so you can choose actually a particular rope around here particular rope and just connect like this, something like that. You can move from here also connect to this place. It's in different ways. You can take an element inside somewhere and just click. It's in different ways. But what we are going to actually do here is based on frame to frame based on frame to frame. Just take this down, take down. We don't need it. Just set on this, I set on this. But the thing what we did say is that because it is a starting point and it's the end point, so it start from here, it's NC. We're going to click around here n Tropics here, you'll see all these places will change and this will pop up. This is where the settings are. It's very important to understand this. Now, don't forget I have said, this is the starting point. This is the end points. We've gone the movement, the movement is always at the starting point, and this is the connection, and this is where the adjustment, the frame pass, the milliseconds, how many minutes do you want to work out? It's very simple. It's not even composed you memorize things. When you're doing it and doing it often, you will get used to it. Now what do we want? This is the first thing you do. You need to come over to plus here. You don't need this. You don't. To cancel this way to cancel. If you mistakenly cancel, just come over, you can see interaction. Interaction don't touch anything, come over to interaction. C on this and it pops up. It's just like it you can click and bring it around here also. That is not bad. You can cc again. You can click, it depends on s a pros. Nice we have this perfect. Now, what is the next? The first thing you need to do is just you come from top to bottom. Now from left to right, act. Click. That is How do you want your animation to be triggered? To be triggered. This is the first thing that happens before the animation actually goes wide, you know, comes to limelight. Nice. You say none, find there's not a problem, so there's no animation. Nice. You say on click. That is whenever you click on the on the screen, the animation starts. Whenever you drag on the screen. Whenever you over, just over, using the mouse by while present something. He game path. Mouse enter, Wever the mouse enters, just like it over. Whenever the mouse enters into a particular into a particular page. That is when is coroll down and the mouse enters into that particular section. The animation pops up. Whenever the mouse leaves. It's very, very interesting. Whenever the mouse is down, the s crod, whenever the mouse is up. What do we need exactly? This is an animation whereby. Whenever anyone enters into a website, immediately, what happens, the animation pops up. Not until you move the mouse or not until something happens. What do we do? It is after delay. When I place after delay is a bring of properties and functions. You can see. Yes, we have this. You can see. Now what they have on here is that it is set to none as I've done before. When you select this, just navigate to. That is we're navigating from what Amberger to Amberger to you see what happens. If you are navigating back, set variables, but we don't need all these ads are not important now. Just navigate two. You can see navigate this navigator has navigate we to non again. You click and what ambog two. It is making this fail. You can't even select this because the animation is coming from here. It's flowing from here. The interaction is coming from Amberger Ambog two, W navigator to Ambog two? Perfect. You can see. After delay, 800 milliseconds. Now we can adjust this, but leave it as it is. I use 800 milliseconds most time because that is to say, if it's like 1,000 milliseconds, for example, that is going to be slower. When you pop into a website, for example, immediately, it loads This is after delay is 800 milliseconds. The animation starts. The animation starts starts. The mission starts start moving, the elements starts moving in the particular frame after particular section, 800 milliseconds. That is after the delay 800 milliseconds. But another thing is now that if you increase this milliseconds, it's going to be ser slower, slower. But just leave it at 800 milliseconds, and you can actually play along with it. You can actually select chemical one and select. 300. Yeah, leave it I was 800, very important. We navigate to the mboger two. Now, this is the type of animation we actually watch want, is it to move in, move out, push, slide in, slide acancy. Sometimes we use 100 or IOS moves, especially 100. Okay. Because I'm much more used to. You move to the left, when you click on something, you just see the screen I moves to the left, the interaction. When you go back moves to the right. Move move out, push in slide inside out, something like that. But the most thing we use actually in Figma is smart animate. It's very smart. No int, but smart imate. When you select this, some other options pops up from after delay econo milliseconds and we get to bo the two. Smart animate. This is another thing we have to understand when I bring my mouse here and over around, you can see. You can see what would actually happen. You can see this is just like a preview of how the animation is going to actually look like. Now just come over here. Now we have this. Now, this now depends on how you want to animations apart from the delay, which is in milliseconds. How do you want your animation to be? P is in, he outs in and out, Hs in back, he's out back, he is in and out back. Customs, Jane too quick, bounces slow. Custom spring. You would have seen from here. Let's just zoom in a little bit. Sorry for that about this. Now, you would have actually seen. When I say linear, you can see the animation would actually preview you can see line. You can see is in, you can see is out. Different, different things are app. But actually, if we tried the best way is for play the prototype and see how it is. But everything is almost the same thing. But let's look at G. You can see what happened, is different from linear. But this is what G you can see, perfect. V quick. Quick. Nice one. You can actually change this milliseconds. That you can change. The more incase more you increase the milliseconds, the more slower, it is. You can see. Just look a quick for example. Quick. When I change it to 2000 123. You can say how slow it is, you can see. This is 600 milliseconds. You can click again. 100 milliseconds. First two. Fast. Nice. But when I say, 5,000 milliseconds. Very slow. The more you increase, the more slower. The more you increase, the slower the animation is you can see, slow. Let me take it back to 600, see, 600. V fast. Now quick. That is quick. B C. Bounce. You can see it's bounce, it's bounces, something like that. It's almost almost relating to Gen two. G two also it's bounces, but it's going to bounce little in a little form, not showing bounce to that extent. You can see nice one. We have slow slow. One I use this. It's nice. Custom spring you can actually customize your designs. Do we want it to be bring this down like this. You can see, you can see. Sorry. Let me bring it out. You can see how this is. You can see. Depending on how good someone is. You can see. You can see. You can see it's balancing and balancing. That's why you see some websites, say some the elements keeps moving keep bouncing, something like that. Keep bouncing. Like just this also. You can see. I'm not going to do that. Reset scroll position. I'm not going to use that. I'm not going to use anything custom. What I want to use actually I use bouncy, Nis one, or I use gene. I like to use g g. That is my aim for this. After delay, it third milliseconds navigate two ambger, to ambger two start smart animate. You can play around with the other ones. For you two people to understand, it's not at all. We have gen also, which is what I use two milliseconds. N one. This is exactly what I like. This is exactly what I want. I wanted to Jane two with 2000 milliseconds, not too slow, but slow in some ways. Perfect. Let me zoom out actually coming over here. Let me reduce the stuff. I think that's okay. Perfect. We have that, so Nice one. Now I can that's all I can actually cancel it's a delay to Abog two. If you actually click over here, it's going to cancel everything going to start again. Doc. After delay a milliseconds navigate to the Abogate two animates SMA animates chain to 2000 milliseconds. Where is the action? What do we do the action? Come over here. Don't forget not design, set on prototype. You go back to design, you keep on designing, design anymore. Now, prototype. What do you Come over here, you can see the play body to present. If I click on this here, but don't click on this, come to this tiny small, select it. You can preview. You're going to preview here. Or you open a tab another tab immediately and it's previewed there. Let's see what happens actually the network, it's quite slow. Sorry for that. Yes. Absolutely. Perfect, nice zone, nice zone, F you can try to, you know, restart, try to reload. Wow, seamless animation bouncing. Okay. You can try to expand, opening presentation on vehicle. I don't want to use this. I don't want to use this at all, don't want to use this at all. Let's restric bounce. I don't want to use what's it called, sorry. I don't want to use the preview. I want to use the presents. We're going to open in a new tab and this is the best. Open in a new tab, the nice seamless transitions and animations actually showing you see. Very perfect. Don't forget. The first time you do something, sometimes it's actually going to work out to that extent. There's no need for you to make any adjustment, it's just does like that. What do you do? You can try to come over, like in a food you know. Make it full full screen. Nice one. Now we come over here, select something. There there is a restart button here actually. Probably my screen is not showing. You can see my mouse, you can my mouse. When you click on the drug, you don't click on the drug. You just over, bring the mouse. You can show I will show down here. You can just come down here. I know. My screen is showing it, but just come down, you see a restart button here. You can click on the restart and it short cuts out. Letter, L M and OP Q, the letter. Most times I don't select selected. Most times I don't select a perfect simulation. Most times I don't select the R. I just press my keyboard, the key, the R key on my keyboard. S press R again. Very perfect. I love this animation, Simul. You can see what it really app. You can see actually the border, the green, solid border came faster than the leave and actually the leave actually surpassed everything. That's no b. Actually one. You can see. You can see the navigation from the top coming down. Perfect. Very perfect simulation. Perfect animation, you can see how they are bouncing, you can just look at the Porge bouncing perfect. You can see a nice one. The leaves are bouncing perfect. Nice. Look at the dive into Boger, the blaze and such frequency, actually came from the left, the navigation from the right from top to the bottom. You can see the order now and our menu. You can see order now came faster than our menu. They also come the same way. But when I actually, you know, use shifts to group them together and move them to the right hand side. I don't forget I use. I went straight back. I use the menu again. Our menu, selected this and move it to the right again and it will actually come slower than the order n and actually meet up the back. Let me let replay using the r. You can see me to meet the order n. You can see. You can see, see. Perfect simulation. The 200 plus certify clients and also the you can see. The certify client actually came up before the r, but it actually met at the same place you can see. I can see this one plus satisfied customer. I paid first faster than the art because I made the aro go downward more than the 100 plus satisfied clients, you can see. I s, it's nice, seamless animation bouncing you just like pouncing pounds quite gin. I bouncun po' bosun more. We can make adjustment. Let's see. Let's come over by you can press on scape. Fine, it goes back come over to projects. You can see. Everything is B Let's see what happens to balance. Just come over here again. What do you do? You can restart. You can place on start, fine. That's not p. You can see. Be I change to full screen the other time but you can see R because you can see at the balance. I don't think it bounce in that regime. Let's look at the second time. The first time It really go well. Yeah I'm actually using bouncing now. Let me try to refresh. Let's see, Oh, my network is gone. Sorry for that. Let me connect back. Nice, connect. None. Connect. Sorry for that. Sorry. Yeah, what now. Now let's go back to the S bouncing tram transition and animation. Perfect transition. Perfect animation. The I do. I say, the first one is. It's going to make you cry. What iation is this. Perfect s on this? What, what heck is this, Pc. Tack. Wow. I don't know what is rank. Let's change to 2000 1,500. Let me change to let's say 5,000 5,000 enter, come over, but you actually work out. So I can see. Well let's go back to our normal we two and just put it at 2001 to three and just go back to pres on r. We have a nice seamless transition. Let's come over. You can actually try to always age. It's very very important. Press on r. We have this back very perfect r. Perfect. Nice or. This is what I actually want the first some quite so. Nice one. When you enter into a particular website and you have something like this ps like this, wow. None nice. You feel like not leaving a website feel like just srolling down, see more transitions, seamless animations, and lesson. Very perfect. Very perfect. Now now we move to the nest. Nice, bouncing, nice, ten, nice, slow, nice, fast, is in and out, what's it called animation for another brand actually. I'll see you in a nest because the nest one is going to be quite different from this. Go to be different from this. It's going to be moving from some nice. I'll see you in the next video. 29. Real Estate Brand Prototype, Animation, Motion Design & Interaction (Web): Right here in the second animation and prototype. What I want to do is that I should actually go for this what's it called the second o section, the second o section. But let me go for the fifth one. Actually, it's quite different from the first one. Contra I'm coming to the other ones fine. But let me start with this. Contract. As usual, now as I did in the first animation for the Amberger, we can tras possible. Come as usual, coming over here, then what country group this as pin normal. Straight on this present shift and straight on this together. Just group this together. Coming also, you can just select on this right click. Then what do you do? Right click. Then what do you do? Then group. Now grouping this actually. You select this actually, you can see select this and select this. These two are also being group, right click on them and just what group them also very perfect as usual. Now just select on this and group this, se this, then group this, select these then group this. Sel group Ps normal. What do we do was the next thing to do? Just select on this shift and what. Try to copy it out. Yes. Good. Everything is normal. Then this is what as we've said earlier. This is the starting points, and this is what the end points very very important. Now, the movements should be done on the what on the post. Now let's start with the movements. Now, as usual, s and proto should be in design. So select this, present shift space someway like this. Then present zero, good. Select this, present shift space outside. Present the zero normal. Select this shift and space up there. I is one, so Pres on this and ward 091. Bring this down, shift and bring this down. You can see where it is actually. It's not going to actually have a problem that's a problem like that. Zero. Then make sure this should go present shifting space. Downward, more than that. Bring it down more. The present w zero. Then select this also present shifting space, downward. The present zero, and that's all. What do we do select on this prototype, Connect. Yes. Connected. Now as usual. Just come over here. After delay, as usual, after delay, nice, navigate to what est. Let's change. Actually, let's change it to real ester two. Nice one. Just click back here. To Real e two, nice, as usual, as we do. Gentle, yes, that's what it's meant to be. Then two S. Enter now straight down to where. Here, click on the w present and let's see what actually happens. You're going to love it. Since you're going to love it. You can see? Very, very perfect. Let me try to, you know, enlarge it for us to see better. And you press on what? You press on R. And see. Very, very perfect. Magnificent. Magnificent, very nice. Okay? R again and see. Can see you just, you know, come in a website and you see the cool nice looking animations like, you know, Very, very perfect. Sincerely just, you know, come in one bound left to right and top to bottom, bottom to top, you know, different ways. Very nice and very clear, very nice. This looks perfectly good, perfectly good. So now, apart from that let's just use the bounce bo nice bounce come over to bounce. Let's just just pres and let's see. Let's try to make it big and let's see. Just args new. Oh I one. So let's try to reduce as usual to around like 5,001 to three, enter 91, come over here, then four page. Make it large screen. Full screen. Pres on r. You can see Perfect. Enters into each body. Let's just look entire and no comes out. Nice one. Let's go back to the normal one, which is what we two. Nice J. When you change it just after change back to 2000 123. Nice. 2000 then go back here and whats, pres on r, and everything goes back to normal. Very very well. Just actually enlarge it as I've done like this. Then goes back to what goes back to Normal. So I'll see in the next we're going to be having a quite different animation with prototype also, whereby we'll be able to move the image itself. You would love it. Sincerely, you would. I'll see in the next animation prototype. 30. Tech Brand Prototype, Animation, Motion Design & Interaction (Web): Yeah, we go straight to the tech. Come over here to the fifth. I think you should be the no. Sorry, D thot. Select this contra zone, then paste. Ion. Nisi one. Now come over here. Then pres shift press this, then this, then contra g, that's the first one, ison select this also. Yeah. These are actually all together. They are grouped already. That's group three. Now we have this also. I can decide to just bring them from the right coming like this but. I don't want to do that this time around. Actually, the two is going to come from the bottom going up together, but separately. Let me leave it like this contra G, then contra G. Now for this, present shift also Control G. Perfect. What do you do? Yes. Now, what else do we have? We have everything being grouped. But it's not grouped. What happened? Yeah, that's the background. You click once. That's not the background. That's a frame, you click the second time, then you have the image. Control Z. Now we have this image as well. Just contro fine, put it in group. Fine. We have all the set down. What do we do? Sorry. So what do we do? Click here. Present sheets, then press on out, then up this here. Very very perfect. So now, going straight to what we have to do. Now, select on this present sheet and space in, go up, then you put a prototype, come back to design. Select this. Now we just come over here, as you just press. Also this eso, present sheet in, just bring around somewhere here. Perfect. H, sorry for the discourage showing outside because I have to go back to the second time that's present contro s shift downwards, then space, then pres zero as usual, nice one. So for this actually for this actually, I want to make them come from the downward path, not coming together with that. Okay. I can actually join with that, but I don't want to join with that. So I want them to come from below. So just set it on the shifts then, you know, like this, then present zero. Okay. And that. Then bring this also downward more than that. And what do you do? Select this present zero. Also, select this present shifts then pres zero. For this last one, which is trusted by different companies, I can act this whereby they can come from the they can come from left and right, just like we did in the last one for for the real estate brand actually, that we have the look of the brand name and also the navigation coming from left and right up. I can actuate that for this also. Come from left and right. You got a picture. What is the last thing? I've made sure that the first animation, which is the berger is quite different. It has the particular difference. The second one. The second one actually, things are coming from downward and some nice stops, left and right, the logo and for this actually, you're going to see the bicycle move. Yeah. You're going to see the move. Now for this, just click sowe just click and press on shift and what space by, it's goes. But there is a problem. Why is shoring, can be a problem. Yeah, where the mistake is is that, select on this deck. To fil. It's fils. It's fils white. What do you do? You take from here, you just click somewhere anyway, bring it what, black and it stays. Now the color what remains black, no white. Let's try it. Now, select an image. Click, press on shift and spell and speak. Very, very perfect. Not up too much. It's going to like driving boom boom, boom, bom. Am tack, I'm tack Nice one. Let's. Perfect. Very perfect. Everything going to know collapse. Everything just going to just collapse so we get up. F, let me just rename this, double click. Give it two, nice one. Now, what is the next thing to do? The next thing is just select this prototype, then just connect. You need to interact. Now, as just come over towards after delay, then navigate to you see tech two nice one, smart animate two as, A 2000. Fine. It's all done. Now we have everything set. Now, don't forget actually. After change let's go back to design. Now here, the ball round is what is black. Here also the t two, what black. ABS is not black, ABS is white. It's very important because it's going to move because this is going to move the background actually. Around actually is black, so it has to be black, so black black. Just slick on this actually as I've done and change black there. Because if you just slick on this and let's look at it. If it's white, you can see, it's going to have a problem. It should be black, good. Now, what is the next thing to do? Let's go straight to the point. Now, prototype. Sin is all set. Then let's see the nice transition animation. Let's go. Slow in slow in, slow in. Perfect. As I've said, the first one is always a problem. Yeah it's always a big problem. What do we do? Just. Perfect. One, look at the bicycle, just like mmm. There's something I think we need to do. Yes, which is what? Just come over to design. Look at this. We need to watch 28 to zero. It was showing before, which is not me to show at all. We don't want it to show. Let's come back here. Yeah. It's just like coming, just like you know Yes, you can see the by now epler just like moving by now, coming more faster than explore. Interesting actually. This is tactics. This is creativity. Very creative, creative. You can see trusted by also just coming down. You got a bicycle just moving in, o, some nice texts. You can see very perfect. Very perfect. A of us of. So we use the bouncy. Let's try to see what bouncy has for us. But bouncy hasn't stop for us, okay? Bounce, C, bouncing, bouncing Banc Come on. That is nice one. Nice one. I love it. I love it so much. I so much love it. E one. V fast. Let's change I don't want to play too much right now. Let's change to 5,000. Yeah, nice. Let's see what happens. Let's get sc. Then how? N one, is one, wow. Delicious. That for this particular tutorial. I'll see you in the next one when it would actually be different, quite different. The badon is coming in. Slow motion perfectly the this. I'll see you in the next one. Love you. 31. Fruit Brand Prototype, Animation, Motion Design & Interaction (Web): Now let's look at the last design. I'm going to be very fast with this. Now, coming over I select this country C, that's copy, come down to page nine, then page. As what do we do now, we select the fours, we should come from top to bottom, things like that. This should be one. Country G separately, Ct g, separately, Country g also. This is coming from the left. This coming from the right from the right, and also this also let me separate this O group. Good. We have this group together. Just I don't want to group it again. I just contras. It's group already group three. Here we have this also, then group this, then this also, then what pup this together, contra. Then that's perfect. What do we do set on this and make sure it is wine. It's not like colors like this, you can see. It should be white, perfect. What do we do? You select this pres, shift and you copy outside. Now, as you, slip this spas and shifts in space outside is. Then you zero. Perfect. Bring this one up like this shifts, zero. Perfect. Select shifts and space give ero. Select this shift in. Oh, no. Shift them with space by? No. Zero. Then this should be coming of. Let me say M depends. I can actually say it should come from downward or from the right. Let me use this from the right. You should actually make sense. It depends on your movement. It depends on your the person because this one is actually coming from downward sheet. I want to make that difference. Do What is nest? Only this. I'm not going to move this to the left or something. I want to do I'm going to do something marvelous. Why do you just select, click the left mouse button and press shift and then you something like this. You can see that. You see what would happen very perfect. Now what you come zero, then enter perfect. What is the next in? Select here. Look at a nice transition. Prototype, the select and no. It's goes like this and as usual, After the latest 800 MS. Go to Foot brand. Don't forget. Let's try to change brand two. No bring about any confusion. Yes. Aim Smart Aimate, then what 2000. No change to N two, then two than. Very perfect. Let's move toward. This was one years before, no. Let's repeat and see what happens. Nice. We don't need it now. Let's just go straight to hours. Let's wait and see the nice transition interaction. Animation prototyping. What are you call it? Yeah, we're going to be seeing this now. Perfect. But don't forget it is actually going to be like this in the first instance. So let me press on r. Let's see what happens. You can see, very perfect. Is e one, nie one see the top, the logo come from the left side log in the navigation bar discovery, the porches now you trusted by just look at the apple at Nice. Coming from outside p. Nice one. That's nice. Let's try to use the bo C C, C C. Let's that. Let's see what happens. Preys on. Let's come by and what press on out. Okay. Block buster. See? Very perfect. Let's try to reduce it. I just like it. 5,000 press enter. So going to be using the b again. Let's see what happens. I want to make that to as f scre press. Nice one just bouncing, bouncing, bouncing. Let's go back to our number one t, which is the Jen and we have the 2003, 2000 MS. Then that is actually all for the animation section. Let's see what happens. Nice. Perfect. I see in the next video in the next lecture video. 32. Introduction to responsive design: Responsive design section, I'm going to start with the real estate brand responsive design because it is more of automatic responsive design, and after that, we move to the food brand responsive design, then we move to the tech brand and also the foot brand. I did this to make sure that we learn the automatic way of creating a responsive design before using the manual AC in the next lecture vi. 33. Responsive Design ( Mobile & Tablet View) - Real Estate Brand: Right here in the pay ten, as I've said earlier, I said, we're going to start this responsive design with the real estate because it's more automatic and a little bit of male than the other ones. Actually post learn better about auto layout and constraints. Now, the move straight to where it is actually. This is an actual contras. The move to P ten. I can try to rename all the pages, but leave it like that as not a problem, then controve fine. We have this path. Now, which, it's very simple. We're going to do the tablets and also for the mobile. Very important. If you want to make it responsive, not the mobile only. But we're going to make the mobile going to animate the mobile, not what's it called, not the tablets, it's very simple. Now, now I want to us to understand something concerning this. Now, let me in. Now, this is a logo. The first thing we do is just you select on this logo. When you select TC, we have a constraints. This is top left, right, bottom, center. When you come over here, these are other functions also which we're going to lend, the most important ones, the fundamental ones. These are other functions which we're going to lend and understand here. Now, for example, when you say responsiveness, when I select this frame. Let me click. Odd you can see. The sign in the about or is the property, they are not moving. Let me control it. Let's see what happens. You can see the mi is moving. The local is moving what pen. Now, select on this and see it has what, it has. It is constraints. When you say constraints, it is fixed. The top and what's to the left. That is, you can see. Let me some you can see this blue line here. This telling it speaks to the top and what's and also to the left. You can see. Now, that is the reason why actually appen like that. But let's try something and let's see what happens. I'm going to select this, pres on sheet and select this together. I'm going to group them together because I want them to move the same time. Now when I select this, come by, select this. You can see top and what's top and left. Top and what's and right. Select here. Let's press on this. When you select this, you can see blue blue. Means it's been selected. Okay. Select on this what, click ON. You can see very, very perfect. That is how it start. That is the automatic aspect. You've given the instruction that what you should be top to right. U should top to left. You can see. You can see the blue line also. Let me select this. You can see the blue lines come from top to what to right. It's very, very important when you're talking about responsiveness. Now, responsive design, this is auto layouts and what and constructs. We're going to be using a lay down here also. Auto layout on what constraints. It's very, very important and talking about tablet and mobile. Now that for that actually. Before I actually move into going straight to the tablet, we need to do some things and actually show you some things right here. Now when I select this, you can see, this is actually and it's moving. But we come to your s of comfort and style adding, adding and the botm downward contact force. They're moving. What do we do just contras it, Zooming into bit and what come over here. Now, this as to be successful with this and do this perfectly. W to group, right click, the w on group. They all have to be separate selects, C, select this and select this. Another thing we have to do is that we need to group this also because it's going to be like contact us should be up and exploer should be down underneath contact us. It's going to be responsive and it's going to understand, it's going to be automatic. Just right click here and do what then and gro very perfect. Now what we do, we select this. When this is being selected, we pres on shifts, select this, select this, select this. We are grouping them again, yes, but what we do grouping them like contr g. Now automatically as then what shifts A. Given to what auto layout. Ato lay is what shifts A controls. Or you come over and just press on what, press on the plus select the port, the plus icon and gives us what auto layout. You would have sn, what is wrong with this? Yes, you just have to control it yourself. It's very very important. Now, what do you do? You can see this right. We have aligned bottom left. But once everything is centralized, you can see all in the words all the center. Now, you doing that doesn't mean it actually has a problem. You should actually change some things here, and it should what's aligned to the center. That's the first thing. Now, Apart from that, what does the next thing to do? If I come over and you don't like this. Nothing happens, yes. Nothing happens. It is step by step. It should actually be follow instructions, C chronologically, it has to be well organized. Now we have this now because the reason is I want everything to be like, k, the space in between the agin, everything is going on well perfectly. Here also. They should be well placed, they should be well correct. Now Aveda, what is the next thing to do? Now, actually we can actually use something like this. You can see. If I had group if I had not grouped this before earlier. It would actually come in a vertical expert, having a vertical layout. Let me turn back to this. You can see horizontal layout. Then this last one was what we used before. Wrap. If that is, it wraps everything in that one container for that auto layout. Auto layout actually puts everything in one particular container. It wraps everything in one particular container. It depends on what you want to use. I want to the vertical fine. Horizontal, fine, wrapping it? Fine. It depends. Now, That is that for that. Now, what is the next thing to do? To make it responsive and you know, whenever I change it to the tab or the mobile, make it calm down and everything goes perfectly well. Now what do we do? Now, this is very important. You pay attention to this. Good. Now, firstly, you select this. When you select this, what is the next thing to do? We've done with the auto layout. Now, what do we do? Now I ant done the auto layout. Now the auto layout is done fine. That's good. Now what is the next thing to do? Now, we don't have anything to do with the auto layout for now anymore. We've done the centralized, everything has been the margin, everything is fine. Now let's flow this instruction. Now move straight to the construct back. Now what do you do? Because when you select this, you click as as you can see, nothing is happening. H to make something pen, select this and come over to what's left and right. That is not just left, not just right, not the center of scale, left and right. When you select write what happens. First, let click here. You can see moving, what is no I want to use, select on this, pres on this and C, very perfect. It's moving. You can see that. Let me zum Elizabeth. You can see very, very perfect. You can see that. You can see that. Ah ha. Welcome to your Style. Everything is not going the perfect way. Yeah. What do we do now? Just come over here, you can select outside, then select on this then. Good. Then come over fixed with. Yes. Then we need to make something very much more responsive. You double click on this, only this. Then come over here. Because we have a container normally. We don't fix with. All these ones I just like you children in a particular container. You want to fix the way, you fill container. That is it's actually fills in the space of that container. It's very very important. Sect on this also. Come over fill container. Sect on this also. Now, as a professional in this actually, if you actually select this and also fill this one out so it's going to pose some problem for us. We prefer not to fill just contrast. We prefer not to fall here. You don't worry going to understand what I'm saying. Let's just continue with this. Now, after that, just come outside and click outside here not to confuse you, then select your back. Now what do we do? We fix what we met to fix, we fill the container and everything. Now it is in wrap. Now you need to change, come back to auto layout and change what vertical layouts. We have b here, we have horizontal, this is rap as you see, but vertical layouts. Now let's test. Let's see what is happening if we're actually progressing. Select that and click, Oden Dragon. You can see very perfect. We're move in. We're progressing. Yes. Now contrast, we have that. But actually contact us explore more actually, no. If you could remember, firstly, I actually group this also. What I can do is just double click. Press on sheets, then select this also. Then what's control g? I've actually grouped this. Then what do I do? I give it to layers. Now, the layering that it's still in vertical. The pic change it back to what horizontal and it goes back to normal. I want to change it back to the way it's meant to be. Just Tuggle between this end. Actually, everything goes perfect love. Let me just make it what horizontal or A fine. Horizontal is pap select on this thing actually takes practice. Practice because you need to fix everything for us, then after fixing them, then what do you do. You go to contract, give it left and right. After that, you move to, you go back to where come over to the frame and give it you choose them one by one. You can watch the video again for you to be able to understand and correct it down. You choose them one by one. When you chos them one by one, what happens, you fill them in that container. Now this is being selected the click Odenra. You can see, very perfect. It depends on exactly where museum out. You can see very, very perfect. You can see, very perfect. Let me increase it more. You can see. We have this, and it moves. You can see it moves, it moves. You can see very, very perfect. You can see. Now contras it. Good. Now zoom in. Fine. We have this. Now, for us to know the tab itself, to know the size for the tab, select pres on F, which is short for frame. This table, select on tablets, being selected. We have different sizes for tablets. We have surface pro eights. You're not going to be using this pre select this. You can attach in the frame there also. IPad many. Something like this is actually come to frame again. This perfect That is not a problem, and we have this. But I'm going to what am I going to do? I'm going to use the second one. But I'm going to use it here. No. It's quite almost the same thing as a phone. I don't want good, good. I'm going to use this. I'm going to use this exactly. What do I want to do? Because I want to make the length of everything the the same thing, but the width should be different. What do I do I select on this prison sets, present Bring this out. 110, spacing. Now what do I do? Select on this and I've selected on this, then look at the width 34. What do I do? I select and give the width of this what eight d and what 34, then per enter perfect. You can see aha. Now let me d this. Let me oom V perfect. Now what do I do? I can actually. Come over, try to increase. Now, let me say for example, now, I said 834, you can look at it with, you can see, es 34. That's 832, fine that's a problem. That's that's still okay. Now what do we do? It's very important we understand this at that. When you select on this, this is tab. Now you have to come over to the grid layout, select the grid layout here, and actually be eating to bring back the grid layout, shift what shifts G. You can see perfect. Now we're seeing the same grid layouts we used for for the dektop for this, which is not meant to be. Because it is reduced. The screen is now reduced. We change the count to something like ten and the polling to seven and press enter. You can see perfect. It starts from here and ends here. Just come over, select this, then you present shifts, then you can see that red line the good set on this also present shift and we'll try to go. God, nice one. What do we do consigning this also? What do we don't need to start changing these and this non, we don't need to we have the size there already. Click the present sits, I'm sorry. Click this present shifts. Bring up, what do we do? This is the container itself, the auto layout. Select this present s. Then you can see very perp I can make the what's the call. The frame, get to this end here. It depends, fine, that's okay. If I don't want to, I can make it, you know, you know, smaller. Let me put it like that. I think I like it like that. Pre shares press, print it down. Perfect. Then shift g, take it away and you can see, very perfect. This is what this is for for the you know, this is what this is for what's it called for the tablets. Okay. Now anther I can do is just come over. Double click on this. Then what do I do? I give it what vertical. You can see, very perfect. Now giving it vertical, there is something we should do. Now before that before that, let me control it and make tablet so. So now, we have the tablet. Select and this press and shifts, then press, then you copy and paste it outside. One t, one third good. Now, come over, double click on this and give it, give it vertical. When you have something in the vertical aspect, you need to understand this perfectly well. Now, we have this. This is another auto layout exact look at this. This is an auto layout exactly. Confuse because you could remember I gave it its own auto layer separately apart from normal the whole auto layout we have. Now, for us to make this because sometimes when you use in the mobile or sometimes when you using a tablet, L et me say mobile, for example. You can see the total action button would actually be large to an extent that it covers everything around here just with the text Res. Yeah. That's what we're going to do right now. I don't want to change it back to the horizontal. At make it quite different atom vertical, everything being stacked on each other like layers. Now what do I do? This is its own auto layouts? This is its own auto layout. What do I do? I select here. I can press on to make it balance. I I don't pres on others on the public it's going to balance itself. Now, don't forget, I select this first, then click and drag outside here. Perfectly or I present oh, no, present oh, leave it like that. It actually gets here. You can see very perfect. What do I do? Now, don't forget when I select that is the, I give it to fiel container. I decided not to give this the Dulcic field container. Now it's time for me to fill the container. F container, you can see very perfect. What fill container. Don't forget. The last time I did this, I didn't fill the two C bottom, the cultural action. I didn't fill them in container, I fill the first da and the sub a. Then now I'm filling this because I know I'm going to make things different in some ways. Good. We have this very perfect. Very nice and perfect. If I actually want to, I can actually select this and try to change the margine something like this, but it's not looking good, leave it way. It's just perfect like that. Good. Yeah, we have this being perfect. I love it way. I actually like it. It looks good. Nice. Another thing we can actually is just come over a sec on this. Come over to the image. Then come over to Phil, then come over to Crop. Want to make this image centralized. So the image is actually, you can see you can see the cars when you bring it down, it becomes four arrow. So click. Press on shifts and then just transport it in the med and that's all cans. But this also set on the image. F come to Crop. Select this arrow, then bring it to the med, very perfect. And we that. Now we'll move into the word to mobile view. I want to use the mobile, I want to use the present shifts then what's pres on then print outside. Okay. Perfect. So what do I do? Press on F, come to frame, come to what come to phone. I'm going to use the latest iPhone, which is here. Okay. Perfect. So what I actually want to check there is what I'm going to check the w. Four. Now, I click when I click, click Oden drag around, you know, make it four is 440. Then 429. I can actually chain myself just coming over here and just 448. I just want to see how it's going to move very perfect, you can see that. I'm going to delete this nice one. Now, time to adjust something. That is just the little minor thing we're going to do. Actually, you're having this you're going to delete this. Going to be using the Amberger like the Ambergain. We call it the amber gamin first, we can actually come over here to the w grid layers. Shift G, show the grit. So sorry. Sorry for that Shift G, show the grit, then come over change it to something like around five or four. Let's say four, perfect. We don't want the space just like, you know, having the space very much here. I mean, the padding from this particular border to the space is very large. But for the phone, when you check your phone, you see those apps you have for those websites, the margin another much. Imagine another match. The white space, the negative space, another watch. We're going to make it small. Press on shifts and brings. You could very perfect. Now for the amboga. The amga is a very simple thing. Let's pres on our go. Click won't drag like this. We have it perfect. What we just select on this and give it that color. Then click, press on shifts and o down. Drag. Yes, then country. Very perfect. Present sheets, present sheets, then select them, then contra very perfect. So I can actually I don't think it's quite too big. M 2024, Tab 24, then enter that is not even to big. So bring it out. Nice one. What do I do? Let me let me up and let's see what happens. It's quite too big. Let me just click here and just try to know something like this. Let's see. Let me just press on K and try to reduce the dt to dt to. I think that should do. Just click here and Nice one. Nice one. I think it's actually in proportion with this. Let me just a press on sit the. It stays. Let's zoom out and see what happens. Yes, very perfect. Yeah. We like it like that. I love it like that myself. Present you can shift, spring up. Then perfect. I can try to reduce the font size, but I don't want to, I just don't want to. What do I do? You can see big buttons here, don't worry, you're going to change some things that you go to love it. Seton this press on os then Cs. Now, sets and press oats for it to be in proportion. But before you do that, you've pressed K before, which is scaled, then put it straight back to back to V, going back to the peak two or the move two. Sorry. Select on the present us then try to make it bring it a proportion with this end. We have that very nice. Then what is the next statep to do after that? Now, we select on the call to action button, they have their own difference, what's it called? They have the parent container and also for the C button, they have their own different container, which is for the auto layout. Select on the present o and bring them like this. Very perfect. You can see that. You can actually click outside here, click on this, click. On **** then break down right here. You can see very perfect. Now you can see this is very, very perfect. Looking at this from x, coming over here. We have this. We have this. We have this. Fine. Good. Thing I want to do is that. If pave actually, we don't want to use this. B this is tab, so still maintain what it's meant to maintain. That's a problem. We can actually deal it off. Okay. I Let me delete. It doesn't have a problem. Let me delete just around here. Just make sure you can see one and ten displacing the margins. Good. We have this. Actually, if I don't want to use this big button also, I can just double click here. When I double click, what do I do? Click around here. The first thing I can actually is just change back to horizontal Perfect. It goes perfect because it's actually auto layout. But if I don't want to do that, what can I do just conclude? Control it and what you do, select on this pres on. Then you try to shrinking entirely. It depends on you how you think, the users are going to actually enjoy using it. Can natural, just control it back again. A can actually click outside, click on this. Then press on K, which is the scale. Then press click, press on os, then try to reduce. The font and everything because it is mobile and you can see. Perfect. You can see. So that's good and perfect. If we want it actually to be something like that, that is not a problem. I don't want to be like that contras. Okay, contra side. So then I just prefect the way it is. Then just double click around here, select on this present. Sorry cont. S this pres on shifts up. Sorry. The reason why not appen like this it's on scale. Change back to to the move two. That's pres on V, click pres, then try to reduce at. This should actually work out. Then that's perfect. Looking at this in you can see. Yeah. It's okay. That's perfect. For this actually, we've been to use all to layout constraints, changing some things you can see. Change somethings you can see, changing, nice. Nice. For this second go further, but there are some changes that have been done there you can see. So nice changes that have been done. Now we have this has been perfect for the web, the tablet, and also for the mobile. I'll see in the next will start with the Ambger, start with the ambger. Yes, then we do most of it manually, which is actually meant to be. I'll see you in the next lecture video. 34. Responsive Design ( Mobile & Tablet View) - Food Brand: Now, we pay the level page ten was where we actually did this now page level. Now let's go straight to the Amberger. Brown the Amberger brown, it's actually loading. Now just select and present this contro C as usual. Et come down to page ten, sorry, ten, then contra, very perfect. That was the im. Now, This is not going to be of automatic and because we have this, press on shift select this and contra g group them together. This also being a group. Actually you have this is actually in the top left. For you to add this is in the top left, just change to right. Now let me try to know, you can see, it actually maintains the left me the logo. It actually maintains the right also. But we have a lot of elements here, a look at the solid, look at the leaves, look at. What can we do to it? Yes, we can actually fix them also. What we do come over to the direct tangle. This is the tangle, top. Write also. We have this also. This is it. I've selected the mboger top right also, the leaves here also. The leaves let me write he can bring to front. Top right also. When I do that what do I do select this and try to make the response click and see. Very perfect. But the text, that's another problem we have. It is not really easy actually making everything response here because we have the left, limit to the left limit to the right to the top and to the bottom. Not like having everything in the center, like the post one we did for the red t. Okay. Now what do we do? Actually, we can actually use, you know, come over here. Just say, I want to do this like this. It's going to work out. Yeah, sure. You bringing it down, you know, Bring bring it down, you know, moving and moving and moving. It's going to work because it's going to constraints. That is the power of constraint. Actual have this like, you know, a magazine type of main dive in, something like that, nice tricks, things like that, you know. But It's not going to really work out like that. I have something like this so you can see, very perfect. It's not really going to work not really going to do everything you need to do that. What do we do? Next we're going to do just just come over and just go straight to the point. Just click on this, press on **** and out, then copy it out. Now we have this. What was the size I used for for the tablet. Just pres on F if you can remember present Force escape. Contrast. Sorry. Just pres on F. Now you frame. Tablet, tablet and the select on this. Oh, I think I didn't use this before I used this. I can't remember actually, you just use one, 832. List. We have c. We have the width to be 8 321-083-2834. That's not a problem. That's actually any problem. Now we have this squeezed. Now, if you could remember very clearly, Let me bring this upside variable because there are some things actually disturbing something like this, which is I think it is the lift. So what do I do with the lift, I just right click Send to back. Sorry, send to Don't wash my time. No disturb me. Now, the first thing you need to do here is that just press on bog come over here, pres g. I s SG show you go show what's it called the grid set on this pres on seven. Here because we have Mr. Chen grid separate from the word from the tab. What do we do? Just set on this, actually delete this because it's actually getting the sups there are too much. We're going to use the ambger straight, the ambger icon straight. Double click on this then delete. The logo should maintain itself, so it shifts the w bring around the A. Perfect. What do we do we need the Amberger. Come back to pay ten. That's why it needs to be saved. Set on this contra copy it, bring around the A. Then what do you do? You just click anyway to ski around control V. You should be able to know this where it's actually pasted you can see, bring around the, it's actually pasted there. Then Is it in line with this? Good. Ni you can see. It's in line. Then bring around some pre on sheets, The bring around some. Good. Then change the color, select on this mat. This should be the color. Normally. But we are not going to use this color. We're going to use whites? Yes. We're going to use whites. What do we do? This is y or you just contras it. Select on this sorry, click Wood two white. Nice. Pre on sheets and let it go away. You can see things are actually changing perfectly. Now what do we do? Concerning the text, concerning the amboga itself. Fine. This is the amboga. The amg actually we can actually reduce it, bring around or we can actually. Actually, I let me just bring it outside. I want to disturb me here. Set on this press and sip select on this, then select on this. Good. Select on this select on this also. Bring outside like this. Let me see perfect. Now, you need to understand something that not everything should show on the tablets. It's very important. Not everything should show on the tablet and on the mobile. For this, actually, I'm going to delay this out. I don't need it. I don't want to see it, I don't want to. Good. Now, Cs that containing that. For this also, I don't think I need it. I can actually put the b for now. Let me take it away from here. Now what I can do is just select on this. Select on it's being selected present shift select on this present select on this. Then I can actually group them. It's been grouped. Also, I don't want this to confuse me. What I want to do is just select on this and what change the opacity very small. I make it very light. Now that show at all, it's to show it's as to, but should shed a bit of green color. Yeah. Nice one. I'll put it in the middle so click. Press and sh then no. You can see. Yes. I think that's the middle fine. Now you can see, we need to change this back to put back the green it's meant to. Nice. Now what we do you sl on this, bring to the center. You can actually press around the center. Then what we do containing this, we should actually change this because we L et me bring this up. Double click on this this itself. Press ***** bring up a little bit. You double click on this. Press on shifts, then press this, then control g. You can actually move them up to get a lot of groping a lot of auto layouts, and that's an a problem. Press outside, so select this. When you select this, you can actually give it what auto layout. Yeah. When we do auto layout, we can actually come over and centralize them. Can see very perfect. But actually, this one's are not centralized. What is happening? Am I going to put it horizontal? No, Rap, no, still vertical. What do you do? Sometimes it actually look like that. What do you do? You go back to that particular text itself. Then what's come over to the text are in the text section. Then what's centralized. Nice one. Set it double click on this and also Escape key. The centralized. It's Centralized, very perfect. What do you do? So now, We have this like this. Then it's been centralized. They also been centralized. Then also, you can say this is not world centralized. Just double click on this. Double click on this, come over press center. Double click on this also. Sorry, press. Then what press center? You say after centralizing everything and this still remains the way it is. We can you just double click on this. This has been centralized. Been centralized. What you can is very simple. Don't need to waste time, select on this pres and shift the s centralizes if it's actually a posing problem. That's not a problem for me. That's perfect. That's perfect. Let's select this present shape, bring up a little bit a little bit. Now to the mboger, se on the mboger and bring back into page, into the frame writer. Now just bring down a little bit. Up it's centralized. Pres. Come over, make it vertical, good. I want to make it a little bit covering that. Set up. Very perfect. I can actually reduce the ambiga. I can try to reduce the ambuga balas. Let's go and see what happens here first. I don't want to go up too much. The white space to be there. So just select, press on K, press on out, then try to reduce. I think something like that should work out. Pre come over up. Yes, I think it's actually working. Yes. Let me bring this up a little bit. You can see, yeah, very, very perfect. Perfect. Let me just click here. The moves up a little bit also. Then this zoom in, Ms up. Fine. Nice one. Now, let's come over here the leaf. This is a bugger. Let's say you can rename them, but I don't want to rename them from now for now. Try to close this down. Now we have what's it called the leaf. Click here and actually bring what bring to fronts. Nice one. This is perfect, perfect. It now depends how we're going to actually arrange it, where we're going to put it to make it perfect. I want to make sure it is not covering the bugger. Spring around somewing it around some it's covering the order now, let's bring down. Bring around somewhere. Yeah, I think that is perfect enough. That's perfect. I think I want to make this quite speak enough. Us the tab. No like this. No, sell on scale, that's put it V. Then just put around the, you can see make it large. Yeah. Nice one. Let me contradict the leaf, bring around there. Also the ambo the lif is actually obstructing. Let me come over and set the amber. Okay. Amberger image s centralized. It does the center. Good. Now, present the rectangle, the retangle, then the direct tangle tries to bring it to the center. Yes, it should be in between the two is one is one. So We have that. I think everything is now where centralized. Okay. The text, the text. So I would actually need to take this leave to the pack actually actually obstructing me. So set the leaf. Okay. So now come over to the live and just take it to the back. Send the back please. Not okay. N is one. Now one thing is nice one. So now, Looking at this, select the top here, just bring in the center. Yeah. I think it's centralized. Yeah, it's centralized. That's nice. That's perfect. That's okay. Now what do we do? Now compare to the lift, then what was it called bring to front? Perfect. Yes. Let me bring it a little bit up actually. Yeah. Nice one, very perfect. I think I need the ro actually right now. Only the O. I don't need anything else than the ro. Come over here. This is the hamburger. Come over here straight down. What is it called? Yeah, fine I should have renamed them, but just leaving it Thats not a problem. Select and disp on sheets and ops, bring. I enters into. That you can cause this. Now we have this here. What do I do? Et bring around here. Now, try to try to rotate to your taste. Right click on it. Flip Hizon. Yeah. Perfect. Very perfect. You could try to just to bring about some nice effect, something like this. Yeah. Perfect. I think it needs a little bit of adjustment. Let me just, you know, something like this, you know, something like coming up from this light like this very perfect. So you just bring around some. Fine. That's not bad. What is the next thing to do? Not for the move by present shifting or try to know. I think for the mobile, I can remember what I used select on this. Is 434 S 430, then enter. What do we do as usual start arranging manually. Also firstly **** G, then press on this, then change tow four, enter very perfect, just like we did the all time. Select on this. So sorry. Oh, the live is obstructing me, why, why, why Why. Just let me breathe. We can't close this. Close it too. Just let me breathe boy. Okay. Nice one. So you can actually take this leave. I don't I don't know. I don't know to make it disappear from me but just send to back fine. Just stopping me. Okay. What's wrong. What you want is this. Okay. Send this to back also. Fine. I think I should be able to breath now. Press on shifts then bring some around as. Then everything that is actually, everything is actually inside. That's one problem I have actually this. Let me try to what's it called this here. Fine. That's not a problem. That a problem at all. I can actually name everything and make sure everything is in line, but that's not a problem. If I actually over on this, you can actually see. Now I've overdone this, you can see the ambuger at c right. Select that actually bring the mbuger peg sit then, bring it around there. Yeah. That's not a problem. Good. N one. Now what do we do, we come over here also. Now what we concerning this, just press on what's on K, select press, then try to reduce it's has to be reduced. Yes, it's has to be reduced because we are on the mobile view. Produced fine, is one. We can actually take this. We might not need this animal. Just delete this. We. Come over, bring this to center also. Just press on this vertical, A vertical center. Then you still in K. Select on this present try to reduce. Yeah. Ni one, tres reduce and Perfect. Perfect. Bring this downward. What I can actually do right there is that. Try to make sure this is not like this. I mean, it is not horizontal it's vertical because we're talking about the mobile view. What do I do? Now, this back to the from scale. Now, just select on this. If I can actually remember very clearly, this is an auto layout, right? You can see auto layout here. What do I do? Just contro it. Sorry. Just double click. When I double click now, I can actually put this in auto layout also. Put it in auto layout. Then what do I do? I can change what vertical. You can see, very perfect. Now, it's been in vertical. I'll ductal click around there, then click this. It's actually not present anything, just click hold and drag it like this and live around there. For this, what do I do? I'll come over the double click again. Before you boli just slick on this particular thing. Make sure this what's fixed this particular container. Then the book click on this. Make sure this one what's it's fie the container. You can see very perfect. Select on this also come over a fill container and Tuttle. That's all. Very perfect. Now, just pres on shaped G, and you can see the latest in town. I say the background is quite sim. I don't want something like that to happen. I don't want anything background background or no background. Now what do I do? Let me close this. What I do just select tango as done, just pres on shaped and make sure this is what. It is centralized. That is it's in center. Yeah. It should. Actually, it is. It is. It's in center actually. Now what do we do just come over to the leave right click, then what bring Ft. Bring to front. Nice one. What do we do about this? We can actually try to press on K, try to reduce it. Nice. Bring bring that around somewh ha. You can just try to bring it up a little bit like this. Let me just say something like this here. No. Say you enter into somewhere. Perfect. Still a scale, try to reduce, something like that. Try to re bring this around the air. Oh, sorry, not coming outside, which reduce better. But let me just, you know, make it a groundbreaking one, nice one, no some leaves. Even if it dest view, still showing perfectly the way you mean to show, showing nicely, you know. Yeah. I think we got to try getting there. Maybe a bit more. Try to. This Okay. I think because I don't want it to, you know, I don't want any mistake. I don't want anything to. Let me just click like this and see what happens. I don't want anything to obstruct anything. I think I think that's perfect enough. That's good enough. I think that's okay. Yeah. Well, let me see. Something else. I it's possible. No. Com. Yeah. Yes, perfect. That is this p mbu think we've been able to do it perfectly. Yeah, Let me just bring this a little bit closer. Bring this a little bit closer. I just good. So we have that being perfect. You can see from, from here. From here. Yes. Perfect. Yes. So not everything you show in the dept you showing in the tablet and not everything tablets should be shown in the mobile. So I'll see it in the next one, See that. So 35. Reponsive Design ( Mobile & Tablet View) - Tech Brand: In page 12, then move straight now for the bicycle brand, select on this press on control C, that's copy, then come down, then contra paste, very, very perfect. As usual, we've done, the contraight and everything. Let's move straight to the point. Now, press on shift the out, bring outside around here. Perfect. Now Ave this as usual, on this top left, fine. Check on this country g. You group them together. Top right, yes, nice, then bring around the select and it's moves. You can actually if you want to, you can actually fix the bicycle with zero click. There's a bicycle. Okay. Fix eight towards to the top right also. So when you click around the. Okay. Sorry. That's a mistake for me. Sorry, confi it. So when you click around the and just straighten a drag and you see, it moves fine. Fine. So that's 890 something. Depending on you. That's not a problem. Fine. Perfect. Now we can actually see just coming over set on this, come over, press on St g fs what is wrong with me, S set on this, then seven, then press. Now this should be here. Perfect. This should be here. Okay. I can actually leave it like this, but I don't want to leave it like that. I want to use the bog because the wordings are actually entering into themselves. So set on this contra, then P two, then contra Ve. Let's try to see where it is actually can sit down here, so just bring around up here. So bring down. Yes, very perfect. Now select on this actually, then select on this very perfect. That's very nice and good. Now, what is the next thing to do? The image actually. But for now, let me try to let me just double click. I can actually leave the image. Yes. Okay Just bring it down a little bit and you can see something is happening. You can see select on this and you can see the frame color is still in white. Click down, click drag bring down. C to black. Yes. Perfect. So now, We have that. For this, also, I'm coming back to that. But for you for for the image, just keep on bringing down. Or you can just reduce it immediately. What would you just pres on K? Just just click around the reduce it. I think that's perfect. You can see. I don't have to be exposed. Nine is one. I think Yes, n is one. Let's just leave it like that for the meantime. Then we can't deal with this. Now what we try as much as possible. Firstly, we try to group this group. Yes. Try to make them separate. Now we select this. Press on ship, select this. You select the steel ships, you select this. Then we group them allo then we give them what or to layout as one entity. Now s them, bring them to the center like this. You can just press on the horizontal lign center. Fine. Then what do we do? We try to bring them to the center here and everything goes to the center. If it's not actually happens to the center, double click here and what centralize this, fine, perfect. Select this and what's centralized, very perfect. No waste of time, no cars. Set and this then what do we do, we select these very perfect. Now we have this actually Let me take away what's it called. That is very perfect. We can see actually select this. You can see there are some gradients. If I try to take away this gradients and looking at the image itself, it has some kind of stuff in it actually. What do we do? Now, we can actually leave it like this. Bring to the center, select this pres on shift and ts, try to increase. Bring a try to increase you to suit you. What the heck is wrong. Try to increase like this. Okay. Fine. Perfect. Then let's remove its opacity, just click, set the no. Let's try to so that it can be central like the text can show we make it, show. We need to make it show perfectly that there is something there. It's one of the affect text to that extent. We're setting what they called the tablet view. You know, This. Yes, it is. Actually, Yes, it is. That's perfect. Done with that then trusted by. Now can you consi this. Now just select this just once. Then if your tool is the scale present V for you to go back to to go back to the move two. Select around the then just to reduce nice one, click and bring around the. Click outside, click the present sheet cli this. You can contra G. You gut them together. You bring around the. Yeah, we have it like this. Now just select this, being group together. Spread on K. Click like this and try to reduce it. Set our taste, click and bring around the you can just pres on particle to make it centralized Nze. Then click press on shat then. Double click like this then. What do you do? Change the k back to V, which is changed from scale back to back to move. Then click around the and to increase, click outside, then click together, Wooden drag very perfect. Don't forget actually, press on what sats G. You can see. We try to make sure that it's actually in between this. What do we do? We cut over here, we select. Firstly, just double click here. If this is not covering everything, just double click. It's going to cover everything, then try to reduce. We have this around there. Then just make sure this is centralized. That's number one thing. Then just try to double click. Try to make sure it is reduced. Then very simple, just bring that this around there like this. You can see. This. Because we because of this auto layout around the which you've done before, to get perfectly to that extent. We're can get something. Nice when you can see, perfect. Now, select and move up a little bit of sheets. Then what do we do? We remove the word sheets perfectly. Nice one, very nice. V perfect and nice. It looks. Now what is the next thing to do. Next thing to do is for w 40, move by just e move around the drop. Now we have this. I just rings around the s's be in proportion, you can see 102 1025. That's very perfect. Now for for the phone, actually F. Let's look at the frame for for this rider. That's around 430 as we've been using before. So 91, so select and this n rods, select on this od perfect. Perfect. So L et let me bring this down here. Let's just try to see this it quite responsible or something like that. Now for the Amberger two, which is four, can actually bring it around here, nice, around the present shifts, make sure it is pption. Firstly as usual, the squares on shtG, the column four, then press enter very perfect. What do we do? You click present, click on this. I has been selected and present shifts then. Select this present sit then. Is. Now apart from that we have just select on this. Pres on K. You can set on this pres on, then is one. Perfect. For the bike. We can actually leave the bike weights is pres on she G. We can weights is actually it pens like that, mobile. Let me first arrange post to arrange this. Make sure everything is well in proportion. Double click on this pres on V, take its own scale. That's why this is not showing. Bring like this around here. A what's wrong? Some mystics or some things. That's pathetic. Just double click on this. A on group. The person we can be here is just right click on this and what's on group. I want this to be on top of the other, something like that, mobile view. Then we have this perfect. How do we do this? We n one. So I can just pres on K, press, n one, then bring around there. Make sure it is the center, but K, then what do I do? Press on distintos, then Zooming. Perfect. Bring it up. You too much down there right there. This is in the middle also. Yes. We have it as 2020. A let's change it to round some like 16, yes, and centralized then. Bring it down. N one. What do we do? She perfect. But this going to it. Fine. Perfect. I think. That's okay. That's nice and perfect. Is perfect. That's good enough. That's very good. You can actually bring this d to pits. It depends. You bring it do to pits. Also, another thing we can do. Let me do with this image first. Grading is not showing around. I don't want any mac to show around here. That's what I'm actually trying to prevent from showing around here. That's pathetic. I need to use scale, not this type. No the move pt scale, K, the good sing down, good mizone. Good. So certains like this. Controls it. K. Certain like this. Yes. That basic. That's nice. Psi Nice one. Comfort. Now, what do we do? This is an tutors. Yes. At atorad. So what I can do is just double click this. The press on **** and double click give this also what auto layer as a shift A. What do I do now? This is auto layer to what do I do. I can particle. You can see. You can see very perfect. C article. It's been vertical aspect actually you can see, which is one looks more brilliant if I could use the let. I can actually select. Double click here, the select. D press on or anything. Select. That is, this is the container, this is the auto layer, actual actually increasing. Fine. Now a now, it isn't fixed or already, so you can double click on this and dos and f container perfect. For what is also a what? Fil container, very perfect. I love this. I do. It's actually responsive, very responsive. We can see, very perfect, very perfect. You can see for the mobike it's actually quite big by now explore more, things like that that people are going to do. Going to be triggered to do whatever you want them to do. This is very very perfect. I so much love. I so much love this. Now that is perfect for this I see in the next lecture video. 36. Responsive Design ( Mobile & Tablet View) - Fruit Brand: This last time actually, we go straight to not. What was it called page or page actually. Yeah, this perfect contra nice one. C down, conti one. Now as usual. I just qu point actually. Shifting out this perfect, n one. What's the side again. I'm computer so I can remember everything. It's not possible. I think that's to sm small. Yes. I think no. I think this should go. H34. Nice one. Thanks. 834. H34. Does a Oh sorry, does pathetic contras. It's 34. Was it it's 34, very perfect. That's nice. Now we have this. Shift deep. Then what do we do? Press on this ten, seven, er perfect. Select pres shift sorry, select first, presten one. For this and everything inside, I think it's going to be too big for us. We're going to de this off. N one. Then for the whats called for this faction. You can't do this. What do we need to come over, he just grab some, have some soft delicious stuffs. Contra. That is the amber contra nice bring around the very perfect. The proportion coming, right? It's not a proportional at the middle. One G. Good. Now we have this. We're going to also put this in auto coming right there. Yeah, good. Now we can actually first click and just try to group everything. Now we have this you can see, trop everything. Then you click one by one, pre shift, then this, then shifts A, which is a two layout. So now, We can change it to this. It's going to deform everything, but she being vertical, put it in center, everything. Apart from that we can actually double click here so. Double click and put it in center, nice one, double click and put it in escape, sorry, put it in what center. Everything. Nice one. What was doing fast. No waste of time. What else do we need the apples. That's up. So just try to bring this up. This, then bring this down. Then press on K, click, drag press on. You can see a little bit. I don't want it to be too small. Let's just press on this still on K. Yes. Pre click pres on, then drag this inside, try to reduce it a little bit. Yeah. This should be quite some good. Now, can actually start reducing the make sure it's in a proportion shift this? I can reduce the proportion. So the next thing to do now. Come over pick this as usual. Second is present shifts and second the copy of pres shifting bring around the n one. Perfect. What do we just press on K Yeah. Pre K. Then try to reduce not too much. Good. Now you can pres back to V. Then you double click. Then you try to reduce, mature is being reduced. Click outside, click On drag ledges. Perfect. You can see this actually just double click it, it goes back to normal. Double click. Okay. Click outside. Double click on this only a. Then double click. It goes back to no. Yeah, we are perfect the computers. Yeah. So click, ring around there. Okay we try to press on K again and try to reduce it. Good. Then try put it in sorry. Sorry for that. So now just spick them and bring them around. If I can actually double click here. It's K. Bring to V. They try to increase that can bring this around there and perfect bring this around there. Good. Then just try to know. Set in this double click. And try to increase this to this site. Yeah. That's perfect and nice nice one. But I think it's actually to close. The negative space is not that increase it up here. Yes, I can actually leave it like this. But I want some spacing, some white space better than before. Now, should I reduce this? Probably yes, but I don't want it to be too small. Just click bring down. I too smart, don't want to be too small. Because I want the s. I don't want to be to be at the back of the CTA. E bring around some. That's okay. Let's try to **** g and see what happens. Nice one. White background looks cool looks perfect. Everything is going on perfectly what the weight it's meant to be. I like it. It's, perfect. Set preg shifting out then 111. Good. Now I think this is 430, it should be f. Four. You can close this one. Close this one. What we're actually dealing with right now is this perfect, sorry. Actually deal with which exactly. I should rename them, but I don't want to actually. That is what is wrong. I don't want to isn't a big deal, so I know what you're doing. Actually we have this. Yeah. Nice. This is what we have raptured right now. Good. Now what do we do? Set on this. We have the hamburger, sit on this. Press on sheets and bring around. Not forget press on sheets. G. Then change pres on V, scale, still on scale, V takes it back towards takes us back to the move two. Select this and pres on V, select this pres the seven then. Il sell the seven pres on four thenward, and select this present shift the That click. Sorry. S zone, bring it around there to make sure it is n zones. Is noise, noise one s this and sect the image, then click pres on shift and bring them together. Bring the words together. Son this and try to just click on centralized Pical center. Click, press on. No. What is happening? This is what is happening. Set, it's not on K. Press K. Click pres on ten, reduce is one, is one. Bring up at bit. For the apple also, you can actually reduce it, click present pose. Nice one, e one, click coming up piece. Nice one. Then what do we have this. It should be actually. Yes, I should. Yeah. Normally it should. Let's try to trade it out. That is probably it didn't come with the other ones. Find as a problem, click rag on shifts and us. Then bring around here. It becomes part of it. So good. What we want to do now? We try as much as possible to right click on this then what's on group. That's number one, then this bring this down. Selling this entire, just like the bicycle stop, bring it around the bo vertical try to S will reduce. Try to reduce its pres on V. That was shame for it was still on sk present V. Then just like the other one, give it 16, ni one vertical. Now reduce pres on K. Click Now pres on V. Okay. Up eligibles to centralize. Is that the center I sue? Is one. Good. I love this. I love this Center. Good, good, very perfect. What do we do? Shifts G, and we have that. We can actually increase this a little bit. Pres on k, then click pres on ops, then down. Then also, you can actually bring this down to also. Very perfect and nice, very perfect nee. That is actually the responsive design. You can see. Very perfect you can see, very perfect. I'll see you in the animation aspect of the majorly for the mobile view. I'll see you in the next video. 37. Food Brand Prototype & Animation (Mobile) : Starting with what's animation exactly. Let's go to the bog. Yes, which which has always been the first. Let on this country copy. Then it's animation time. Very perfect. I'm going to be very fast with the animation actually something we actually know and understand before. Now this should be separately. M grouped the leaves again, sent to back. Thank you. We have this. This should be what grouped. Everything should be on everything. Everything should be group. Everything. Group. None. This, this as this. We have this as this. Actually we can actually group also. To mix some nice called sweet baby effects. Yes, sweet baby effects. Now, we have the leap maintains itself am. Yes. Rectangle. Yes, good. Now what we want to do. What we want to do right here is that what. Just bring this around here. Shift and what out outside, then good. So I'll just try to make some nice cool designs. So now come over here, click. Click present shifts down, present. Oh, sorry, I can actually choose the two present shift the Pres on this, click. Present shifts then space bar down, n come over 42 at the layer, er, select the present shifts, space bar up. Select 09, sect here, present shifts space bar down a little bit, not too much. Come over, then zero. Select on the present shifts to the sit. Ni one, shift and space baton for. Then come over to layer, pre zero. Select on this present shift space b nie come over he. And what's zero, nine is one, and also the Amberger is Amberger. Mature is in center, I think is in center. Yes. So you corrected this, you have to correct the side also good. Set and the spas and shifts, make sure it is coming down. Then what is it? Zero, 91. Then the last thing to do is just what when the Amberger one, you can close this amboger two, try to be limit, very important. Zone. Can close collabs. We ambger two, the left should be back to front, very important back to front. Good already on top. You can click pres shift spa on space. This goos far away from you, far away from you. Farwa from here. Yeah, and make it w. Make it zero. Nice one. And don't forget. This is back to front. You have to make the one for for the Amberger two to be w back to front. This amber click on the then bring to front. Yes, on top. Then from there, you can click present shift and present space back outside. Yes, then present zero, and enter Perfect. I have me changes to the leave radio. I have to make changes to the leaf radio also. Select press on this and bring bring to front, very important. Front and Front. It has to be proper. That to be the same thing exactly. Pres only Amberger n, we have the solid ct. There's some things we can do to just click as we've done the last one, click. Pres on shift, pig it out. It moves in. Whenever anything pens to zero, then come to Amberger, come to prototype. As usual, click n in drag as usual, after delay, if 100 milliseconds, start animate, we get to Amberger two, then 2000 n one. It should be it should be g two. As. I'm not using bouncing today. Then 2003, 2000. Then prototype viewing. Let's see what happens. Very nice and perfect. You can see. Let's try to bring it to full screen and see what happens just pres on R. You see those nice looking transitions. Wow. Amazing. Amazing. Nice Amazing, amazing. Love it so much. So so much love this. Wow. Actually, another thing I can actually is just, I think, I need to make this come up. You'll be able to make the adjustment to this. Just come over it. Amber burger. Com to Yes. My logo, actually, which is the group around here. I wanted to come like faster than this normal one here. I can just click present shift and bring it down with a little bit more then. That's nice. That's nice. See. Let's see what actually happens here with a prototype. Nice one. Nice. Let's see. Yeah, yeah, yeah, yeah. Nice one, nice one, 91. Nice one R again and see what happens R. Nice Perfect. This is perfection. Nice one. Nice one, nice one. What do we do bouncing if I'm not doing bouncing today that's up. Is it for this actually, mobile animation prototype interaction. I'll see you in the next move for the bicycle. Ve 38. Tech Brand Prototype & Animation (Mobile) : For the bicycle as go to page 12. Now select on this for the mobile Contra coming down, contra. Nice as usual. Select the separates, group, group group also. Group. But this one is to group group. S. What is the next thing to do now? Just click Shift then then nice one. For this, should I pick them com separately? If you come from up then down. Something like that. Good. Nice. Si Shi sorry, Contra. **** space. And make sure this is zero. Nice. Ships space, M sure this is far away. Nice. Then this as usual. Let's go to the left this time around. Yes, the left around. Er the right this time around. Zero to the top this time around. Should come to the bottom this time around. Also nice nice shifts at mystic some shift space up come up to zero. Then shift space C over to zero. What is wrong? That's true. For the layer. Every perfect 91. So good. Now. Let me just say, tack for the group for everything. I want to look at the layer if zero, ready making a mistake zero. Yes. I'm coming back to that. Which one is this? Okay, f zero, I have a problem. It is grouped. Fine. He also zero. 011s. This exactly. This is zero I thought I put it zero. It's very important, ever ship is zero for cool transition. Now, what do we do to the bicycle? Should we make it drive in? Or what do you think? Present ships the what you put, you put zero, zero, perfect. The background is black. Then now what we do is usually just connect prototype. Certain d connect after de 300 tech two. Nine 1 second is Smart animates Jan 22000. Let's see what happens, 91. Okay. Where is my bicycle Let's pres them out. I think it's because it's first time slow. Nice. Let's look at it again. Then nice one. Again. Doing here. Plan to change some things from here. Okay. It's fine. It's fine. It's fine. That's not a problem. It's fine. Okay. That's not a problem. It's fine. I like that. I'll see you. Actually you can tweak it, actually you can make things different. I'll see you in the next. 39. Fruit Brand Prototype & Animation (Mobile) : Moving to page 13, click on this contro C. Now we have this 91 contra. Good. Now, on group on group on group group. So sorry, that's what is wrong. Good. Group group group nice. That's all good. Now, click ***** then like this perfect. Then I want this to be like, shifts then this comes like this. Zero. This also shifts space bar. Zero. This should come like this. So ***** space bar. Zero, should come like this, shifts space bar. Zero is like this shift space bar. Ero. Then this and this press shifts and what space bar. Then what sorry, then zero. Nice one. We have this also click on this press and shift out, then to b. Sorry for that. Click, shift and odds, then down a little bit, not too much. Quite okay. Then what do you do? Then, perfect. What does the next thing to you just come over a prototype as usual. Click on this like this. Then after delay eight milliseconds, start smart animate. I don't forget actually this brand two foot brand two, nice one. So we have that then yes, select in June to 2000. Yes, everything is well. Let's and see what happens. Nice animate. Prepare r for restart. Perfect. The first one is early summer. We all know that. That's no. So now R very, very perfect, very perfect. Opt opt. Opt opt. Oh, I think the apple is not coming big. I want it to come like, you know, some gigantic, some c c cheeks. Select on the apple is it. Yeah. L big. B. Nice one. Then we have it here. So brick screen, sorry, full screen I big screen, full screen, then then good. Nice one. I love it. Nice. Good. Good. Nice. Taking a phone and know some nice transition beautiful. Beautiful good looking, beautiful. Yeah. Yeah, y. So that's it. I'll see you in the next lecture video. 40. Real Estate Brand Prototype & Animation (Mobile) : Number of is straight to P ten, the cap one, c down, p 17, then Vz group. Separate separate one. What is the next then to a shifts then we have this. Let's just say coming from left, sorry design. No prototype. Design across. So Seton is present, you know, shift, you know, space shift and space seven is M zero. Sorry. Make this two, two, then this transparent zero M so make it. So for this, which is come on to be on top. Zero this also should be quite on to coming down together on top. This also should be coming from C from downward. And this should also come from downward. Zero. V perfect to say this prototype, then is this after delay one we get two, Yes, Imes, we got it. You got a picture. And we arrive at the destination. La Nice one. Nice one. Z. T. One. One. One. P. Let me make a full screen and let's see what happens to it. Just you click in on the particular and get to the nd page, and it's actually pops of lets. Yeah, I go to love it. Yeah. That's good. That is for this particular lecture video. I'll see you in the next lecture video. A 41. How to export images in Figma: Video, and we will teach you how to export your designs in Figma. It's very, very simple. Figma actually makes everything very easy compared to some other software. What you do. Anything you want to export. You can actually select on this and export this logo on. You can select on this only. Select on the bugger itself. Let's come set boga. The reason why this is not actually selected is that the leaf is on top of the bugger. You can take and drag it down below the boger and nothing shows here. So I don't want something like that. You can see the leaves here are actually underneath. Let me just click and drag it up here. It's my show. That's not a problem. I just say mboger image. Now what do you do? It's only this mboger you want to what you want to export. We can export only the mboger You can export individual icons or individual images or all the images. Come over to export, bring it down. Export. Before you export, you can preview, click on this. You can see. It's showing me that it's only the bugger unless we didn't see what happens. Export and bugger image, you can see it's downloading and it's just downloaded. So go straight to your watch to your download. You can see very, very perfect. It's actually right. Just to day just now. Second and see what happens. We have the amboga perfect. The b can see the amboga image. Going back to this, click on this. Now I want everything to be w to be exploited. You can actually explore this only. So say the ambger this perfectly set on this everything at once. You can see it shows in the preview, perfect. Then just present export amboga it's going downloading images, is going to show you very perfect. It just come over here. You have a downloaded direct double click on it. Then very perfect you have it. It's very easy for it to export images. We export them as JPEG. You can actually change the set, this PNG actually, which is supposed to be JPEG. You can use SVG PDF. If actually it is this particular what's it called this amboga actually collapses. Okay. Amberger itself. Amberger shards in PNG normally. But if you use JPEG, it's going to create a bagra for it after you've exported. The bagger is not shown yet, so you don't have to if it's just a normal icon or just one object one image, use PNG. So there won't be any background there. It's very important. If you're actually exporting a whole, I know website, something like that, use JPEG PG. Nice can actually come up to P three and try to export it. Let me try another one. Select on this. Come towards exports. Okay. You can see the preview, you can co this preview and expand the preview. That what you do Export. You actually see it's going to be downloading here. It's exporting download right now. You just come over to download, perfect. You can see very perfectly, very perfect. Going back here actually that is it's very simple to export things very easy. That's you can actually export this on your own, actually export this so on your own. That is it. That's how to export very easily in Figma. 42. Conclusion: We have come to the end of the euro section landing page design. Actually, thank you guys for actually taking this course and actually pin you would have been a professional looking at the artistic creativity in designing things. And things would have actually changed, using colors, components, variables, auto layers, using different colors, using different designs, and the dark theme, the lighting and legs. And you've been able to learn a lot of things here now by now you'll be a professional in whatever you do, very perfect. Now, thank you for taking this course. I'll see you I'll see you men courses. Okay.