Transcripts
1. Introduction: Okay, So 20 and wise, there are three major checkpoints that I've come across in my career as a user interface designers so far. The first was introduction of sketch, a fully dedicated proper user interfaces. I told the second was coming of Figma, another user interface design tool. And there's a whole different story about how I shifted from sketched Figma and y. But number three, the third checkpoint was introduction of auto-layout into Figma. I love Auto Layout not only because it's convenient, but because it's snips away a lot of extra baggage from the core craft of designing a user interface. And it makes so much room for experimentation. When you use auto-layout, you don't have to worry about aligning and resizing. You don't have to worry about making space. When you have to put in something in the middle of your design, you don't have to worry about stretching and squashing elements each time you have to fit something, you don't have to worry about consistent spacing when you're duplicating things like in a list or something, and a lot more that you will discover as you adopt auto-layout into your workflow or a checkout my workflow later in the course. This course is for anyone who has either just visited fake my.com and created a new free account or isn't seasoned professional and has been on the fence about auto layout or tried it once and founded a little confusing, you know, just a little hard to wrap your head around it. A good user interfaces that, which abstracts complexity behind simplicity and the auto layout panel in Figma is a great example of that. It's a thin strip about a 100 pixels high, and it stores absolute magic. In the first half of the course, you will watch me explain the need for auto-layout and showing you it's a very basic usage. Then we will move on to create incrementally, incrementally complex layout. And in the process, you will also learn about components, instances and a little bit about variance. Then having told you everything there is about auto layout, we will jump straight into habits, real-world projects, and then together we will build relatively complex user interface components using auto land, there's a chance that you might find the first two lessons in the course, which is about buttons, a little too basic. And those lessons I talk about in-groups and frames and the difference between them and how using auto layout is a big improvement over them. If groups, frames, and a little bit about the very basics of auto layout is something that you are already familiar with. You can just skim over the first two lessons with all of that out of the way, the only things left to discuss is the project and the setup, which I'll be doing quickly in the next video. So see you then.
2. Auto Layout Update: Okay, So this is an
auto layout component that you will be making
later in the class. And I will select this. And as soon as I select this, you can see on the right
there was nothing right now, because as soon
as I select this, you can see some auto
layout options pop out. Now I've taken some
screenshots from the class, the videos that we'll
watch later down the line with the
old Antoni out UI. And we'll be using
this screenshot, this little auto-layout new UI that pops up to compare and contrast between the update and the UI that
was there earlier. Alright, so let's get started. The number one thing
to notice here is that this little
alignments square. Now you'll be learning, like I said before, later in the class,
what it means. Now, what happens in the
new user interface is as soon as you click something that has onto land applied to it, you directly see this
alignment squared. Now, earlier in
the user interface that was there earlier, you had to click on this and then this options
would appear. So that's the
difference, number one. The second thing to notice
is about the padding. Now in the earlier
user interface, there used to be only
one little input box to add padding and you will
know what padding is, like, I said later in the class
and now in the new version, instead of just one
little sort of input box, what you have is a
little simplified way. You have your horizontal
padding input field and your vertical
padding input field. And you can also split it
into independent paddings. Padding for the
left, padding for the top batting for
right and button, which has actually made
things a little bit cleaner. The other important thing to pay attention to that has moved. Now if I select this,
you can see is that in this area right over here you can see fixed and
hugged contents. All these options which are
called resizing constraints, which will again learn
later in the class. It has been moved to here. Whereas in the previous
user interface, all of these options actually
appeared over here under a re-sizing little
UI place and now it has moved to over here. Okay, so that's all that are
like all the UI updates. And now you can move
ahead with the class. And as I'm speaking this, I forgot one little thing. Now, earlier you use to have the space between and
packing under this option, like I said before,
in the new one, you can find it still under a pop-up option
by clicking here. And you can change between
space, between an impact. And now I know that all
of these new options are, if you've never dealt
with auto-layout before, all these sound alien to you, but you will later in the
class understand those. And I've just made
this little video just to show you the updates because there hasn't been any core changes in auto-layout, just user interface changes. So I hope you're
ready for the class. And I guess I will see
you in the next video.
3. Project & Setup: All right. It's time to take you through the files that we will be using in this class and also show you what you'll be submitting to Skillshare At the end of this class. So let's do it. Inside the resources that you download, you will find two Figma files, finished and starter. I want you to load both of these files into your Figma. If you have the Figma desktop app installed right here like I have, and you can download the Figma desktop app right from here. You can search in Google Figma Mac app or Figma Windows app. You know, it's all the same in that you can download the app for MacOS or Windows from right here. If you're using the Figma desktop app, you can just directly click, double-click on either of these files to open in the Figma app, or you can right-click and go to Open With entries Figma and open both of these files. But if you're using Figma in the browser, you can log in into your account and creating a Figma account, if you're not aware, is very easy. All you gotta do is go to figma.com and click on Sign up. And the best way is to sign up with Google. And after just two or three clicks, you'll end up with something like this and entire Figma user interface. So when you're inside the browser interface, if you are in the browser interface, you can just drag both of these files into the browser and it'll import both of these, you know, into your Figma. So we'll wait for them to finish importing, grade both the files have finished importing and inside your Figma, you will see the finished file and the starter file. You'll be working in the starter file throughout this course. And the finished file is just for your reference or in case, let's say we make something together in a video and later in a different video, but we'll need what we created earlier. But for any reason, for any reason at all, you didn't create it along with me. So you can pick it up from the finished file, paste in the starter it at an appropriate place and continue with the class. Okay, Now let's look inside the starter file to open it and just double-click on it. The first thing that I want to talk about in this file is this page calls tiles and colors. And for any reason, if you're not seeing this and make sure that you expand the pages View by clicking right over here so that you can see all the pages. So the page that I want to talk about, the first thing that I want to talk about, talk about as tiles and colors. Now so that we can focus exclusively on auto-layout and the UI components that we make with it and not worry about the colors and what font sizes to use. I've already defined all of them for you in this page, the styles and colors page. And also you can look on the right panel in Figma when nothing is selected, all the styles that I have defined for you. And if finding global styles and colors and Figma is pretty simple, I believe you already know how to do that, but for those of you who don't, here's a quick one-minute one down of how to do that. Now let's say just like these colors, if I click on it and sort of seeing a hex code, I see a custom name that I've given to this color, let's say like these colors, I want to create a new global colors tunnel that can be used anywhere in this file. To do that, I can just press R on my keyboard or click on the rectangle tool and draw a rectangle of any size. And then I'll give this rectangle a random color, right? So let's just go with this color, okay? Now if I select this rectangle, you can see that it shows a hex code of this color, which is 362, 565. Now if I want to convert this color to a global style, all I can do is click on this icon right over here that says tile, and then click on this plus icon which says Create style. And once they click on that, it'll ask me to give it a name and I'll just call it temp colors since I am using it to demonstrate to you, to demonstrate the process to you. And then I'll click on Create style. And once I've done that, you can see that Tim color becomes visible and global styles panel on the right when nothing is selected. And if I want to use this style again, is this color again, all I can do is click here and then pick temp color ranked from here and it can be used and reused. And if I later this site to change the value of temp color by doing, by doing this, by clicking on it, then clicking on Settings and then adjusting the color again. It will be affected Throughout the file, wherever this color is used. Now that's the process to create a global course tile. And since this was temporary and no longer need it, I'll pick it from the styles, you know, make sure nothing is selected and it's visible. You can click on it, right-click on it, and then click on Delete style to get rid of it. And similarly, and similarly, like we created the color style. If you want to create a textile like these that I've created, all you, all you've gotta do is press T on your keyboard, or you can select the Text tool and type something random. Or you know, you can type in something not random, I don't care. And then you can go ahead and give it random font-style. And right now you can see as tau is if line, but I don't want that. I'm going to go ahead and give it a random font-style, whatever I want. And then to convert it to a style to a textile, I click on this icon again, click on plus, and then I'll can give it any name that I want. I'm going to give it temp texts, It's tile name and then I can go ahead and create a textile and then it will be visible and this can be reused again anywhere in the entire file. All right, so let's get rid of it. And that was your quick rundown of how to create a color, style and a textile. Now, once you've followed along and finish the class, you will have right now at the beginning of your starter file will be empty. Every page you will be essentially empty. So at the end of this class, inside your starter file, you will have all the user interface components that is prison inside the finished file. And as a final project, what do you can do is this. You can create a new page by clicking right over here and naming the page final project, all right, and then everything that you've made, you can start collecting them into your final project page. And you do that by simply copying, by pressing Command or Control C and pasting it in the final project. So this drop-down is something that will make in the third chapter after buttons, you know, you have just collected it here by pressing Command C and Command V. Now similarly, I can bring the other things that I've made. And then once you've brought everything together, your final project page will look something like this. Not exactly like this, because I've already used it to my liking and you can arrange it in the way that you like, but it'll look something similar to this. And the final project is just some mission of a screenshot, this page. So you can take a screenshot of it and submit it as the class project for this class. And also in the comments, be sure to copy this link by clicking on Share. And then you can go ahead and choose anyone with a link can view and then copy the link and submit it as a comment to the submission that you're making to this class. And yeah, that's it for this video. That's all we will be making. And I've showed you the setup and I've also showed you the project that you are required to submit for this class. And I'll see you in the very first actual lesson of this class in the next video. See you then.
4. A lesson in Buttons - Part 1: I have a thing for well-designed buttons. You're not very easy to get right? But when you do get them right by adjusting the shadows and the outlines and whatnot. It's just beautiful. Buttons are also a very strong pillar of a brand's identity. Look at the buttons of Amazon or Facebook or twitter and how instantly recognizable they are. Even out of context, it can look at a button and be like, Yes, this is Amazon and Facebook. The simplest button that we can make is just plain text. So either press T on your keyboard or click on the Text tool to bring up the text tool and click anywhere on the canvas and you can then start typing. So let just right, BUT ON a button. Now, remember in the previous video I described the different textiles that I have already defined. So we're not going to spend time choosing fonts and colors, not in this course. I have already done all the hard work for you if you're interested in learning how to choose colors and fonts. Well, to be honest, it's just practice. But if you still want me to teach it because you lack in my voice, well, let me know. All right, so with this in place, you can go ahead and click on a textile, which is the four little squares that you see right here. We can click on it and choose from all the styles that I've already defined for you. So let's for now go with label medium. All right, so this is the button style. Let's choose a color for the button. Again, you can either choose something from here or use the colors that I've already defined. For you. I kinda had a slip of time there, but you can choose the color styles and let's choose blue here. All right, so there it is. That's the simplest button that we can have. Let's drag a copy of this text out. You can either you can press Option and drag, see what happens when I press option that there are two errors now, which basically means that if you drag it out, it will create a copy, will make a copy of each step of the process just to see how we are evolving or button. Now, this text right here to look like a button, needs a base. So let's draw a base. Either click on the Rectangle tool from here, or press R on the keyboard to get up the rectangle tool and let me drag out a rectangle just like that. Now visually this rectangle is over the button texts. That's why its head and insight. Now what I can do is either just drag it down like this side of the bat or use the keyboard shortcut command and square brackets to change its order. So let's put it at the very bottom. There you go. And the next thing that we're going to do is resize it a bit so that it looks more like a button. So yeah, there we go. That looks a little like a like a button, doesn't it? All right, We're getting somewhere. That's a good starting point. Now we need to tweak the colors bit, the bun is a bit ugly. If you agree. I mean, objectively, I've linked a blue text on a gray background that's like really ugly. So let's just start trying to make it look a little bit prettier. So the first thing that I'll do is make the button text white. And the way I'm going to do that is currently it's set to blue 0 and I can press on the drop-down, choose the wine style. There you go. And for the base, I'm gonna go ahead and make the base blue one. How about that? That looks a little better, doesn't it? And the next thing, one important thing that we're gonna do is we're gonna give it a rounded corner of six. Alright? Okay. And as a final splash of paint, you can go ahead and do Thanks. Click on the four squares here to choose a style and click on button shadows. This is the, this is the shadows that I have defined for you already so that you can just click it and it's flat on the button just like that. And then I'll get it. That looks more like a button, something that you can probably use in production, but not quiet. There are a few concerns here that we need to address. So let's go ahead and do that. And before we address the concerns, Let's first of all make sure that the layer names or descriptive, alright, we generate is honest. Forget to do that and we don't want to be designers like that for E chaotic. All right, so I'll select this text here and I'll call this label, so it's easier to understand that, okay, as a label, and I'll select the base, the rectangular base, and I will rename if you guess it. Thanks. All right, great. Now let's get back to the concerns that I was talking about. Button and an user interface. Throughout the user interface, a button is used at multiple places, forms and cards, and some sort of sign-up forms and pricing labels, pricing pages and whatnot. That the point is that it's just not using a single place, it's used at multiple places. And the least we can expect from a button is to be a single unit, which is just one thing and not two different things, a label and a base. We don't want that. We want it to be a single unit. And how do we make that a single unit? And you guessed it right? My grouping them together and how do we group them together in Figma is very simple. We drag up selections like motored them and press either, either I was about to directly under the keyboard shortcut. You can either go ahead and right-click Group Selection or simply just press Command G. And now this is a single unit. How cool is that? Right? This is a single unit. And when you look into the Layers panel, there's this group one and these two recite under this. So what we can do now is rename this group and hate. We have created our second button. The first one was this text and this as a tax and obeys emigrating. Cool is that, but there's still a slightly better way to make this button Figma, which won't require a separate base rectangle, and that is by using frames. All right, so let's go ahead and draw your copy of the button group that recreate it. So I'll just go ahead and press Option. I can hold Shift so that it doesn't go anywhere. It just stays in the line and I'll drag out a copy. Now I'll select the new copy that we just dragged out and let go over here where it says Group. Now what I can do is click on the dropdown and choose frame, just like that. Okay, the contents are in a frame. Now, look at the difference. Look at the difference in the icons in the layers panel. Look how a group looks and leg how the button, which is inside a frame that blogs. And now that's not the only difference. I'll tell you more about it, but yeah, the the button, the contents are in a frame now. And just grouping things together and then selecting, selecting frame from the dropdown isn't the only way to frame selection. What do you get rather do instead is when you have two things together, you can press the keyboard shortcut, Command, Option G, reframe them together or right-click and click on frame selection. Now I know at this point droop and frame the day sound and that behave very similar to each other if you're not aware of the differences between them, but just hold on, follow along and you'll know the difference. Now, to start with, we've got the contents of this button inside a frame as opposed to a group. Now, for the benefits of using a frame instead of a group numero uno, we don't need a base rectangle. Okay, so let's go ahead and delete that. Met What, What, What happened? We don't need that because we can apply all sorts of properties like rounded corners and colors and shadows for the frame itself. So let's go ahead and do that. So remember the same exact effects in the same exact styles that is applied to this rectangle base here, we're going to go ahead and do the same to the frame. So to do that, the first of all, let's go ahead and give it a fill of blue one. Cool. Let's go ahead and again, give the rounded corners of six. Let's go to effects and add button shadows. How cool is that? We don't even need a separate base because we were able to add colors and effects to the frame itself, which you cannot do to a group. Okay, now, just as a last measure, I'm going to go ahead and make sure that this label is centered inside the frame. So if I select the label and I click on these aligned, you see all these align icons I can click on align vertically, center or horizontal extent around, sorry. And then I'm clicking, then I'm going to click on align vertically center, just like that. And the label will align itself properly inside the frame. Now these two buttons look the same and the one on the right, the one which is created using frame is slightly better than the one that is on the left which is created using groups. You also know the reason why this one is slightly better. All right, now let's go ahead and try and resize them and see what happens. Let's start by resizing the group button. You see when I do that, okay. It kinda resigned his properly but not so much. And that can be very easily fixed. So I'm gonna go ahead and select the label, alright, and then I'm gonna go ahead and stretch it to this corner and stressors to this corner. And I'll change the text alignment descender, okay, and now when I resize it, look at it, it resizes properly, like a button should resize. Great, Good. Now let's get to the frame button and let me try to resize it and you say nothing happens at all. Okay? Now, frames and Figma it come with the option to set resizing constraints. You can select anything inside a frame and choose how they behave when the frame is resized. If I select the label like this, notice that constraint panel, that constraints panel on, sorry, that appears on the right. And it doesn't, when I select something that is inside the group, say it's not there. But when I select something inside the frame, there is a constraint panel that appears. Now this constraints panel is going to be really important. So let's go ahead and spend some time with this section of segments UI. Now by default, it says that when the frame is resized, keep the label at the left and at the top. These two dotted lines here from the left and from the top. This means that when the frame is resized figma, we'll maintain these distances from the left and from the top. Now, the behavior we want is that when the frame is resize, that labels should stay in the center, okay, Now there's two directions in which you can re-size anything horizontally and vertically. And now that's what these icons here mean. Look at these, look at these right here. Now this is what means that when the frame is resized horizontally, Very should the label stay? And when the frame is resized vertically, very showed the labels stay. Now in our case, since this is a label inside the button, it should remain in the center of the button. So I'm gonna go ahead and resize this frame again to this normal button width. And I'm going to select the button label again. And for the horizontal stretching, for the horizontal resizing, I'll tell Figma to keep the button label in center. Now look how the dotted lines changed. They are these little, they're very, very, very dim. Maybe you're not able to see that, but there are these two lines with a little cross which indicates that the button label will always stay in the center. So let's go ahead and check if it worked. I'll click on the button that is created using the frame, resize it. Any yes, it does obey the resizing constraints that we set. All right, great. Now there is no one in their right mind who would vertically resize a button. But just for the sake of it, let's click on the label. And even when it is resized vertically right now it's top, look its top, which means that it will maintain that as a sense, but that isn't what we want. We want it to be centered as well. So I'll select the center for the both horizontal and vertical resizing and look at what happens is that it stays in the center. Isn't that beautiful? If you're entirely new to figuring out these are the things that you probably already knew about. But anyway, nothing wrong with a short refresher as there. Let's change the text and scientists button. Let's change the label. Of course, no button, real life just has a button written over it. It could be something like, let's say click to buy or download this and play it it. They'll see the frame of the button has no respect for the content that's inside of it. Okay? And what we can do is, you know, whenever we change the length, our recovery changed label and the length changes. We can go ahead and again you now just to maybe pull the buttons stretched a little bit and then we can do this. Then again. I'm sorry. Do oh, well, there yeah. Do this line the center and then resigns again. Are and if we go and make it too small, it disappears. You know, the thing is that we cannot anticipate the text that is going to be inside the button, the length of the label that is. So every time it's updated and we did to pull and push the buttons to make them fit. They do not. And listen to me carefully. The buttons do not auto resize. Emphasis on ADL. This is exactly where auto-layout comes in. Alright, in the next video, we're going to make the final button. Now we've made a normal text button, we have made a group button, we have made a frame button. And we know that how each of these is better than the other. And now we run into the problem where we cannot, we cannot expect the framed resize based on the content. We cannot expect it to auto resize based on the content. And now you already get the idea where I'm going with this. So I'll see you in the next video where we will make an auto resizing button using sigmas auto-layout feature. All right, I'll see you then.
5. A lesson in Buttons - Part 2: Welcome back to the second part of designing buttons. Everything is as you left it, we have the same amount of buttons on the screen and add their same possessions. It just that the previous leader got a little long and anything longer than ten minutes is not something that I really like so much. So I decided to split this lesson into two parts. The first part, we created a bunch of buttons. We saw all the different ways that there are. We saw the trade-offs and we saw the upsides of using a frame over, over, over group. Okay, now, Let's go ahead and get started with this lesson. I cannot wait now like we have done so far, let's grab a copy of this frame button right now I'm gonna go ahead and rename this label back to button just for just to, just to keep everything gets us. And because we have button, button, button limb written over here, and later in the course we'll have something like wherever you can put whatever text, whatever Texans, how the label that you want. But for now let's leave it at the button. All right, so I'm just going to grow it and drag it beside it so that they look nice and arranged. And the next thing that I'm going to do is go ahead and press Option and drag a copy out like we do. Now. When I click on this button right here, the one that I just dragged out, notice this little section here called onto land. Do you see that? Yeah. Yeah. Right. That's it. Oh, I'm sorry. I get a little I get a little taken away. This, this tiny little thing just a couple of pixels high is pure magic. Okay, Now, are you ready? I'm going to drag this just this signed the autoplay I'm section. Are you ready? I'm gonna go ahead and just click on the Plus and boom, that's it. That's it. This button frame is now inside auto-layout. How do I know that? That is different? We'll look at, look at the icon in the layers. All right, this is for group sort of frame, and this is for auto-layout. And not only that, not only that look at this and when I press T and I get inside it. And let's change the content of label. Let's call it download now. And wow, what just happened? Hold on, hold on, hold on. Hold on and click, oh my God. You say the button, the frame of the button, the button overall, this automatically resizes based on the content that's inside the label. And now, isn't that cool? Now all the excitement aside, I know if this is the first time that you've seen this happening, you don't want to listen to me, just want to play around with it and see how this works. But but hold on, hold on for a second. What I wanted to say is that you don't have to go through all the steps that I had to go through. You end up creating a button and make an in-group, making a framed right now and then I'll bring out a layout. You don't have to go through all these tabs to create an auto layout frame. I will show you in the next video and we will talk about drop-downs. I'll show you how to directly go to the auto-layout and I will show you the shortcuts that, I mean, there are not many shortcuts. It's just one chore to get to our auto-layout, and I'll show you that in the next video. But before that, let's understand all the different options that are presented here when auto-layout is added to a frame. Now these two arrows right here represent directions. We're not going to need that in this video. So, all right, we'll move on to the next one. Okay. Now talking about things that we're not going to talk about or need in this video. But the next is spacing between items. Now, this is padding around items. We are going to talk about this in a bit. And this last one is alignment and padding. We are going to talk about some parts of it in this video. All right, let's start with padding. Now. What exactly is panning? Imagine shipping something, a parcel or you know what? More relatable, imagine receiving a parcel from Amazon or whatever online e-commerce website to use. This is not a sponsored video. Okay. So imagine receiving a parcel, something fragile, like a glass or a vase or my heart, if you're not liking the course, It's just not directly that the thing that is that you receive, it's just not directly put it into a cardboard box, is it? There are some padding added around the actual item, bubble wraps or those air pillows or newspaper, you know what I mean? Right? So in UI padding is whitespace around an element. That element can be text or any user-interface element at all, as we'll see later in the example of button. I have a closer look at this. Now this button here is basically made up of the texts, that is the label, the blue background and the empty space that is present around this label. And how much space is on each side of this label is decided by the padding. When I click on the label and hold option on my keyboard, I can see the amount of space on each of the four science. So top, right, bottom, left, and the order top, then right, then bottom left is unimportant important so you can use them. I'm on it. Troubled room or Lauder. I'll tell you in a second why this order matters. Now let's play around with the padding values and see how it affects the button. Okay, so. If you go right here where it says auto lamp, you can go into where it says mixed. And let's just enter 12 to just around a number that's under 12. And this, and now what happens is when I set 12, the padding, the space around label, the space we're in, the label on each sides, top right, bottom left is set to 12. Alright, now let's try something different. Instead of writing 12, I'm going to write a comma separated values. All right, so let me write 12, 13, 14, 15. And this is where the order, the top right, bottom left order comes into play. Now overdone, 12, 13, 14, 15. I'm going to press Enter and now look at this. The top is 12, Ryan is 30, boredom, this bottom is 14. Alright, let's see. And on the left it's 15. So this is all what are top right, bottom left. And you can write a comma separated value to adjust the padding or the space that is on each side. Okay, now, this isn't a realistic padding values have, Let's go ahead and enter some good, realistic button values that you know, that balances the debt, creates a sort of a visual balance and the button, so what I'm going to do is I'm going to select the button in the frame again and go in here where it stays and mixed and mixed basically means that it doesn't have the same value on the four sides. So let's go ahead and put 15, four top 32 for ranked 15 for Boston comma 0. Don't forget to add the commas. And 32 for laughed. I'm going to go ahead and press Enter and look at this now. All right, I can also go ahead and change the text that is inside this button to, let's say download. Download seems like a reasonable button label. So then again, look at the values, 1532, 1532, top ranked, bottom left. All right, great. And that's it. Whatever you write is HIV is inside the button as label, it will respect the padding values and the button, the frame, the resize accordingly. Now isn't that great? Now I know that writing a comma separated list of padding values is not something everybody would like to do. I mean, I like having my hands on the keyboard and I can touch type. But if you're more of a visual person, you can click here on this little, that last square. You can click here, go inside and update the padding values on each side manually. Like that. This is how it look like. Here's, here's the thing. This is how you're actually Figma once you to do like normal people do. But the thing that I explained earlier, the comma separated values would just up a superuser thing. So yeah, yeah, you do whatever you want. You can go inside and adjust the padding values from here. All right, Okay, cool. Now with that, we're done with the most meaty part of the lesson here, I'll do a little bit of housekeeping now and make different size button if you want to hang around for that. Hey, you're welcome. Now, this button that we have is a medium-sized button, okay? And remember that we selected labels slash medium, which means, which meant medium size font for the label. So overall, this button is a medium-size button, but in a user interface, you don't have buttons of just one size. Generally speaking, there will be a large, a medium, and a small button. So let's go ahead and make them. And also you'll see how easy it is to do that with auto layout. Okay, now we'll drag a copy of this out by holding option just like that. The next thing that we'll do is we'll select the label, alright, this text right here and change the style to label launch. Now we're making a large button here. Okay, this is medium for making a large button. How about we just write, write down medium for this one. Okay, and I'm gonna just go ahead and drag it here, right here. So again, coming back to this button, I'm going to select here and change the font size, which basically means that font-size for medium is 20, for largest 24 that I've already defined for you. So I'm gonna go ahead and select label arch and you see the button just grew in size. Let's do that one more time, okay, without adjusting anything, I'm gonna go ahead and select Li, build, launch and name. The button grew in size a little bit. Now, just changing the font size or the label, it doesn't make a button large. You have to also adjust the padding a bit so that it looks visually, it looks bigger than the medium or the small button. So we're gonna go ahead and adjust the padding values. Now, I'm going to go ahead and go inside here. Two edges, the padding values and not try to Comma Separated Values because I've already done that. And you know, just to show you that how it works. So I'm going to go ahead and give it a 20 on top and bottom like that and you can see it changing. It changes. And then we're gonna go ahead and give it a 48 on left and right, like that. Alright, so I'm gonna go ahead and put it here and call this button large. How does that look? Does it a little bigger? Of course it looks bigger. Okay, Now, next one, next up, we need to make this small button. All right, so again, I'm going to go ahead and drag a copy up like this. Okay, cool. And I'm gonna go ahead and select the label. Select label a small. All right, Now again, see just making the labels small doesn't make the button look visually small. You also have to adjust the padding. So I'm gonna go ahead and select this frame again, going to write over here where it says alignment and padding, you know that. And I'm gonna go ahead and set 10 for top and bottom. And I'm gonna go ahead and set 16 for left and right. And this button is now small. All right, Okay, now let's just change them back to buttons so that it's easier to see. And i'm, I'm gonna put them side-by-side so that you came contrast the shape. All right, there we go. We've got three very pretty looking buttons and all in different sizes. How about that? Can I get a high-five or 80? Ok. Now, now, once we have the final goal that we were after, we can go ahead and get rid of these these things because of course we're not going to use them. They're not important. They're not as sophisticated as the auto-layout mountains. Okay, Now the last step, we're going to go ahead and turn these buttons into components. Components are a very useful part of Figma. Components are reusable. You can use them in several different place has and you can read more about them and learn more about them. And if you've never heard about IT, components, what I'm going to do now we'll give you a pretty solid idea. And also throughout this course you'll get a pretty solid idea of what components are. So okay, let's go ahead and turn them into components. Return an element in a component or something layer into component. What do you do is you select it and you click on this icon right at the top which says Create Component. I'm gonna go ahead and click that and watch this turn blue. There will be this icon added on the left and right over here too. So just be on the lookout for that. I'm going to click I'm going to play. Do you see, do you see the difference? All right, There you go. Now this basically means that this thing is now a component. Alright? So I'm gonna go ahead and do that. Do the same to the rest of these two buttons. So I'm gonna go in and click here. Like they're click here, click there. Okay, Now these are components, but that's not it. What I'm gonna do now is select and drag and click on this, this, this, this, this, this little thing this is saying is this is also a magical strip if you ask me, but all right, let's go ahead and click on combined as variance and you will see a blue border really created around it. So I'm gonna go ahead and click on combined as variance 1, 2, 3. There you go. All right, great, beautiful. This means that this whole thing. You know what? Let me just show you. Let, let me just go through a few more steps and then you will understand variance and components better. Okay? Now, I'm not going to jump ahead of myself and tried to explain something abstract, which is abstract until you've seen it. So I'm gonna go ahead and you see there's this drop-down so I can select each of them. Now the, each layer, it says default, okay? And, and you can double-click on this layer and change the name. So what we're going to do is when this is selected, you see the Launch button and select it so we can, we can create our own values here are only key value pair here. So I can write this button times x large. I can give it a size of large, and this is completely arbitrary. That is something that I am choosing the name of the property, which is size and I'm calling it large. And I'll do the same for this one right here, which is the medium buttons. So I can go ahead and double-click and right sides. Medium. Okay, cool. Now I can go ahead and for the small one, do the same. I can, right? Size equals small. All right, now if you're totally done, the only thing left to look at is how, why we did this and how components and variance behave. Okay? Now, if you look on the top, this little thin strip right here, it says layers behind that there is this thing called assets. So I'm going to click on it and you'll see local component and this button is added. Now before I created the component, you might have not seen it. I mean, because there isn't a components, we have not seen a local component. Now, this means that a component can be pulled out a year and put any vector on the user interface as many instances as we want. Alright, and they're all connected to this. Okay? Now look at this. Now look at, look at what creating size equals medium-size and cold storage and size equals small, which is ritual basically called the variant Feature and Figma does. I can select any of the instance, okay? You see right here where it says size large, I can go ahead and pick, let's say medium. All right, so the button is now medium, and I can go ahead and select small, and the button is now small. Now this means that in anywhere in my user interface, if I was creating a card and I wanted the button, I could just drag it out and let's save the day. It was a sign of form that I was creating. The card was about science, so I can just write, sign up and then, you know, then I decided, Okay, no, no, I want a medium-sized button there. So all I can do is just click on it and choose medium, and that's it and everything works. So great and harmony isn't that beautiful. And more than that, since all these buttons, all of these pull-down buttons, our instances of this right here, this whole center of truth. If I make any change here, it will be reflected in all the instances. Let's say for example, I didn't want the button just a few days down the line and decide, okay, blue buttons. I want the buttons to look gray so I can select Grey 0 and bam, it's reflected every where. How cool is that? Now, just for the sake of this course, of course I like blue, so I'm gonna go ahead and switch back to blue. So I'll select all of these. Go to this grid. It says Grey 0 and slight blue and just like that and everything. So beta and I'll get rid of all of this because I don't like that. Okay, So that was it. In this lesson, we learned so much just as part two, and we're already over 10 minutes, but there's so much, there was so much learned. We started out by creating texts buttons, and we moved on to create auto-layout buttons. And then we moved on to create different sizes of them and then recombine them in the variance so they can be used at different places in the user interface. We did so much, you did so much, and we're also proud and you can take a break now. And I'll see you again in the next video where we'll be stepping up our auto-layout game and creating a little more complex component. Okay, I'll see you then.
6. Making of a Dropdown: Okay, So buttons was pretty straightforward. We only use one or two features of auto-layout, like how to create an auto layout frame or how to add auto-layout to a frame. And how does set padding inside the frame will unwrap a few more auto-layout features in this video. And let's quickly have a look at what we'll be doing together in this video. So what you need to do is go into mastering Figma them magic of Ottaway on finished and click on dropdowns, dropdowns pages right below buttons. And often, you know, if you're not familiar, very familiar the Figma user interface, sometimes the pages is, is collapsed, so you have to click on this button right here, and then it shows up. And then you can click on drop-downs and look at this. Look how the component look at the user-interface element that will be designing together in this video is how this is a selector component that you know that this is the name that I gave to it. You can call it a list or you can call it a card or whatever you want. And it works beautifully. Look, I can add more of this and then I can resize it properly. Look how the button always stays at the bottom. And if I resigned his horizontally loci, everything resizes beautifully. So this will be a little bit of a step up from everything that we designed in the last video, which was just very normal buttons. So, all right, let's go back here and let's get to work. So make sure you're inside the starter file and then make sure you're inside the drop downs page. So click on the drop downs page and it'll be totally empty because we're going to fill it with a bunch of cool auto-layout UI stuff. Okay, Now in the last video, you saw me do a bunch of maneuvers to finally create an auto layout element. The button that is, and like I promised, you don't have to do those maneuvers, so there is a shortcut for that. Okay. And I'm going to show I'm going to show it to you right now. Okay, So the first thing let's do is write some texts on the canvas. And how do I do that? If I either click on the Text tool or just press D and then click on a Canvas anywhere and start typing. Now I'm going to type in, let's say option, okay, Now, make sure the option has one of the textiles that I have defined applying to it. For now, I'm going to choose labeled large for it so that it looks like this. That looks great. Okay, Now to nest this and that's this text inside and ultimately on frame, all we need to do is make sure the text is selected and press the shortcut Shift plus a, OK, Shift plus a. And there you go. It is inside and auto-layout frame. How do I know that? Look, look, look at free written over here. Look at the icon layers panel and look on the right side where the auto-layout thin strip, the match will thin strip is now activated. How cool is that? Now let's give the frame that we've just created, a background color, okay, We'll pick a color from the color styles. How about grey 0, okay, great, and we'll change the color of the text to white. And how do we do that? We just click on the color styles and we choose white. Just like that. The next thing that we want to do is they wanted to and just the padding. Now if you're following along, what you need to do is give it 16 pixels padding on the top and bottom and 32 on the horizontal. So go ahead and see if you can do that while I do the same. All right, so let's give it a padding of 16 on top and bottom, just like that. And on left and right, we're gonna give it a padding of 32. Next, what I'm going to do is give this frame a corner radius of eight. And let's press an eight and click Enter and look at that. And the best part about all of this is very doing so much. We're giving spaces were giving colors and rounded corners and all of this as just one single unit. How beautiful is that? Look at the layers panel. No clutter at all. It's just one single unit. And now let's go ahead and check if it's resizing properly. Okay, so I'm gonna go ahead and stretch it horizontally. And yes it is. And remember, unlike button where we would like the label to be aligned at the center, we want this UI element to have text always on the left. However, the frame is stretched in resized now to make sure that it is happening. And by the way, figma has already set it to left by default, all you need to do is click on this, click on the same square where you're adjusting the padding. And remember that it says not just padding but alignment, alignment and padding, which means you can also adjust the alignment. So for now, the alignment is center and left. There are other options, three on top, three in the middle, and three on the bottom. So for example, this is top and left and I'm going to choose left and center. So that's it. And now if I resize it horizontally, you see it stays on the left, like it's been chosen in the alignment section here. And if I resize it vertically, you see that it's still remains in the center as it's been chosen. And it's been just been said, it's been directed to stay in the center like this and feel free to play around with the alignment a bit and get a better hang of it. For example, if I'm selecting this frame and I change the alignment to center, it behaves like the button that it stays in the center. Minutes resize. So again, I'm gonna go ahead and select here and put it on the left like we want to. You can, you know, as I said, play around if I keep it on the top and the left and I resize, it stays at the top and the left side. Yeah, that's really cool. Okay, So I'm going to go ahead and set everything through as it was, where the alignment was at the at the middle and on the left. And I'll leave it there. And let's continue developing our UI element. Now so far, we have only made this part of the entire component, this option part. We also need to build the wrapper and notice that it will lead multiple of these options, which means reusability, which means we will convert this, this right here to a components, this reading this two option. And that will turn the text layer and we'll change the name of the text layer, I mean, and call a and LA the l label. And then again, I'm going to select the frame and to convert it into a component. You know what to do. Click on this icon right over here and bam, it's that component now, which means I can go into assets and pull as many of Ed as i1, 1, 2, 3. And if I make the change, make some change to my main component, like change the background color. It'll be reflected in all the copies so far, so good. Now I'm going to show you a workflow that you will find yourself using over and over again in your UI design routine. I already, like I said, you can drag out an instance from the assets panel of this component like this. And there's another way to drag out an instance. It does my holding Option and dragging a copy from the main component. And earlier, like I showed you, if it was a normal rectangle or something that is not a component, you can Option and drag to create a copy of it. But if you do the same action option, drag on a component, you'll drag out and instance and look at the layers panel, have the instances appear with a 45-degree rotated square. It's also called the shape, I believe is also called a rhombus. And look how the main component appears, but four squares stacked like this. Okay, great. So with these two components, these two instances of the MainComponent out, I can put them here. And the next thing that I want to do is to put them into an autoplay on frame. And this is the routine that I was talking about often what happens is we have instances of a component and we want to arrange them together, like for example, in this case we wanted to put them in a list. All right, so I'm gonna select these two and press Shift a and look at how automatically it's put inside an auto layout of components. So select both of them, press Shift a and look at that. It's inside a frame and look in the layers panel is inside a frame. So I'm gonna go ahead and first of all, reading this frame to something like dropped down. Okay, pretty cool. And look at this. Since these options, these instances of this option component are inside an auto, auto layout frame. What I can do is press Command D and they'll automatically be added and the spacing between them would be kept pretty pretty, pretty consistent because they are inside an auto layout frame. So another thing that I can do, which brings me to the spacing between part of the auto-layout strip is that you are getting out. You can just you can adjust it by dragging and this changes. I think the name is very so X self-explanatory. It would just space between items, datas, and signed the component. And for this one, we want to keep it at 10. So I'm going to type 10 and press Enter and look at this, the spacing between each of them, each of the options is 10. How, how, how will that, how cool is that? And the next thing that I'm going to do is I'm going to select the frame and give it a background color of gray one. So there you go. Now it has a background color. And the next thing that we want to do is give it a padding of 12 on all the four sides. So instead of, instead of going inside here and typing 12 four times, what I can do is just, I'm too old ones here, press enter and the padding of 12, there'll be added on all tags. Look at that. That's great, isn't it? That's pretty cool. And while we're at it, what I'm going to do next is give it a rounded corner of 12 pixels. So 12 Enter. And now look at this. We're going to how cool it looks like a proper Lists dropdown. And the best part about this is I can add components, add, sorry, add instances of option inside the list. I can remove them and the height and everything is auto adjusted. All right, pretty good. Now, just to reminder that this is an auto-layout frame and the options are also created using auto-layout, which means you can nest auto-layout frames inside auto-layout frames, and you have no idea how powerful that is. We'll look at some really cool such examples later in the course. But for now, notice this, if I resize this frame, this drop-down frame horizontally, the options don't resize. Why is that? Now, if I select an option, if I select one of the options from inside the auto-layout frame, you'll notice that there is this resizing stress that appears right below that auto-layout strip. If I look into the horizontal resizing constraints, which means if it's resized horizontally, it says fixed width, which we don't want. We want it to fill the container that it has insight. So I'll click here and choose Fill container just like that. And now you see that the frame automatically stretches and fills the container. There's another option called hug contents here, which means the option will only take up space enough to hold the content that's inside of it, which we don't want in this scenario. We want it to fill the containers. So let's go ahead and select Full container, and we'll do the same for the rest of these options here. So select all of them and go ahead and change their resizing constraint or the horizontal resizing constraints to fill a container. And look at that and if I resize it now, okay, now beautifully resizes. Now you can say, why can't I just said resizing constraints on the main component here of which these are basically just instances of and be done. Well, you see some things in instances over rideable, like the background color or for an instance, for example, I can go ahead and change the background color of this instance and it'll affect just this particular instance. Or I can go ahead and change the detects that is inside, for example, let's just call it a laptop or whatever, you know, random words. So these things are over writeable. And just like these to resizing constraint is also over writeable because we cannot anticipate the context in which a particular instance might be used in Figma gives us a choice to choose resizing, constraining for each instance individually. Now, again, if I go ahead and resize the frame, look how beautifully it resigns as like it should. But what about vertical resizing? As you know that the height of this auto-layout frame as calculated by the elements it holds and the space between each of the elements, which we have set right over here in spacing between items. And it obeys that because look here, if you click on the last square and look at the bottom part, the bottom most part, it says pact, which means it'll calculate and pack the content tightly. And hence, if I resize this frame vertically, you see that the elements still remain packed, but I can change the packing right here from packed to space between and look at what happens. The space between items is set to auto. And if I resize this vertically down, everything just spreads as the frame is resized, relook at an actual use of space between packing in a bit. But for now let's roll everything back as we work. Okay, great, We are almost done here. The next thing that we want to do is to drag out and button component from the assets panel. Remember that this is the button component that are created in the previous two lessons. So I'm going to just drag it out and put it right beside it. Now, this is a large size button. We would look better beside it, probably a medium sized. So yeah, they look better together. And the next thing that we want to do is put the button inside this very frame. So to do that, all I have to do is to just drag it in like that. And there you go. And I can tell that inside the frame because when I drag this frame, look at that, it also drags around. Now this is a very common scenario while using auto-layout. Often what happens is when you put something inside or, you know, make a change and suddenly notice that the frame is not resizing. This is because we often do some changes which results in the resizing constraints to change to fixed width and a fixed height. And whenever we encounter scenario like for example, right now the height isn't properly adjusting. All we need to do is to go here, select that and click on HUD contents and look at that. It just already is inside it and again the button. The next thing that I wanna do is have the buttons stretch this entire width. And again, how do we make sure that it does? We again go into resizing constraints. And right now it says hug contents, which means it will be only wide enough to fit the content that's inside of it and do make it fill the container that it's inside. What do we have to do is go, go here and the horizontal resizing constraints and click on Fill container and look at that. It fills up the entire thing. And we have a problem here that the button that the text inside the button is not in the center. And I guess I may have missed that. I may have not chosen the alignment properly. So let me go ahead and see that in this, in these components that I created and of course Read, the alignment is not in the center, so I'll wait, I'll select all three of them and make sure that they are all centrally aligned. And if I go back to drop-downs, you see that the text is now in the center for the button. You see these fumbles of it. Auto-layout often happens. Sometimes you forget that there are constraints, sometimes you forget the alignment, but they are very easy to fix. Like you saw me do just now. Okay. Now, the only thing left to do if you've if you'll follow me to the finished file, is to arrange everything in a way that they behave like this. You say even a vertically resize whole element. The button stays at the button whereas the list stays around it at the top. And even when I resize everything horizontally, everything just resize as, as a chip. So you can go ahead and try doing this, replicating this behavior if you are falling along or you can just do as I do, okay, So the first thing that we need to do is we need to separate the lists and the buttons right now these options, I mean, the options on that button, right now these options and the button are in the same frame. So the first thing that we'll do is we'll select all the options and put them inside one frame. And how do we do with that? We just wiped everything, make sure that every option is selected and the button is not selected. Once everything is selected, all the options are sort of like that. Press Shift a. And what this will do is put it inside, put the options inside of their very own frame. And I'm going to select this frame, double-click on it and call it OPT I ON options. Okay, enter, great. And now the next thing that I wanna do is we want to select the options, this frame right here, give it some padding. Okay, so let's go ahead right here. You know how to give padding to an auto layout frame. Again, I'm going to go ahead and give it a padding of 12. So click there to add 12, and that's it. You see, right now it looks a little jumbled up, but we're going to set then adjust this a little bit. The next thing that I'm going to do is I'm going to select the outermost drop-down frame and change its background color to, let's say gray to, okay. And this options frame right here, I'm going to go ahead and set its background color to, let's say gray one. Okay, Great. And while I'm at it, I'm gonna go ahead and give it a rounded corner of 12. Okay, great. The only thing to fix right now is the resizing of the outermost frame. And like we just saw, it often happens, dad, the constraint is said to fixed. And all we need to do to fix that is click on it and click on HUD condense. And right now it says very clearly visible that we have an outermost frame. We have a frame incited that contains options, and we have a button right over here. Now, let's go ahead and every time you do this, every time you create a frame, your nested frame, It's good to resize and check if everything is working properly. Now this button to resizing properly, but this frame is not. Again, how do I fix that? Like this frame go right over here and so I feel container, okay, great, Now this fill set, but the options are not. So I'm gonna go ahead and select all of them again and go ahead and change this to fill container. And now if I resize this, you see everything how beautifully race scientists not remember that it is very easy to get frustrated. Then the auto-layout frames that nested frames don't work as you anticipated them too. But remember that what do you have to do is make sure that the resizing constraints are set properly. All right, now for vertical resizing, I'm going to select dropdown. And if I look here, it says packed. And like I said, and like I explained earlier, what Pack means you should be able to anticipate what will happen if I resize it vertically. Of course, everything just remains packed. Now if I go ahead and change this to space between, look at what happens now. Great, This stays right here and a space between makes sure that everything just spreads, and then the whole element is resize vertically. The space between is just automatically adjusted, like it says here. Auto. Okay, this is great. This is great. We learned a lot in this video, even though for the small amount of options that auto-layout has, There's a lot of complexity in it, and there's a lot of beautiful, powerful components that you can create out of it, like we saw just now. And now, if you're using this as a component or you know, you want to reuse it anywhere in your user interface design. What I suggest you do is go ahead and turn it into a component so that, so that you can drag multiple of these out, over, multiple of these out and use anywhere you want. And with that, with that, we're done with this video. And in the next one, we're gonna do something really cool. So I hope you'll stick around and hope you learn something, and I'll see you soon.
7. Two Panel Layouts: In the last video, we made this little selector or drop-down UI element, all using auto-layout and it resizes beautifully both horizontally and vertically. We'll be reusing this in the next example, in example that we'll be going over in this video. And it'll be simple because we have already created a component out of it and it was president in our assets panel. We can pull it out from assets panel wherever we want and where we wanted to pull it out is in the two panels page, make sure first of all, if you're following along, which I really hope you are, you are in the magic of auto-layout starter file and in the two panels page, go into assets and pulled my drop-down just like that. Pretty cool. The next thing that we want to do is add a bunch of text to this canvas. And to do that, I'm just going to click on the Text tool, drag out a rectangle like this, and we can now start typing inside this box. First of all, let's grab some filler text I have figma has Wikipedia page opens. So I'm gonna go ahead and grab the first paragraph, command C, come into my textbox, press Command V. All right, great, Let's get rid of this little square bracket that we're not going to need are just, it's not important if it's there or not. So just for my pleasure, I removed it. Okay. So once we have the text, the next thing that we will do is choose from one of the textiles that I've defined. And for this one we're going to choose body normal. So yeah, great. Looks, looks pretty good, doesn't it? And let's change the color of this to grey 0. Okay, Great. And the last thing that we're going to do with a text is to click on these three dots here, resizing and make sure that auto height as selected. When auto height is selected, if I edit the text, you see the height of this box and just automatically, and if I resize this or stretches horizontally even then the height of the box is auto adjusts it, which is pretty great, and also makes sure that the text is aligned to the left. So far, so good. What do you wanna do now is put this text that we have written here and this drop-down components together into a big component like this, like I have in the finished, finished the magic of auto-layout finished file under a two panels page, you know, someone like this and to have them together into have them resize nicely like this. And if you resize them, it vertically, it resizes nicely again. And if I remove something from here, again, everything just, oops. I meant through an option, everything just adjusts properly. Okay, Now coming back to the starter file, again, we need to put them together into a frame. How do we do that? Again, we select both of them and press the shortcut Shift plus a. There you go. And both of them are inside a single frame now and look at the icon in the layers panel. Look on the rights to this auto-layout strip. It's present, which means auto-layout has been applied in both of these things are nested inside an auto-layout frame. Now, before we go ahead and do more things with it and make some changes and make this skeleton of a thing look like the finished thing. There is something that we need to talk about. The one thing that we haven't quite discussed in depth yet, and that is the direction of auto-layout. Now let's move up a bit by holding space and dragging up on the canvas like this, come to a clear area and let me draw two squares on a canvas, 12, All right, great. And make sure that they are of the same dimensions. Okay, Great. Now, let's put them together in an ongoing armed frame. How you do that? You select both of them and press Shift a, and now they are inside an awfully on frame. A bunch of options appear here. And even inside the layers panel, you see that the icon changes in both the rectangles are inside that frame. Now I suppose you might have already played around with this, but it's not rocket science, it's quite simple actually, looking icons in the layers panel for this auto-layout frame, look at how the rectangles in the icon are stacked vertically, right? This shows the direction in which auto-layout is arranging the elements in the frame. And the same is iterated with this arrow right here. Look, vertical is selected if I change the stacking direction or arrangement of this of the two rectangles inside this frame to horizontally by clicking the arrow here, look at everything that happens. I'm gonna go ahead and click on horizontal direction. Again. They are arranged horizontally now, and even in the layers panel, the icon changed to two rectangles stacked horizontally. Now, that is all there is to know the basics of all there is to know about directions. And this was the last thing that was required for me to go over in terms of all the aspects of faraway out. So wherever you are, let's get back to our component now. Already that do things that we need to make the component are inside and auto-layout frame. From here on, it's all about adjusting the settings and playing around with the knobs a little bit. Okay, let's start by renaming this, this frame one to two panels. So not to move adults with just two panels. And let's give some padding on all the sides of this frame and also give it a background color for the padding. Let's go with 24. So again, if I want to blame on the, all the four sides at once, I'm going to click here and write 24. And a padding of 24 units or 24 pixels for applying on all sides of this little component. So far, so good. Next, let's give it a fill of gray three like that, and let's give it a rounded corner radius of 12. Now remember that the two elements are horizontally stacked side-by-side as it's represented in this icon here, and as it is shown in this arrow icon right over here, if I make it vertical, it'll be, it'll look quite different like this. Okay, But let's go back to making it horizontal. Now let's adjust the spacing between these two things that are inside right now the spacing between them is 103, which is quite large. And, you know, I can square up on them and the spacing will increase or decrease, but Let's set that to a number, something like 32. Okay? All right, great. Now it looks nicely laid out here until, until we try it should resize it. Let's start by stretching it horizontally first, okay, and no, that's not what we want. There are two things now we can do here. Number one, we can decide that the width of the drop-down or this select her component or whatever name you want to call it, stay the same while the texts width expands on resize. For that we will select the text, okay, you have end plate. Pay close attention here. We'll select the text and change its resizing from fixed width to fill the container. While this component, this one, the select the drop-down stays fixed width. Okay? And now let's look at how it behaves when you resize it horizontally. So, okay, Great. See, see how beautifully three scientists. So all we said to Figma was to make sure that whatever size there is remaining inside this frame, make the text fill it that is filled container. And whatever happens, whatever size of this as we told Figma to keep this component fixed width. And that's what Figma it. And now that we resize it, the text flows while this one stays fixed and its dimensions. Now, conversely, we could want this component to change size and expand on re-size while the text remains fixed width for that, but we'll switch the resizing constraints, make the text fixed width, and make this the drop-down component to fill the container and look at what happens when I resize now. Okay, How cool is that, right? Moreover, we can want both of these to scale with the container or the outer frame, in which case we will select both of these and change both of their resizing constraints, the horizontal resizing constraints to fill container. And now if you resize, both of them, adjust the width. Okay. All right. Seat CSAC. I think I will stick with this selector, this component, the drop-down, I'm calling it select her again and again because I used to call it that, but you know, the name doesn't matter here. I just want you to know that, Okay? So I wonder this component to be fixed width and I want this to be resizable, which is Phil container. And we're back at option one. Perfect. Now for vertical resizing, which currently is just nothing for vertical re-sizing, we want that this drop-down component, this item right here, to stretch and fill the container when resized vertically. So we're gonna go ahead and select this, go to vertical re-sizing constraint and change it from fixed height to fill a container. Now when it resizes it vertically like this, you say it resizes properly. Very grand indeed. We've got everything set up. Pretty much just one thing. Okay? What if we were to increase the content in the text so that the overflow is that container. So instead of putting in a bunch of texts, what I'm going to do is remove a couple of options from here. So I can do that. Delete, delete, let me remove a couple options. Or what I can do is simply go into the Layers panel and hide a couple options and resize it like this. Now, if I go ahead and stretch it down, and I go ahead and do that vertically too. Okay, now you see that the text is overflowing. Now this is a very common scenario. This, this happens all the time with auto-layout, with what it is, it has been instructed. So I've noticed this every time. I'm, I'm gonna select the outermost panel, the main component here, the single thing that we made and resize it. What happens is upon resizing whatever constraints that you have applied to this particular outer frame changes to fix both for width and for height. And every time that happens, you know, the things can overflow and come out. And to fix that, the simplest thing to do is find out, okay, if this is overflowing vertically, the only thing that I'm going to do is go to the vertical resizing constraint and change it to hug contents. And every time you do that, it'll automatically resize. And B, just high or tall or wide enough to fit the content that's in it. Now, as long as hug contents is selected. Now, now look at this. I'll come back to the previous point which I made, which is up on re-sizing what Figma does is change the constraint to fix. So right now look at the vertical one says how contents, but as soon as I go ahead and resize it, it goes back to fixed height, which is very understandable. Okay, now, as long as this says that as long as I'm resizing constraint for the entire frame is a HUD contents. Even if I do this, you see the frame resizes properly, okay? And if I go ahead and remove a bunch of texts from here, like this, you say everything just resizes perfectly. Now with this, we are done with the UI element that we're making. And look how clean it is and how well it resizes and everything it out. Now, so far, in this entire course, we have covered almost everything regarding auto-layout, but getting use to auto-layout requires some practice. So in the next set of videos, I'm going to introduce you to the components, new components that I'm actually using in my real Lord projects. And I'm going to challenge you to make them. I'm going to give you everything all the assets who require and then you can shoot your shot or if you please just watch me do it. Okay. I'll see you in the next one. I've got a pretty awesome challenge rating.
8. Challenge 1: Praise Panel: All right, We're going to go all freestyle from here on out. You know all the theory and little details about all out. And there is nothing new left to tell you. But I know that it's one thing to know something and another to use it in a practical case. So from here on out in the course, I will show you, demonstrate to you some components that I'm using in real-world projects. And I'll challenge you to rebuild those on your own using Figma auto layout at all. I'll also be building them along with you. So you'd have one reference and watch along, you can do that. And here's what we were really in this video. In this video we're building what I have just given the name of praise panel. Okay, So in my new project, which was a website, I have good things that people have said about my word, list head like this. There's a thing that someone said. All right, There's the praise then who said it and the name of the article or the piece of work they set it for. Now we are going to make a version of this component in this video. So make sure you're inside the magic of bodily outs totter file and in the praise panel paint challenge when praise panel, now inside this page you'll find three sections. K, The first is the anatomy of the entire component. A, look so beautiful. I mean, it has textiles listed, the padding values listed, and the color is listed, et cetera. So that when you're building this component on your own, you can only focus on the functionality and not worry about, okay, what padding value should I give here, and what color should I choose here, and what typeface should I use? None of that. Everything is listed right over here, and in the end there is a triangle that I have put that is the only extra part that you're going to need. The rest of it is just going to be frames and text. So yeah, there it is. There you have everything and in the middle you have the finished component which you can play around with. For example, I can increase text, write more text here and write more text over here and see how it resizes. And then I can stretch it and find out, oh yeah, great. So you can do that, play around, research a little, See how it functions, and then go ahead and somewhere again in this same page, somewhere here, start working on the component. So I'm going to pause now and you can start working. And if you're not in the mood, if you're not in the mood to do that, you can just sit back, relax and watch me do it. Well, let's go to the way that I'm seeing this component is that it broadly has two parts. The top part is if I will just drag and hide it, the bottom part like this. So this is the top part and then it has the bottom part, the triangle. And this little written for in the name of the article part. So the bottom part overall is a little more complex than top part. So let's start with the top part, which is simple. That common mistake or not really a mistake, but a common thing to do before frames and reframes was 0. You see a rectangle. All right, let's go ahead and press the press R and get the rectangle tool and start drawing a container known. And that's not what you're gonna do. Like a, I have previously explained in the beginning videos that we just need the content and then we can add a frame around it. And a frame can have properties like Bagram color and shadows and rounded corners and whatnot. Let's start with the content here. So let's say this carbon right here is right, your appraiser. So let's press T on the keyboard and get the textual click on a canvas and start writing. So write your grades here and let's look, have this tile to this. This is white and color in this tile of the text is body bolt. So let's do that. So I'm going to select the text, choose the textile to me body bold and change the color to right. Okay, one done. Number 2 is the author, so I'm just going to go ahead and press Option. Drag a copy of this text here, double-click on it and type AUT. Got a UTI is your author and it has a textile of body normals. So I'm going to select this and change this tile to body normal. Okay, there's also a hyphen in front of the author, so let's go ahead and do that. Oops, not that, just this. Okay, great. So now that we have this, we can put them together in a frame. So how do you put something in a frame? Again, you select them, press Shift a and D are inside a frame now, which is frame five. Figma has automatically given that main. Let's double-click on it and rename it to TOP, top and press Enter. Okay, So far, so good. Now let's look at the padding that is, that it has, it has a padding of 32 units on all this heights. So I'm going to select the frame, go right here in gift-giving with 32 and all of the sides. The next thing that I'm going to do is give it a background color, which is blue 0 to like mentioned here. So let's give it a background color of blue, 0, great. And what else is remaining? Okay, though, the spacing between your praise here text and all three text is eight. So how do we make sure that it is eight little select this frame, go to spacing between items and change it to eight from four. So now if I go ahead and click on any one of these press Option and hover than other. You can see that the spacing between them is eight. Okay, great, good. And now let's look at the rounded corners. So this all rounded corners are eight pixels or eight units. But, but notice that in the top part, only the top-left and the top-right corners have rounded radius, whereas the bottom right and the bottom left did not have that. So we're going to go ahead and make sure that that is also the case with what I am creating or when we are creating together, if you're following along. So if you want to give different, if you just go ahead and press eight here and the rounded corner radius, it'll apply it to all the four corners. But if you wanted to split it as if he wanted to give different corners, different radius, you can go ahead and click on this icon right here it says independent corners. And let's change the bottom right and bottom left, alright, to 0. So how do I know that this is bottom left and bottom right? These two boxes? Well, if you hover over them, you can see that and even in this icon right over here, it represents which corner we're dealing with. So again, so far, so good. We've got our top hot almost ready. They'll only thing that we need to make sure that it resizes properly. So I'm gonna go, I'm gonna go ahead and stretch it and see the width or the dimension of the texts that inside it. So again, there are still small, they didn't respond to the resizing. So let's select both of them and change their resizing constraints from HUD contents to fill container. And now that we go ahead and resize it, you see that the width of the text also changes. So right here, we are done with that top part. Now, let's move to the bottom part. So again, we have this triangle right over here, which I have just saved here for you. So I'm gonna go ahead and press Option and drag a copy out. We're going to need it in bed. So I'm going to leave it here. It's called flat by the way, and the layers panel. So again, I'm going to go ahead and leave it over here. And if you see in the finished component, we have the triangle, we have the flap. But there is also, there is also a little bit of spacing between these. You see this whitespace right over here. It's called, it's not called as has height of 16 here and it stretches here and goes for a 16 year. So we're gonna go ahead and do that. But first of all, let's make this small part, this real part which contains working for and the name of the article or the course. So again, I'm going to go ahead and press T and write, read 104, and let's see the textiles for it. Okay, this is body semi bold and it has a color of white. So I'm gonna go ahead and do that. So I'm going to select this bought a semi bold and a color of white. Okay, So I think I forgot an n over here, so just going to go ahead and write n. All right, then I'm gonna go ahead and drag a copy of it out and type in the name of the article is slash course. So let's go ahead and do that. Name of the article. Slash courts and the textile for it is body normally. Select it and give it the textile of the normal. All right, good. And the spacing between them is 0. So again, to make sure that is the case, I'm going to select both of them. Fresh shift a, putting them in an auto I frame. Go ahead and reading the frame to, let's say bottom details about that because this is not the entire bottom part, that's just the details part. Okay, So I'm going to select it again, the bottom details frame, let's look at it's got padding of 24 on left and right and 16 on top and bottom. How do we do that? We go ahead and click here. We select any of the four boxes here and start writing the padding values. So 16 on top and bottom in 2004 on right, left. How about that? Okay, and it has a background color of gray 0. So let's give it a background color of gray 0. And now we need to make sure that it has eight units, eight points, eight pixels, rounded corners for the bottom left and the bottom right and 0 for the top-left and top right. So I'm going to select this, go ahead and split. I mean, not really split but glyph here, I imagine it as flipping radii of different corners. So whenever you want to call it, so top right is 0 good, top-left is 0 good. And bottom-right should be eight, and bottom-left should be eight again. So I'm going to click it. And that looks very good the way that it's supposed to it. And then again, Let's go ahead and make sure that it is the text that's inside the frame has the resizing constraints, so filled containers so that it fills everything as everything is resized. So yeah, pretty good. They resize properly. Now we're done with the parts that we're going to need for the bottom part, alright, so the next thing that we want to make sure is that there is this spacing around this, around this little bottom parts. How do we do that? We do that by taking this frame and putting it inside another frame. Now if you've been watching the whole course so far, you know that we can always nest frames inside of frames. So that is what we're going to do here. We're going to select this frame and again press Shift a to nest this inside another auto-layout frame. So I'm going to press Shift a. And now this is another insight and other auto ion frame, and I'm going to call this frame grabber and w are a PPR. And again in the layer panel to make sure there is rapper and there's bottom details. Now to make sure that there is only 16 pixels of padding on the left and top where you're gonna go ahead and select the wrapper frame. We're gonna go ahead and click here. Gift top, a padding is 16, left at bending a 16 bottom and right to a panning 0. Now if you go ahead and look closely at this, you see there's a 16. Pixels are 16 points padding on the left. Top. And the next thing that we're going to do is we're gonna take this triangle or a flat. I'm going to place it next to the wrapper frame, select both of them and put them inside another auto-layout frame. How do we do that? Select both of them again, press Shift a, my now, you think the shortcut Shift day is just drilled deep into your heads, which is good, which is nice. So again, we have I think they put them properly. I think I did a little bit of messing up here, so I'm going to press Command Z a couple of times and then again go and we'll go ahead and put them in a frame again. So select the flaps like the wrapper redshift day. And now they're insight of different frame. And I'm going to go ahead and name this frame B O T, T O M, bottom. All right. And what this frame needs as zero-padding, grade and 0 spacing between items because we just want this and the rapper frame to be sticking together. And because of the wrapper frame is just empty space. There'll be a 16 pixels of padding or 16 pixels of space between them. So I'm going to select bottom and change. You see what happens when I do this, when I drag it around. So I'm going to change it to 0. So there you are. This is the bottom part. Now, the final thing to do is select top and bottom and put them together in another auto-layout frame. So select both of them, press Shift a, and now they're inside a frame. The one thing that we need to make sure is that spacing between them is 0. All right, like this, we're going to make sure that the top part has a horizontal resizing constraint of Phil container so that it fills everything. And now if I resize it, you see the bottom part is not resizing. So let's again go ahead and make sure that it has horizontal resizing constraints of Phil container. So let's do that. Okay, it's filled container. And this thing right over here, it should be a fixed width and height, and this should be a fill container. And then again, I'm going to click again a couple of times often what happens is that the nested frames for the nested elements have a fixed width, horizontal constraints. So even if you have set as something like folk container on the wrapper, it doesn't respond. So you have to double-click, go inside and make sure that whatever you are selected, whatever you have selected has resizing constraints to fill container. And now if I go and resize and you see everything just works nicely. And if I go ahead and put a bunch of text here like this, and everything just moves like it's supposed to. All right, this is great, this is great. We just finished creating the component together. And I think everything that we learned so far in the course actually just convoys together into this. We saw how we can create any number of frames that we want on the go. And that's great in the end, I hope you're, you've been following along to this or you've been just trying to create this on your own without watching me do it either way. And the end of this video, I hope you have a functioning nice auto-layout component. In the next one, we'll practice a little more. It'll be slightly, slightly more complex than what we did here. A little bit more complex and, you know, take a break. Now let's move on to challenge number 2, game card.
9. Challenge 2: Game Card: Sarah Jones 1, you apply to a bunch of things that you learned and ended up creating a proper user interface component. We do some very traditional per say, but that's what makes it special, it doesn't it? And now it's time for a challenge too. And here's what we will be building and challenge number two. So go ahead and make sure that you're inside mastering Figma, the magic of bottle ale starter file and inside the challenge to gain card page. Now in this page you're going to find three different frames. What are we going to be focusing on? First is the middle one, which is the final component. Now this component is yanked out of a real-world project. So keeping that in mind that it's, that it's a part of a different, a whole different project. This component will not use the styles and colors we've been using so far in the course. But that wouldn't be a problem in building and rebuilding this component because every single part of it, all the textiles, buttons, and every other part of it as less dead right over here. So let's quickly go over the finished component and see how it functions, okay? And it, nothing out of the ordinary is happening here. It's just that it's resizing the way that it's supposed to resize. And also, and also what? Notice this stroke right over here, right, this line right over here. And notice how it stretches and contracts based on the current size. I quite like that. Now there are a bunch of auto-layout frames that's making up this card and making it behave like it is. And, you know, before you start, I want you to see this challenge as assembling a car together with just parts. All right, so here are the parts and we're putting everything together into a finished component. So before we start, the one final thing I wanted to bring your attention to is this Copy Properties option that is available inside Figma. So notice this frame right over here. It has color, you know, some sort of Bagram color stroke on the sides and some, some also some drop shadow. Now replicating this is sort of grind work right now because we're dealing with auto-layout frames. So there is an option, you know, there's an option to directly copy the properties and paste it on a frame. So for example, this is a small little square with all the properties, background colors, stroke, shadow, and everything of this big frame. So when you have the final frame ready, all you can do is, let's say let's create a temporary frame here. So I'll press F and drag it out. And then I'll go ahead and click on this and go ahead and right-click, Copy and paste and then Copy Properties. Then I can go into this frame and go ahead and click on Paste Properties. And just like that, you don't have to worry about what rounded corners should I get or what challenge and I get. It just can be copied and paste it like this. All right, so with this, I'm pretty sure that I have covered everything that's needed. Now from here, you can work on it on your own if you wish to, or you can just watch me and follow along as I rebuild this and lest I forget, on the right side of the final component is also the anatomy of the component, the spacing between them, the color then you're supposed to use in all the values that are going to need. So then adds me the parks, the final one in the middle. Let's go ahead and recreate this. And you start with the first thing that I'm going to do is make the canvas color a little lighter. So what I mean by that is the colors that are going to be working, working with for this component of these like shades of blue do not have a great contrast with the color of the canvas. So here's what I mean. So I'm gonna go ahead and create your little rectangle just to show you what I mean. And the color is D2, E, F, F. So let me go ahead and give it the color of D2, E, F, F. And you say it's not very visible on this canvas. So what I'm going to do is with Figma, when nothing is selected on the right panel, you have the background color option and it will adjust the entire the color of then towered Canvas. So yeah, I'm going to go ahead and make sure you have HSL is selected and the color format, and I'm going to increase the brightness. So maybe some like this, not entirely white but closer to white. Okay, So the color is F7, F7, F7. And you can always reset it to E5, E5.5, which is the default color for Figma Canvas. Alright, so like I started, the first thing that we will do is we will make this particular thing, this row right here, because it's repeated twice. And the only difference is of the text and the icon. So, yeah, let's start with this and then we'll build the rest of the elements around it. So to build this, the first thing that we need to do is to drag out this icon rank firm over here. So I'm gonna go ahead and drag it out of the canvas. So also, since you're, you know, you're working with this and you might think that, oh what if I mess things up and lose the elements and their default state and the parts, Well, no problem. I would suggest do this, click on parts hold option and drag a copy of it out so that it stays there as a backup. Okay, So now again, back on track, the first thing we need to do is to drag this icon out. What else do we need? We need two text fields, and I'm not really text fields with two tanks. This hit rate and attempt to advertise his correctly answered the subtext in one here. So total three things. Alright, so here we go. Here's the first text here, the text that goes underneath it and the text that goes on side effects. So I'm just arranging these in space like this, okay? Okay, Great. And to start with, let's go ahead and click on the percentile and where you stand these two texts like them together and press Shift a to put them in an auto layout frame. And now there are inside a frame. And what we're going to do is name this frame, let's say content. How about that? Let's call it content or you know, it was just called an info. Okay. There you go. This is the info frame and the next thing that we're going to do is select all of these three things together. That top 20 percent, percentile frame and this icon and put them together in an auto layout frame. So go ahead and select them, Shift a and Figma automatically infer that since they are laid out horizontally, it applies a horizontal direction layout to them, to the frame that there are inside. So I'm going to go ahead and name this frame, let's say content. Okay, great. So the content has the number, which is this text right over here. Let me just change it to Stat. Again. I'll just call it stack. This is the info frame and this is the icon frame. Okay, cool. And the next thing that we're going to do is give this frame a background color again, the same background color that is listed right over here, which is D2 E, F, F. And to give this frame of background color, all you do is select it just like that. And look over here where it says Fill, click on this plus icon and give it an icon and give it the color v2, e, 0, f, f. Alright, there we go. It has a, it has a background color now. And the next thing that we need to find out is, okay, what is the padding on all sides? So the padding on all sides of this particular row is 24. So let's give it a padding of 24 on all four sides. To do that again, like on the frame, go right over here and write 24, okay? And also that it has a rounded corner radius of eight. So I'm gonna go ahead and write eight here and click Enter. I didn't, I didn't reference it from the Nazi maybe because I created it. I remember some of the values. Alright, so now inside this, I'm gonna go ahead and select the info frame again and make sure that the difference between them, the spacing between these two items is 0 so they are packed together better. Okay, Nice. And also the top 20 percent, this text is floating on the top. They are not centrally aligned. So to make sure that they are centrally aligned, click on this and choose this and now they are aligned in the middle. Okay? And now about resizing, let's check out how they function when this row is stretched horizontally. Really nothing happening because we have this setting of packing as packed. Let's go ahead and choose space between. And now if I resize, you say everything, resizes and stretches properly. But again, the problem is that we would want desk person, Thai list, info, frame and icon to stick together and only this text to flow depart when stretched. So, so to do that, to make sure that these stay fixed, I'm going to go ahead and select both of them. And again, press Shift a to put them inside an auto layout frame. And I'm going to call this frame, let's say stat plus icon about that. I'm going to call it that. And we'll go ahead and make sure that the difference between them, the spacing between items is something smaller, which is mentioned right over here. That is 16, 16, 16, this spacing, so going back here, so I think this frame, changing the spacing between items, do 16, it's raining, so you might hear some running to the bathroom. Always refreshing. Great. Okay. Now, Yeah, coming back to this, coming back to this and try and see how it works, okay, it stretches properly. You say, this stays where it is and the StatPlus icon stays on the left. And the stat, which is this number, stays on the right and stretch properly. We did it and we were going to need two of these. So you know what, I'm just gonna go ahead and drag it here so that it's easier to pan again and again. So we're going to need two of these. The first is head trade and the second is percentile. So I'm gonna go ahead and hold option and drag a copy out of it. If you were working on a real-world project, what do you would actually do is create a component out of it. But right now, we're just learning about auto-layout. So I'm going to let the past. So again, what we want is that this text right here is hit rate, so catch IT RAT. And the texts right here is percentile, which is great, and the subtext for hit rate is attempted versus correctly answered. So again, press T, click here and go ahead and write it. Attempted. Verse says correctly. Answered, Okay, Nice. We have these two nice little things here. And again, you know what? Since these are, these, these are horizontal rows and to represent some sort of stat for the user who's playing the game. So I'm gonna go ahead and rename this to stamp row, okay? And I'm gonna go ahead and do the same for this one right over here, stamp row. All right, and now we need to replace this icon right over here. And to do that, I'm just gonna go ahead and select this icon and press Command C. Come back here. Select this frame phrase Command V and you know, that's just arranges it right over here. So I'm going to drag it and put it there, select this icon, press, Delete and bam, it's gone. So there you go. We have the stat Ref already. And now what we can do is go ahead and select both of them and put both of them together. And then auto-layout frame, press Shift a and call this frame stamped rows. Okay? And the next thing that I want to check is that it stretches properly on horizontal resize. So to test that I'm going to stretch this frame but nothing's happening. And again, to fix that, select the contents inside and change their resizing constraint, horizontal resizing constraints to fill a container. And now if I resize this whole frame, everything inside it resizes properly. Great, we're done with one part of this. And last thing to do with this is to know what's the difference between the y-values or was a spacing between them, which is H. So I'm going to go ahead and select the statues frame and change this, the spacing between items to eight. All righty, cool. Next up, I'm gonna do something very simple is create this button, these two buttons but them together in a single frame. Just gonna go ahead and see the difference between them. I keep saying the difference, but it means the separation, the gap between them, which is eight. So what I'm gonna do is take these two buttons, shift click to select both of them and helps. Okay, I'm just going to drag them here like this, right? And we're going to put them together in a frame. So select them, press Shift a so that they're in a frame. Go ahead and name that frame CTAs or call to action buttons. And then I'm going to just position them over here. The next thing I'm gonna do is stretch this like that. But then again, you see the contents inside this frame is not responding to that stretch. So select both of them and go ahead and change their resizing constraint. I've done this over and over again to fill container. Now they showed resized properly. Okay. So that's done. So we're done with this and we're done with this. Now, let's go ahead and do this. This was a quiet and interesting part where this particular line or this stroke stretches dynamically. So for this part we need 12344 different things from the parts frame. So let's go ahead and grab them. So I'm gonna go ahead and need this eye icon. And then I'm gonna go ahead and need this text. So I'm going to put this there. And then I'm gonna go ahead and need this thing, which I have called merit count. So we're going to take these together and, you know, my bill, that little part. And one thing that I forgot to pull out of the frames, pull out of the parts panel if this little stroke where it over here. So I'm gonna go ahead and select it and pull it out and place it right over here. Okay, so there you go. So what now, once we have the parts, what now, what's the next step again to put them together. So I'm gonna go ahead and leave married count right over here. I'm gonna go ahead and leave this line right over here as it is. I'm gonna go ahead and put these two together in a, in an auto layout frame. So I go to them and go ahead and press Shift a, just like that. And I'm gonna go ahead and again, call it let's call it merit info. I'm just naming the layers. It doesn't really matter because naming depends on the context of the project that you're working on. So do not focus on the naming, what they mean. It's just so that layers are not named frame 93 or shape 72 because I'm just grinds my gears. So again, once they are in a frame, Let's see the separation between them, which is eight. So it's made go ahead and make sure that is the case. So again, separation between items, Let's change from five to eight and yeah, let's go ahead and change the alignment to center or metal because that's how it should be. All the way doesn't matter because we're not going to stretch this vertically. Okay, cool. And now when we have these three parts, we're gonna go ahead and drag and select them and press Shift eight so that they are inside one frame. And again, I'm gonna go ahead and rename the frame. Do something like marriage. Alright, cool. And the next thing I'm gonna do is change its alignment to center on both axes, x and y are even this works doesn't really matter because we're going to go ahead and change this from packed to space between. So let's go ahead and do that. Change that to space between and now when I drag and stretch this, you can see that it works as it's supposed to, but this line is not changing, its width, is staying as it is and just floating in the center. And to change that, to change that, you select the line or you select any element that you'd want to behave like this line in any project that you're working on and change its horizontal resizing constraint to fill container. And once that is filled container, the rest of these to have a fixed width and a fixed height or hot contents or that data and stretch with the frame, with the container frame. And if it's stretched and again, now if I resize it, you see the line stretches as it's supposed to, but there's this gap here and this gap here which we don't want. And this is because of the spacing between items value which is currently set at 31. What we can do is go ahead and write 0 and press Enter. And now look at this. This Pretty cool, right? All right, So, yeah. And again, we didn't actually want that to be 0, if I remember correctly, we want it to be 16. So let's go ahead and make that 69. Totally forgot that. So, and so to 0 type and 16. And there we go. And we're again going to need two of these. So I'm going to hold Option and drag it out. And I'm going to, before I put them in a single frame, I'm gonna go ahead and make the required changes which are in here and bet here. So BET. And the next thing that we're going to need is we need this or read, read element and now the blue elements. So select this frame Command V and put it right over there. And then I'm gonna go ahead and delete the blue one. So we have these two together. Again, going to go ahead and put them in a single frame by selecting both of them and pressing Shift a, and I'll rename the frame 2 merits. Okay, and let's go ahead and see what's the difference again? What's the separation between them? That's four. So let's go ahead and make sure that the spacing between items is four for this frame. And yeah, there it is. We have one other part of the entire card ready and let's just make sure that it responds to stretches. I'm not going to read the steps again. You know, already know what to do to make sure that the contents respond to resizing. So there you go, We've done it. And the next thing that's remaining here is to put this icon, this height on the left side of the merits of this frame. So again, I'm going to go ahead and drag this big icon from here, put it beside this frame, and then I'm gonna go ahead and select both of them and put them into a single auto-layout frame again by pressing Shift a. And I'm gonna go ahead and totally irrelevant what I named this for now, but let's just name it to level detail. Okay, let's go ahead and see how it resizes. I'm going to go ahead and move it here. But then again, you see that this moves outward out of the frame, whereas this stays inside. But that's not something that we want. We want this thing to fail the container and not be a fixed width. So this is a fixed width and this is a full container. So when the container frame, this whole, entire thing is resized, you see only this part resizes where the icon stays as it is, and that is what we want. So just like that, we're done with 123 different parts of the car. The final part is right here, which is the beginner, you know the title of the card and this little dots. So I'm gonna go ahead and select both of these from here from the parts frame and drag it out. And the next thing that you want to do is again, put them together in an auto layout frame. How do we put them together? Select both of them and press Shift a. The first thing that I'm going to do is make sure that it is aligned in the middle and the spacing is not packed but space between NY is that again, I'll iterate. If I, if it is packed and I stress the frame, it stays packed. But if it is space between a stretches and fills the frame as a kid, I'm gonna go ahead and rename this frame from 81 to low-level. Cold. And just like that, we have all the parts of the card ready. And before we go ahead and put all of this into a single unit, let me go ahead and go back to the final component and look at the behavior of the card when it's stretched vertically. Okay, so see you again. This entire part, the top part stays packed as it is ever, as the CDA is, these two buttons actually follow the bottom of the card and stretch and float at the end. So this should give a clear idea that the packing that we're going to use on this entire card is a space between rather than packed. But before we're gonna go ahead and consolidate all these parts together, the top parts together into one frame, and not just one frame because there is different spacing values between these. For example, the spacing between this top level and this part is 24, this indeces 40. So again, we're going to put this and this into one frame and put that frame and this these statues frame into a single frame. Okay, here's what I mean. So let's go ahead and start with this. So I'm going to slide the level of frame and the level of detail for impress shift day put them into a single frame and change the spacing between items to 24. That's one frame. We're gonna go ahead and call it let's say level detail for these helpful. How about that? Okay? And then I'm going to select this level of detail full and staff writers and put these both together into a frame. Again, select both of them, press Shift a and change the spacing between them to 40, as it is mentioned in and not in the anatomy of the component. And this part, I'm gonna go ahead and just call it add top. Okay? And now I can go ahead and select top and CTAs and put these two together in the final frame. So Shift a, and this is in the frame, and I'm going to rename this from frame a T1, T2, again card, right? This is the final last wrapper. And the last wrapper it has a padding of 32 on all sides. So I'm gonna select this and go to padding and make sure that it's 32. Okay, and let's go ahead and give it a background color and borders and all that stuff. So remember from the beginning of the video I talked about copy styles or copy properties. That is president in fragments. I go right-click, go to Copy Paste. So I'd copy properties. I'm going to go ahead and go back to this frame and go ahead and right-click again and select Paste Properties. And just like that, I have the entire style applied. Okay, Last thing to make sure, as I've iterated over and over again in the course as to see how it behaves when it's resized. So when stretched horizontally, again, you can see that these don't respond. So I'm gonna go ahead and make sure that the frames and all the nested frames have horizontal resizing constraints or fill container. Let's go ahead and make it fill the container. And then I'm gonna go ahead and go inside and make this filled container. So like this, make this filled container like this. Okay, That's me. Go ahead. You can keep double-clicking until you arrive at a frame that has fixed to it and go ahead and set that to fill container, select this and change that to fill container. And now if I resize it, you say it resizes perfectly horizontally. But then what about vertical resizing? If I resize this word really it remains packed. We don't want that. We give IV. We're going to go ahead and change this spacing or packing to space between. There you go. And let's go ahead and try resizing and vertically. And it behaves like it should. Okay, and I know that this video stressed over 20 minutes, but I wanted to go over all the steps and explain all the steps that's involved in creating a UI component out of auto-layout frames. And the point that I wanted to illustrate is that it's just not that you have to limit yourself to make everything in one frame. You can see that the number of frames use here is, I think it's way beyond 10 and that's okay. That's okay. That's the whole thing functions. So, you know, try using all of the iframes as much as you can. Because when this card will be put into an actual, let's say a page and the width of the page is not something like 587, but I say 340, so, you know, it resizes and if it's properly instead of resizing every single part of this and to fit into that particular space of the page. Or if the page is large, then you can stretch it and it fit largely end of the previous chart. You can go ahead and fit something like this. So that's great. Use more frames and use as many frames as you want. And I hope that you've learned a lot so far in the course. And at this point we are done with whom most of the examples and with most of challenges. The last one, which is bone a slider, which will be discussing in the next video, is not a requirement, but it's a wacky use of auto-layout. And it's quite nifty if you're asking me any, you know what, I'll tell you more about in the next video.
10. Bonus Challenge : Auto Layout Slider: Alright, you're still around, so I'm going to make it worth your while. You know what's magical about these tools like Fatma or any other tool, is that you cannot anticipate the ways in which people are going to use the features, in what permutations they will apply the features and what novel things that they will come up with. Sometimes these novel things, these permutations of ways of using features are termed as hacks. And often these hacks become part of the core feature, set up a tool down the line once the task is what Rajit, a designer advocate at Figma, did with auto-layout and sliders, inspired I decided to give it a shot and make this compound Feedback slider. Now this is a part of an actual real-world project that I'm working on. And look at what I can do is I can adjust the amount the slider is filled using logical layout and pull the prototype towards being more than just plain low-fidelity mock-up. We will use the exact same techniques that I use here with all of this to create this little thing, the slider in which the amount that the knob has been sled can be adjusted using the space between items option in the auto-layout strip on the right, just like that. Now, I've made this slider into a component. You can tell that by looking at the layers panel and this icon right over here it was denotes that it's a component. And all these on the right are instances of that component and instances you can override a couple of things as we have seen, but possession and dimension are not one of them. So if this wasn't for the hack, and I'm using hack in air quotes. If this wasn't using the HAC to position the knob, will have to detach the instance like that. You can go ahead and detach instance, which means that this particular thing will no longer be connected to the main component, will have to detach the instance and then move things around, which is messy and ugly. Don't do that. Instead, use auto-layout and see how even in the instance, each slider can have a unique position of the knob and thus and unique Phil, I can adjust this slider to full. I can take this slider and just move it to the very left like that. And also one great thing about this particular component is that as you follow along, if you understand its architecture without getting confused at any point, it will be an indicator that you have understood auto-layout really, really well. All right, okay, let's get down to business and let's start building. Let's get to the starter file. Mastering Figma, the magic of auto-layout stutter. And inside the bonus slide or page, you'll find the finished version of the slider here. You can peek into the Layers panel, play around with it, do whatever you want. But as for me, I'm more ready to start building a copy of this right over here. The first thing that we're going to need is a base which is simply a thin rectangle. This you see right here the gray rectangle, that's the base. So let's draw that, press R to get the rectangle tool drag out a rectangle, any shape, any size, whatever we're going to adjust it in awhile. The first thing that we're gonna do is make it thin. And I mean, three pixels high. So right, three beside hide. And there you go. And the next thing that I wanna do is give it rounded caps, right? Totally around it. So I'm going to select the rectangle, gold or hover over the rounded rectangle part, sorry, rounded corners part and just drag it all the way. And now you can see that it has a rounded caps on both ends. That's where this does it. That's the base. So I'm going to select it, go to the Layers panel and call it BAC base. And also I'm going to change the color of it to gray, T2 and NMOS. It's subtle and hardly visible, but I hope you can see it that it's right over there. The next thing that we're going to need is the filler rectangle. That's one right here, the one that fails. All right, So for that, I'm just gonna go ahead and hold option and drag a copy of the base out. And the thing that I'm going to do is change its background color to blue 0. And also for the filler, we don't want any roundness on the right-hand side. So I'm going to select this, go to the rounded corners part. It just individually and change top right. Top right. Yes. And bottom right to 0, this line down so that this n is like, Hey, I have this n has a precise cut and the left end has rounded corners. Okay, great. This is the filler. So I'm gonna go ahead and go into the Layers panel and type II LLC for the filler. And that's it. That's it for this. Then I saying we're going to need is this knob right over here, which is just a circle of 16 by 16 pixels. So press O and get the oval tool or the circle tool, hold shift and drag out a circle 16 by 16, and the background color of blue for okay, cool. Go into the Layers panel, name it KNIME knob. And the next thing we want to do is to put the filler and the knob into one auto frame. And how do you do that again, you select both of them, press Shift a And now this is not actually what we want. We want its alignment to be in the center like that. And right now, you might feel like I'm going at a good speed and not explaining everything in detail. It's because we've been discussing auto-layout for over and are I know that, you know, and so just let me cruise. Okay. Yes. So both of these are in an alkaline frame with 0 spacing between items. And the next thing that I wanted to make sure is that a knob has resizing constraints of fixed width and a fixed height. And the filler rectangle has a horizontal resizing constraint of Phil container so that when this frame is adjusted, you see that? Yeah, You say it kinda looks like the knob is sliding and the rectangle is filling in the space. So makes her are you going to Layers panel? And I always make sure to point this out. Reading from frame one should be, let's just call it parts because just hold the frame holds and important parts of the slider. Okay, now for the trach, now I want you to pay close attention from here on out. The next thing that we'll need is we'll need a frame. All right, so I'm going to go ahead and select the part so that I can see it's a dimension. I'm going to press F on my keyboard to get the frame tool so that when I drag a frame is created. Okay? And I'm going to go ahead and make sure that the frame is of the same height as the parts frame right here. This frame that we just created, we'll just let it have a white background color for now. We'll make it disappear later, but for now, you know, right over here, we'll make sure that they are the same height. Again there or not. I need to scale it up a bit. So now it's 16 pixel high, pixels high, and even the parts frame is 16 pixels high. I'm gonna go ahead and select this frame that we just created, and I'm going to call it, don't delete because this will be an important part of the entire contraption. All right. I'm just blanking say we have this point because I'm so excited that this has something to figure it out on my own. Well, 60 percent on my own, so I'm excited about it. Well, we're going to select the parts frame and the frame we just created. And we're gonna go ahead and put them in an auto layout frame. So select both of them, press Shift a, and make sure that the spacing between items is 0. Now for the resizing constraints, for the resizing constraints, I want the parts frame, the parse auto-layout frame to have filled container constraint. And I want this frame right over here to have fixed width. Okay? Now look at this when I select the frame, the frame that we just created and adjust the spacing between them, you see that the spacing is increased and decreased. But since the parts frame has, the resizing constraints are filled container, it fills the space that is left, so this is fixed, so this one be affected. This space right here is flexible, that's being adjusted and whatever, whatever. Okay. This space right here is being adjusted. So I selected the wrong frame and just so that there's space right here in between these two things as being adjusted and whatever space is left as being filled by the parts frame because it has the resizing constraints. So fill a container, okay, everything must have started falling together now and I hope you are getting to that aha moment. Now the next thing that I wanted to do is to select this frame route over here. We don't really need it. We're going to make it as thin as possible. So go to the width, width adjustment right over here, and I'm going to go ahead and give it a width of 0.05. Asked then as we can. And the next thing that we're gonna do to this to make it disappear completely is get rid of any fill that it has. So now this frame right over here has just this, this particular parts frame. And if I adjust the spacing between items of this RAM, you see this slider adjusts, which is cool. And I'm gonna go ahead and select this frame ending this frame at just this. Alright, so we'll know in a wild why I call this frame adjust this. Now right here, right over here, we just have the slider, we don't have the base. Okay? Next thing that we want to do is take the adjust this, this frame right over here and this base and put them together into a frame, not an optimally own frame, just a frame. So what I'm going to do is first of all, just drag the base and make sure that it is almost the same width as that justice. And then I'm gonna go ahead and move the slider a little bag by increasing the space between items. Remember that there is a framed right over here and we are adjusting this space right over here. So I'm gonna go ahead and adjust this and move it a little back. And then I'm gonna go ahead and select that and just this frame and shift and up arrow to actually adjust it, just its position. So I'm going to and keep pressing up till I almost align it with the, with the base rectangle. The next thing that we'll do is we'll select both of them and press the shortcut Option Command G or right-click and select frame selection. And now this is the entire frame. I'm going to go ahead and rename this from frame one to slider. So I'm gonna go ahead and make sure that everything is vertically centered. So if your selects anything inside a frame, inside a normal frame and click on this icon to vertically center it. It'll adjust it relative to that particular frame. So I'm gonna go ahead and make sure that everything is properly centered and the vertical. So I guess they are. And now that said we have the slider, we have the slider right here, right here, C. And inside the slider, if you've played around and looked around in the final file, you know what that inside the slider frame we had that just this which we use to adjust, which we use to adjust how much the slider has slit. And similarly in this frame right over here that would just created, we have an adjust this frame with which we can adjust the position of the knob. And that's great. That's great. Slider is done as a final check. We want to make sure that it resizes properly. So right now if I stretch the frame, nothing happens. And why is that? Well, I hope you can include it. It does that because the children of the frame, the things inside it, don't have the proper resizing constraints. For example, the base has just left. We wanted to scale as it is resize horizontally. And similarly for the adjust this frame, we want it to scale at, the whole entire frame is adjusted or resize horizontally. So right now you see how it works fine, very responsive to size changes. And also I can go ahead and play around with it. Just this just like that you're saying. And I know how it is. I know it is for me if I was watching on the other side, you know, it'll be like knowing the trick of the magician. And I know it's not that exciting, but More than anything, you'll learn how to exploit auto-layout capabilities to create something totally wacky and custom. And how great is that? The next thing that you can do is probably turn into a component and use it wherever you want in your project. Great.
11. Conclusion: Well, that's all for this class. We went from knowing nothing about auto layout in the first video to making it work at our own whims and meeting and do stuff that is really meant to do in the last video. So we went through a lot and relearn a lot of stuff in between. I hope you see that how powerful the simple feature can be, and I hope that if you aren't already using it, you will. Now, if you liked this class, you can go ahead and leave a review here on Skillshare. That would mean a lot available on Twitter at Nashville, you can find me, shoot me a DM or a class requests. I'm all open to that. And with this, I hope that I will see you soon in another class. Bye.
Nash Vail, I write and draw and design and code.
