askvity

How to Add Alignment in Figma

Published in Figma Alignment 3 mins read

To add alignment in Figma, you primarily use the alignment tools that appear in the design panel when you have selected two or more objects. Aligning objects helps you distribute space and arrange elements neatly within your design.

Accessing Alignment Tools

Alignment options become available in the right-hand Design panel as soon as you select multiple layers or objects on your canvas.

Selecting Multiple Objects

There are several ways to select multiple objects in Figma:

  • Click and Drag: Draw a selection box around the objects you want to align.
  • Shift-Click: Click on the first object, then hold Shift and click on additional objects.
  • Using the Layers Panel: Hold Shift or Cmd/Ctrl while clicking layer names in the Layers panel to select multiple items.
  • Multi-Edit (as shown in the reference): A powerful method, especially for selecting similar items across different areas. As demonstrated in the reference video, you can select one object (like a frame) and then use the "Select matching layers" feature. This allows you to quickly select all objects with the same properties (like name, fill, stroke, etc.) across your design, enabling you to apply alignment or other edits simultaneously using multi-edit. Once multiple matching layers are selected, the alignment options appear.

Understanding Alignment Options

Once you have multiple objects selected, the Alignment section appears in the Design panel. These options allow you to align objects relative to each other or relative to a containing group/frame.

Here are the common alignment options:

Icon Name Description
Align Left icon Align Left Aligns selected objects to the left edge of the group.
Align Horizontal Centers icon Align Horizontal Centers Aligns selected objects along their horizontal centers.
Align Right icon Align Right Aligns selected objects to the right edge of the group.
Align Top icon Align Top Aligns selected objects to the top edge of the group.
Align Vertical Centers icon Align Vertical Centers Aligns selected objects along their vertical centers.
Align Bottom icon Align Bottom Aligns selected objects to the bottom edge of the group.

After aligning, you might also need to use the Distribute options (also in the Design panel when multiple objects are selected) to create even spacing between elements.

In summary, to align objects in Figma, select the objects you want to align using any multi-selection method (including the "select matching layers" feature highlighted in the reference for multi-edit workflows), and then click the desired alignment icon in the Design panel.

Related Articles