Alignment and Distribution

Designing with Precision

Controls for aligning and distributing an object or layer or a set of objects or layers appear at the top right side of the Figma Properties Panel as well as under the Arrange menu option.

Properties Panel

 Arrange Menu Item

In this article, we will cover:

  1. Alignment and Distribution Controls

    1. Alignment

    2. Distribution

  2. Available Plugins

  3. Help Articles

  4. Video Tutorial

  5. Frequently Asked Questions


Alignment and Distribution Controls

There are eight (8) available options for controlling the alignment and distribution (spacing) of objects and layers in Figma. Six (6) options control Alignment and two (2) control Distribution.

Alignment Controls

To align objects or layers with one another:
  1. Select the desired objects or layers on the page
    Note: if only one (1) object or layer is selected, the object or layer will be aligned in reference to the frame in which it appears)

    2. Select Alignment Objects

  2. Click the desired alignment option from the control panel
    Note: the outermost objects or layers will be the items aligned

    3. Alignment Control Panel

    1. Align Left - aligns the selected objects or layers on their left sides

      2. Align Left

    2. Align Horizontal Centers - aligns the selected objects or layers to their vertical centers

      3. Align Horizontal Center

    3. Align Right - aligns the selected objects or layers on their right sides

      4. Align Right

    4. Align Top - aligns the selected objects or layers on their top sides

      5. Align Top

    5. Align Vertical Centers - aligns the selected objects or layers to their vertical centers

      6. Align Vertical Center

    6. Align Bottom - aligns the selected objects or layers on their bottom sides

      7. Align Bottom


Distribution Controls

To distribute objects or layers in relationship with one another:
  1. Select the desired objects or layers on the page
    2. Properties Panel

    		 Arrange Menu Item
  2. Click the desired distribution option from the control panel

    3. Distribution Control Panel

    1. Distribute Vertical Spacing - distributes the objects or layers so that the vertical spacing between them is even

      2. Distribution Vertical

    2. Distribute Horizontal Spacing - distributes objects or layers so that the horizontal spacing between them is even

      3. Distribution Vertical

    3. Tidy Up - if you select the Tidy Up option from the distribution menu, it will set selected objects or layers equidistant from one another - either vertically or horizontally - depending upon your selection

      4. Distribution Vertical


Plugins

As of June 2019, there is a Figma plugin called Super Tidy that replicates Figma's built-in Tidy Up function as well as allows users to rename and reorder frames. See Super Tidy in the Figma plugins section for more information.

Help Articles

  1. Properties Panel
  2. Working with Images
  3. Selecting Layers and Objects
  4. Using Tidy Up
  5. Using Plugins

Video Tutorial


Frequently Asked Questions

If you have questions about Alignment and Distribution that were not answered here, please reach out to us through the Spectrum User Forum.


TOP

Email Pamela L. Kelly

Copyright © 2019-2020 Pamela L. Kelly All Rights Reserved. This site built by Pamela L. Kelly.