Alignment and Distribution in Figma

Key Concepts

1. Align Left
2. Align Right
3. Align Top
4. Align Bottom
5. Align Center (Vertical)
6. Align Center (Horizontal)
7. Distribute Horizontally
8. Distribute Vertically

1. Align Left

The Align Left feature in Figma aligns all selected elements along their left edges. This ensures that the leftmost point of each element is aligned to the leftmost point of the reference element. This is useful for creating clean, organized layouts.

Think of Align Left as lining up books on a shelf. Each book's spine is aligned to the left edge of the shelf, creating a neat and orderly appearance.

2. Align Right

The Align Right feature aligns all selected elements along their right edges. This ensures that the rightmost point of each element is aligned to the rightmost point of the reference element. This is useful for aligning elements to the right side of a layout.

Imagine Align Right as aligning the spines of books to the right edge of a shelf. This creates a different visual effect, often used for aligning text or elements to the right side of a page.

3. Align Top

The Align Top feature aligns all selected elements along their top edges. This ensures that the topmost point of each element is aligned to the topmost point of the reference element. This is useful for aligning elements at the top of a layout.

Think of Align Top as aligning the tops of picture frames on a wall. Each frame's top edge is aligned to the top edge of the reference frame, creating a uniform look.

4. Align Bottom

The Align Bottom feature aligns all selected elements along their bottom edges. This ensures that the bottommost point of each element is aligned to the bottommost point of the reference element. This is useful for aligning elements at the bottom of a layout.

Imagine Align Bottom as aligning the bottoms of picture frames on a wall. Each frame's bottom edge is aligned to the bottom edge of the reference frame, creating a uniform look.

5. Align Center (Vertical)

The Align Center (Vertical) feature centers all selected elements vertically relative to the reference element. This ensures that the vertical midpoint of each element is aligned to the vertical midpoint of the reference element. This is useful for creating balanced layouts.

Think of Align Center (Vertical) as hanging a picture in the middle of a wall. The picture is centered vertically, creating a balanced and symmetrical look.

6. Align Center (Horizontal)

The Align Center (Horizontal) feature centers all selected elements horizontally relative to the reference element. This ensures that the horizontal midpoint of each element is aligned to the horizontal midpoint of the reference element. This is useful for creating balanced layouts.

Imagine Align Center (Horizontal) as placing a table in the middle of a room. The table is centered horizontally, creating a balanced and symmetrical arrangement.

7. Distribute Horizontally

The Distribute Horizontally feature evenly spaces all selected elements horizontally. This ensures that the space between each element is equal, creating a uniform distribution. This is useful for creating organized and visually appealing layouts.

Think of Distribute Horizontally as placing books on a shelf with equal spacing between them. Each book is spaced evenly, creating a neat and orderly appearance.

8. Distribute Vertically

The Distribute Vertically feature evenly spaces all selected elements vertically. This ensures that the space between each element is equal, creating a uniform distribution. This is useful for creating organized and visually appealing layouts.

Imagine Distribute Vertically as placing picture frames on a wall with equal spacing between them. Each frame is spaced evenly, creating a neat and orderly arrangement.