07. Interface - Figma 101

Efficiently getting around in Figma can drastically speed up your design process, and that's exactly what we're gonna take a look at. From layers to zooming, selecting to spacing, aligning, measuring and manipulating the UI will cover all the vital steps. Managing layers in Figma is pretty straightforward. You can drag and drop layers or you can Command + Left or right bracket to quickly move a selected layer up and down the layer list. If you need to find a specific layer on your canvas, you can double click its icon in the Layers panel and Figma will zoom you right to it.

For better organization, you can consider utilizing groups, with Command + G to cluster any related layers together. It's important to remember that layers within a group behave as a single entity, and this will simplify tasks like moving, resizing, or applying any shared effects. Zooming in and out of Figma is a powerful way that allows you to see the finer details of your designs, or get an overview of your entire canvas. You've got several quick keys at your disposal for this. By pressing Shift + 1, you'll zoom out to show everything on your canvas.

This is great when you need to quickly see the big picture of what you're working on. If you wanna zoom into a specific object, you can select it and press Shift + 2. Figma will instantly focus on your selected object. Finally, if you want to quickly zoom to 100%, you can press Shift + 0. Figma allows a deeper selection within nested frames or groups by using the Command key.

By Command-clicking, we can select a specific layer nested within multiple levels of groups or frames, allowing precise selection without unpacking the entire group. For nested frames or groups, you can hit the Return key and that will let you drill down to the child elements. This can be repeated to go further down the hierarchy. If there's a text element in the group, hitting return repeatedly will eventually bring you into the text editing mode. You can also use the Tab key to navigate through the layers in the Layers panel.

Pressing Tab selects the next layer down, while Shift + Tab selects the previous layer up. This allows for a quick layer selection when managing a complex layer hierarchy. When we want to give our design some breathing room, we can do that with Figma's spacing tools. When we're working with multiple objects, we can create balanced layouts by adjusting the spacing between them. Select the objects you want to modify and head over to the Properties panel, and there, you'll find the Spacing option.

If we enter a value, like magic, Figma will evenly distribute our objects with a consistent gap. This always works with two objects, but if you have more than two selected, you'll need to make the spacing more consistent first by either distributing the items horizontally or vertically, or use the Tidy Up feature that appears in the bottom right of the group of selected objects. You can also access this feature at the top right of the Properties panel, but wait, there's more. Figma also offers a neat feature called Swap Objects. Click on the pink center point of an object, move it to another object and watch them seamlessly swap positions.

It's a nifty trick that allows for effortless reorganization within your design canvas. I use this particular feature all the time. Aligning objects precisely in your design is essential for achieving a polished look. There are various alignment options to help you arrange your elements as necessary. To align objects with each other, select the objects you want to align and use the Alignment buttons in the toolbar.

You can align them horizontally or vertically, ensuring consistent spacing and distribution. When aligning objects within a frame, we can use the Alignment buttons to position the objects relative to the frame's boundaries. If we want to align a group of objects without actually grouping them together, we can hold Shift while using the Alignment buttons. This will move everything as if it were in a group, but not actually put it in a group. All right, let's move on to measuring inside of Figma.

Accurate measurements are crucial when designing interfaces to make sure that elements align perfectly. In Figma, we can measure distances directly on the canvas. To activate the measuring function, we're gonna select any object and hold the Option key, and while we're hovering near any other point on the canvas, Figma will display the precise measurement in pixels between those points. This feature is incredibly handy when you need to check the spacing between elements or dimensions of specific components. I use this measuring function all the time when designing interfaces because the spacing between objects directly influences their visual relationship with each other and in the overall design composition.

We've also got the power to customize Figma's UI to better suit our own personal needs. If we need a better view of our design, we can press Command +. to hide the Layers and the Property panel. This will allow us to focus solely on the canvas. We can press the same shortcut again to bring them all back, and then we can resume our regular workspace.

Additionally, we can choose between Dark Mode and Light Mode in Figma. You can select the mode that best suits your preferences and design mood. It's worth noting that the canvas color and existing documents will not change automatically when switching between Dark and Light Mode, but any new document will have a similar canvas background color according to the mode that you've selected. To change the background color of the Figma canvas, we just go over here to the Properties panel on the right side, click on the Color Swatch to select a new background color for your canvas. This allows you to personalize your design environment and create a perfect backdrop for your creative process.

With the ability to manipulate the UI and adapt Figma to your needs, you can create a workspace that feels just right for you.