The Alignment Tool in Figma will come in handy once your design becomes more cohesive and complex. In this tutorial, we will explain to you how to use the properties of the Alignment Tool and how this tool it’s going to become your best friend.
An “Aligned” Friendship
Each element you add to the canvas creates a layer, elements referring to a text object, shape, image, and so on. A layer can contain one or more of the previously mentioned elements, making it messy to place each element manually. The Alignment Tool will allow you to automatize this process by arranging the layers in relation to each other.
How To Use The Alignment Tool
You will find the Alignment Tool at the top of the Desing panel. It visually represents how Figma will align the layers once you select them. In this case, you have two options:
- If you choose one layer or object, Figma will align it in relation to its parent
- If you select multiple layers, Figma will align them in relation to each other.
The icons visually represent how the elements will behave if you select any option. In their respective order, we have:
- Align Left
- Align horizontal centers
- Align right
- Align Top
- Align vertical center
Listing things can be tedious, so the best is to open a Design file and see how they work. Just like making friends, we align with people that are supposed to share the same values. So when you align layers or objects in Figma, it kind of happens the same; they respond to a value you want them to align.
Using shortcuts to make friends is impossible, but it isn’t to align layers in Figma! Take note.
- Align Left Alt/Command + A
- Align horizontal centers Alt/Command + H
- Align right Alt/Command + D
- Align Top Alt/Command + W
- Align vertical center Alt/Command + V
- Align Bottom Alt/Command + S
Cool, keep exploring the many ways you can play with layers in Figma, and remember always to have fun. Stay tuned!