You have made great progress learning about UX and UI. You also had a brief introduction to Figma. Now it's time to expand your knowledge, which will help you improve the little lemon website. In this video, you will explore how to use the layers panel, how to drag and organize layers, and how to construct shapes. You will also identify how to duplicate, scale, group, and then align elements. First, let's cover a few concepts in Figma. They are frames, layers, and groups. Let's start with frame. In other design tools, this may be referred to as an Artboard. Think of it as a container where your design lives. Now let's define what a layer is. A layer is an object within a frame. As you add an object to a frame, a new layer will be created. The next concept to cover is a group. In a group, multiple objects can be combined, and once combined, a single top layer is created which contains all the objects. Frames and groups appear very similar. They both help organize your file by nesting layers or grouping layers together. However, frame supply a lot more functionality like independent sizing. You will cover this in more detail throughout the course. Now, let's explore these concepts in practice with Figma. A frame is a container for elements. Think of it as a screen on an App. For example, Screen 1 is the first screen you see, and Screen 2 is the second. If you add another frame, that would be the third, and so on. To create a frame, you click the frames icon up on the top toolbar. You then click and drag out a frame. Another way of making a frame is to select the frame icon. Go over to the right-hand panel where Figma has created lots of frame presets. In this instance, I'll use a desktop frame. To navigate around your frame or Canvas, go up to Zoom menu in the upper right of the screen. It will tell you the current Zoom level and has some useful reminders for shortcuts related to zooming, such as Command or Control Plus to zoom in or Command or Control minus to zoom out. To pan across your screen, you select the hand icon on the toolbar, or you can use Shift on your keyboard. Now, let's draw some shapes. I select the frame and go to the basic shapes Tools menu in the toolbar. I click the arrow next to the circle icon to open the Shape Tools and select a rectangle. I click and drag out a rectangle. If I want a square, I select the rectangle icon and hold shift on my keyboard to create a square. It's the same process to create a circle. I selected the ellipse and hold the Shift key. To duplicate the rectangle, I select it and I press Control or Command D on the keyboard. The rectangle has been duplicated and can be placed wherever I wish. Let's look at the properties of these shapes. I select the square. Over on the right-hand side, I can see its x and y coordinates and the width, height, rotation, and corner radius. Let's just change the radius to 100. As you may have noticed, every shape by default has a gray fill and no outline. To change this, I go to the field section and click the little rectangle that opens the color palette. Using the circular icon, I click to select a color I like. If I want a different hue, I drag this slider across. I can also change the transparency or type in a color reference number. Here, I can also apply an outline which is called the stroke, and choose where I want it. Inside, outside, or center. In this case, I choose the outside option. On the right-hand side, there are advanced stroke settings where it can change its line type. I can also add an effect. I click the plus icon and add a drop shadow. In the layers panel on the left-hand side of the screen, I can see my shapes as layers in the order they have been drawn. I move the circle shape on top of the square but decide I want the square on top of the circle. All I need to do is drag and drop the squares layer on top of the circle layer. Now, it's important here that you keep the layer's name correctly. I rename Rectangle 2, to square and Eclipse 1, to circle. There are also other features within the layers panel. I can switch layers on and off as well as lock layers, which just means it cannot be moved. We've got the rounded square and the circle that are two independent elements that work separately. But if I want to make them move and act as one object, I select them and I right-click and we choose Group Selection, or Control G, or Command G on your keyboard. This allows these elements to move as one. If you want to alter one of the shapes, just double-click inside the shape. Now that you have explored the fundamentals of frames, layers, and basic shapes, why don't you just play around and create your own elements? In this video, you learned the basics of Figma frames, layers, and shapes. I encourage you to practice using these basic tools yourself. Note the differences in the layers panel between groups and frames.
