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
orCmd
/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 | Aligns selected objects to the left edge of the group. | |
![]() |
Align Horizontal Centers | Aligns selected objects along their horizontal centers. |
Align Right | Aligns selected objects to the right edge of the group. | |
![]() |
Align Top | Aligns selected objects to the top edge of the group. |
![]() |
Align Vertical Centers | Aligns selected objects along their vertical centers. |
![]() |
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.