Original subtitles

‫Hey, everyone, and welcome back.

‫We are going to get into how to use auto layout.

‫So all the layout is a feature that is essentially part of regular frame.

‫So let's jump right in.

‫I'm going to press F to get my frames list and then I'm going to just select the first one just for

‫the sake of our demonstration.

‫So I'm going to rename this and to rename it quickly, you can Press Command R or Control R, and I

‫am just going to call this my auto layout frame and I'm just going to shrink it just a bit and I'm going

‫to create another frame below it.

‫And I'm just going to call this my regular frame so everyone can see the difference.

‫Now, all of the frames are really great.

‫If you want to have like responsiveness a part of it, if you want to essentially make sure that like

‫you can build some nice lists.

‫It's really great for even, you know, creating like buttons that are responsive.

‫So I'm just going to get into a quick demonstration.

‫So I'm going to create a rectangle.

‫Her square doesn't matter.

‫And I'm going to place it inside both of these frames.

‫Now, when we look at the regular frame, you know, everything is as we learned before about frames.

‫But now let's turn this into an auto layout frame over here.

‫So I'm going to click that frame.

‫And if you go over to the properties panels over on the right, on the right side bar and the design

‫panel, you'll notice auto layout if you click that little plus button.

‫Now it is in an auto layout frame.

‫I'll get into what all this means in a quick second, but this allows you to adjust padding and between

‫items and the padding between that is horizontal and vertical.

‫So if I were to say add another item like let me add another rectangle, you can just copy and paste

‫it.

‫You notice how the whole frame grows and if I add more, the frame keeps on growing and you can even

‫adjust how that framework's the direction if you wanted to go vertical or horizontal.

‫And there are many more details there.

‫You can even nest orderly frames within frames.

‫So I'm just going to move this one down.

‫And like here, if you press command C and Command V or control C, control V, it doesn't adjust the

‫frame.

‫So all the layout frames are really great for responsiveness.

‫Let's jump right in.

‫So we have another frame that I want to create.

‫So I'm going to just create two frames of two, so one and two and then another frame.

‫So I'm going to select these ones.

‫I'm going to hold on shift and I'm going to right click.

‫And if we go down, we can see that we can turn it into an auto layout so we can add auto layout.

‫That is another frame.

‫So and you can see it here.

‫It is applied as well.

‫And I'm going to do the same over here.

‫Right click.

‫And it's shift a as the shortcut as you notice over here.

‫This allows me to nest frames within frames and this is really powerful for layouts.

‫We'll be using this in certain demonstrations as well.

‫But if I now say change the direction, we're not going to have four vertically.

‫We're going to have those two frames stuck on to one another and you can see how they're nested below.

‫So we have our two rectangles up top and two rectangles at the bottom, and you can make some pretty

‫cool grids and you can even nest another frame within this frame if you'd wanted to.

‫And the easiest way to add new items you can copy and paste.

‫You can also duplicate which is command dx or control dx, which will duplicate what your last action.

‫So I'm just going to go back with the command Z and you can also reorder the object.

‫So I'm just going to change the color here really quickly.

‫If I use my arrow keys, I can order the object within a frame and even the frame within the other frame

‫so you can reorder things really quickly just using your arrow keys or you can click and drag.

‫Oops.

‫Just be careful not to drag it outside the frame.

‫And if I really wanted to, just.

‫If I wanted to hide them or delete them, I can do that as well.

‫So I can hide them like that.

‫Or I can just delete it and it's gone.

‫And that is how you use auto frames in the most basic sense.