Precision Placement: Tools and Guides

Part 1: The Alignment Panel and Smart Guides

The quickest way to align objects is by using the alignment tools in the Design panel and Figma's built-in "smart guides." Let's start by working with the elements you've already created.

First, select your avatar. Look at the Design panel on the right side of the screen. You'll see a set of icons for alignment.

These buttons let you align the selected object relative to its parent Frame. For example:

• Align Left/Right: Snaps the object to the left or right edge of the frame.
• Align Horizontal Centers: Centers the object horizontally within the frame.
• Align Top/Bottom: Snaps the object to the top or bottom edge of the frame.
• Align Vertical Centers: Centers the object vertically within the frame.

Now, let's watch a short video that demonstrates these tools and a few essential keyboard shortcuts.

Your turn! Try this in your Figma file:

1. Select your avatar and click "Align Horizontal Centers" to center it perfectly in the frame.
2. Select your button and do the same. Notice how it snaps to the middle.
3. Select the avatar again. Hold down Option (or Alt) and hover your mouse over the top edge of the frame. Figma will show you the exact pixel distance. Adjust the avatar's position by dragging it or using the arrow keys until it's about 60px from the top.
4. Do the same for your button, but position it 40px from the bottom of the frame.

Part 2: Distributing and Tidying Multiple Objects

What if you have a list of items, like notifications or menu options, and you want the spacing between them to be perfectly even? That's where the "Distribute spacing" and "Tidy Up" features come in.

While we only have two main elements right now, this feature is too useful to skip. Let's create a quick example.

1. Select your button.
2. Copy and paste it twice (Cmd+C/Cmd+V or Ctrl+C/Ctrl+V).
3. Drag the copies so you have three buttons stacked vertically, with messy, uneven spacing between them.

Now, let's see how to fix that spacing instantly.

Now, try it with your three buttons:

1. Select all three buttons.
2. In the alignment panel, click the "More options" icon (three dots) and select "Distribute vertical spacing". The buttons are now evenly spaced.
3. Alternatively, click the "Tidy Up" icon (usually available directly). This also evens out the spacing and lets you drag the pink handles to adjust it live.

Once you're done experimenting, you can delete the two extra buttons.

Part 3: Using Rulers and Guides for Custom Layouts

Sometimes, you don't want to just center things. You want to define your own structure, like margins on the side of a page. For this, we use Guides. Guides are non-printing lines you can place on your canvas to help you align objects.

To use guides, you first need to make the Rulers visible.

This official Figma tutorial explains it best.

Now, let's apply this to our design to create some horizontal margins. A common practice in mobile design is to have a 16px margin on the left and right to prevent content from feeling cramped against the edges.

1. Press Shift + R to show the rulers.
2. Click on the vertical ruler on the left and drag a guide onto your frame. As you drag, a number will indicate its position. Place it at 16px.
3. Drag another guide from the left ruler and place it 16px from the right edge of the frame. (If your frame is 375px wide, this guide would go at 375 - 16 = 359px).
4. Now, instead of centering your button, try resizing it so its left and right edges snap to these new guides.

You've just created a full-width button with perfect margins!

An Introduction to Layout Grids

Guides are great for simple cases, but for a full page layout, designers often use a Layout Grid. A layout grid is a set of columns that provides a structural foundation for your entire screen. Snapping elements to this grid ensures consistency and rhythm throughout your design.

Try it yourself:

• Select your mobile frame (click its name in the Layers panel or above the frame on the canvas).
• In the Design panel, click the + icon next to Layout Grid.
• By default, it creates a grid. Click the grid icon to change the settings from "Grid" to "Columns".
• Set the Count to 4, the Margin to 16, and the Gutter to 16.

You now have a professional column grid guiding your layout. You can toggle it on and off with Ctrl + G (Mac) or Ctrl + Shift + 4 (Windows).

Conclusion

Fantastic work today! You've moved beyond just placing elements on a screen to positioning them with intent and precision. This is a critical step toward creating clean, professional, and user-friendly interfaces.

Here are the key takeaways:

• Use the Alignment Panel to quickly align objects to their frame or to each other.
• Hold Option/Alt to measure distances and ensure consistent spacing. A common practice is to use multiples of 4 or 8 for spacing (e.g., 8px, 16px, 24px).
• Tidy Up and Distribute Spacing are powerful tools for creating uniform lists and grids.
• Rulers and Guides (Shift+R) help you create custom alignment points like margins.
• Layout Grids provide a structural foundation for your entire screen, ensuring consistency.

Your UI screen is starting to look very organized. In the next lesson, we will cover another essential skill: how to navigate the canvas efficiently using zoom, pan, and selection shortcuts. As your designs get more complex, moving around your file quickly will be a huge time-saver.