Arrange layers with Smart selection

Who can use this feature

Supported any team or plan

Anyone with can edit access can rearrange layers using smart selection

Smart selection lets you quickly adjust the arrangement, or spacing between a selection of two or more layers. Use Smart selection to:

• Uniformly adjust the vertical and horizontal spacing between layers
• Create uniform or non-uniform grids from a selection of layers
• Rearrange or reorder layers in a row, column, or grid layout
• Duplicate or delete layers from a selection and have other layers reflow

Smart selection reduces the need for tedious repetitious tasks, saving you time and allowing you to build and arrange layouts faster.

Make a Smart selection

To make a Smart selection, all layers must be an equal distance apart and overlap on either the x or y axis (1D), or both (2D). If layers aren't an equal distance apart, you can use the Tidy up tool to rearrange layers and create a Smart selection.

Figma supports smart selections in both one and two dimensions. One dimensional (1D) Smart selections have layers that overlap on one axis, like layers arranged in a column or row. Two dimensional (2D) Smart selection have layers that overlap on both axes, like layers arranged in a grid or table.

1. Select any layers you'd like to include in the Smart selection. Layers don't need to be the same size or shape. You can select individual layers, groups, frames, or components. Select layers and objects →
2. Figma adds smart handles to your selection on the canvas. Each distinct object has a pink ring in the center of it.
   
3. When you hover over your Smart selection, additional pink handles will appear between each layer. These handles allow you to adjust the vertical or horizontal spacing between layers.

Adjust layers in a smart selection

Once you've made your selection, you can make changes to individual layers within your selection. This allows you to move, add or delete layers, without leaving the selection.

• Adjust space between
• Move or reorder
• Duplicate layers
• Resize layers
• Delete layers

You can choose which layers in the selection you'd like to adjust by marking them. The smart handle for marked layers is a solid pink circle.

Adjust space between

Adjust the vertical or horizontal space between layers in your selection. You can adjust spacing on the canvas using the smart handles, or use the space between field in the right sidebar.

• A

  Canvas

  1. Hover over one of the smart handles between layers. An arrow will appear where the cursor was.
  2. Click and drag the handle to adjust the space between layers. A tooltip above your cursor shows the current space between layers, in pixels.
     
     • Up to decrease the vertical space
     • Down to increase the vertical space
     • Left to decrease the horizontal space
     • Right to increase the horizontal space
  3. Release the cursor to apply your changes.

  

  Tip! Hold down Shift while scrolling to adjust the increments by the amount specified in your Big nudge settings. Set small or big nudges values →

• B

  Right sidebar

  You can also update the space between property in the right sidebar. Depending on your selection, you'll see two fields in the sidebar.

  Enter a number directly in the field, or hover the cursor over the icon to scrub the field.

  • horizontal space between
  • vertical space between

  

Reorder or rearrange layers

You can also change the order or position that layers appear in a Smart selection. You can rearrange a single layer in a 2D selection, or multiple layers in a 1D selection.

1. Click on the pink ring on the center of the layer to mark it. The smart handle for marked layers is a solid pink circle.
2. For 1D Selections only: Hold down the Shift key and click on another layer to also mark it.
3. Click and drag the layers(s) to another location within the selection. A blue indicator shows you where you can move the layer to.
4. Release to confirm the new position of the layers.

Duplicate layers

You can create a duplicate of any layer within a Smart selection. You can duplicate more than one layer at a time in either a 1D or 2D selection.

1. Make your Smart selection.
2. Click the pink handle on the center of a layer to mark it. Hold down Shift and click to select more layers.
3. Duplicate the layer using any of the following methods:
   • Use the Keyboard shortcut:

     Mac: ⌘ D

     Windows: Ctrl D

   • Open the main menu and search for Duplicate Selection in Place.
4. Figma will copy the layer and paste it next to the original layer. The other layers in the smart selection will move to accommodate it.

Resize layers

Smart selection lets you resize layers within the selection, while maintaining an equal distance between layers. For example: you can adjust the height of the layer to indicate a longer message in the newsfeed. Figma will reposition other layers to keep the spacing consistent between layers.

Delete layers

You can also delete individual layers within a Smart selection. You can delete more than one layer at a time within either a 1D or 2D Smart selection.

1. Make your smart selection.
2. Click the pink handle in the center of a layer to mark it. Hold down Shift and click on another layer to mark it.
3. Delete marked layers by pressing the Delete or Backspace key on your keyboard.
4. The other layers in the selection will rearrange to fill the gap created.