In the last video, we learned how to add controls to the canvas. You can drag and drop or double click on a control from the UI library to place it on the canvas. In this video, we'll be talking about moving sizing and arranging controls on the canvas. As you'd expect, you can cut copy and paste controls using the standard keyboard shortcuts. You can also duplicate controls by pressing Ctrl or Command D. By default, the control will be slightly offset from the original control. However, if you move it and duplicate it again, it will be offset by the same amount as the first control you duplicated.

This can be quite useful for spacing things out evenly. Finally, To delete a control, press the delete key or click the trash icon in the toolbar. Now let's talk about selecting controls. As we've seen, you can select control by clicking on it once. To select multiple controls, you can draw a rectangle around the controls you want to select with your mouse. You can also press Shift while clicking on other controls to add them to the selection.

You can select a control by pressing Command or Control when clicking on it. If you double click on a control, you can edit its contents. We'll cover this in more detail in the next lesson. Now let's talk about a few more advanced scenarios for selecting controls. Let's say you have a large control that's on top of another control and you want to select the control in the back. If you right click on the front control, you'll see an option to select any controls that are immediately behind it.

Now Let's look at a scenario where you have smaller controls that are in front of a larger control. You want to drag a rectangle around the controls without selecting the larger control. You could start outside the control and do it that way. But an easier way is to hold down alt or option to ignore the control that's immediately behind the cursor. Another option if you know that you have a control that you aren't going to want to select, such as a browser window is to lock the control. This means that you can select or edit it.

To do this, select the control and click the lock icon in the toolbar. When a control is locked, you can right click on it and select unlock to unlock it. So that's what you need to know about selecting controls. Now let's talk about moving them around. To move a Ctrl, select it and drag it using the mouse. You can also use the keyboard arrow keys to move it one pixel at a time.

For larger increments hold the Shift key while using the arrow to move it 10 pixels at a time. Notice that when I place it near another control lines appear on the canvas. These are alignment guides and you can see the controls snap to these lines to make it easy to align controls along the edges or centers. guides also appear at preset distances to provide consistent spacing between controls. You're using a container control Alliance guides will also appear at a set distance from the edges inside the control. Alignment guides don't show when you're moving a control quickly, only when you slow down enough to place it accurately.

If you're using a grid system or one exact placement of your controls, you can also use the position property in the property inspector to place controls in x y coordinates. Finally, another way to align controls is to use the alignment tools. Whenever you have multiple controls selected, you'll see an extra row of icons in the property inspector As well as additional options in the right click menu. This is a faster way of aligning and spacing controls when you have several controls selected. Now let's move on to resizing control. You can resize controls by selecting them grabbing one of the handles on the sides or corners.

Some controls simply get larger or smaller when resized, but others resize more intelligently and only scale their content areas. Other controls can only be resized in one direction or not at all, depending on what makes sense for the particular control. You can also resize using the keyboard by holding Ctrl or Command and alter option and using the arrow keys. Adding shift will resize in 10 pixel increments. Many controls also have an auto size function which automatically sizes it to fit its contents or its original size. Now, let's quickly talk about layering.

We already showed how you can select a control that's behind another one. You can also use the layering controls to bring them forwards or backwards. These options are in the right click menu and the property inspector and there are keyboard shortcuts as well. For the last part of this lesson, let's talk about grouping. There are several reasons why you might want to group controls, but the most common is probably to better organize your controls when working with large mockups. Grouping makes sense when you have a set of controls that belong together.

It makes it easier to To move and position controls that you've already laid out how you want them. Grouping also forms the basis of symbols, a feature we'll talk about later. Let's say you've created a dialog box and you want to center it on the screen. You could align each control individually with the background control, but it can get a little messy and take time. So let's select the controls in the dialog box and group them using the group icon in the toolbar. You can also use Ctrl or Command G on the keyboard.

Notice that now they move together and their color changes to light purple, that tells you that grouped now you can center the dialog box as a whole easily over the browser window. If you want to edit the controls inside a group, double click Click on it or press Enter when it's selected. You'll see now that the controls not in the group are grayed out, and that a little bar up here is showing you that you're inside a group. Now you can make edits to controls inside the group. When you're done, you can click the home icon in the floating breadcrumb bar or press escape. Finally, let's look at how we can create groups within groups.

That's great group these two buttons so that we can align them inside the dialog box. Now if I enter this group, you can see that it's a subgroup of my original group. You can also name your groups to make it easier when you have several nested groups. That's all for this lesson, and the next one we'll dive into editing controls.