Using Smart Selection

Smart Selection allows you to quickly adjust the spacing and arrangement of objects.

This is perfect for making quick adjustments, or iterations to complex layouts. You can use Smart Selections for inbox interfaces, news feeds or timelines, photo galleries, or other grid based layouts.

Smart Selection saves time and reduces the need for tedious repetitious tasks. This allows you to build and rearrange layouts faster.

You can use Smart Selection to:

  • Adjust the vertical and/or horizontal space between objects.
  • Create uniform or non-uniform grids from a selection of objects.
  • Rearrange, duplicate or delete objects within a row, column or grid layout.

In this article we'll cover:

  1. What is Smart Selection
  2. Using the Tidy Up function
  3. Making a Smart Selection
  4. Adjusting Spacing between objects
  5. Resizing Objects within a Layout.
  6. Moving, Duplicate and Deleting Objects

Learn more about the why behind Smart Selection in our Medium post: Introducing Smart Selection

1 | What is Smart Selection

Smart Selection allows you to quickly select 2 or more objects in the canvas and easily adjust their arrangement, or the spacing between them.

You can create a Smart Selection from a list of objects that align on one axis, like a column or row, or of objects that are arranged or aligned in a grid or gallery-like structure.

To qualify for Smart Selection, objects must:

  • Be spaced equally apart.
  • Overlap on either the X (horizontal) or Y (vertical) axis, or both.

Objects won't need to be the same shape or size to be included in a Smart Selection.

If objects aren't equally spaced on the canvas, then you can use the Tidy Up function to rearrange the objects and create a Smart Selection.

2 | Using Tidy Up

If you have objects that aren't an equal distance apart, then you can use the Tidy Up function. This will redistribute objects so that they are equidistant from each other.

  1. Select any objects you'd like to include in the Smart Selection.
  2. There are a couple of ways to perform a Tidy Up:
    1. Hover over the selection and a Tidy Up icon will appear. Click the Tidy Up button:
    2. Use the keyboard shortcuts:

      MacOS: [⌃] + [⌥] + [T] 
      Windows: [Ctrl] + [Alt] + [T] 
    3. Click the Tidy Up icon in the Properties Panel (on the far right of the alignment section):
  3. The objects will be rearranged on the canvas so that they are an equal distance apart, on either the x or y axis.

What to Expect

For Smart Selections on either the horizontal or vertical axis (1D), objects will only be arranged based on the axis they overlap on.

Objects that are aligned on the x axis will have only their horizontal spacing adjusted, and objects aligned on the y axis will have only their vertical spacing adjusted.

Tip! Tidying up a 1D selection won't automatically align the objects along both the x and y axis (i.e. center them), but you can use the alignment tools in the Properties Panel to make any further adjustments to the objects' alignment.

When using the Tidy Up function on a selection of objects in a grid-like layout (2D), the Tidy Up function is much stricter.

Objects will have both their vertical and horizontal spacing adjusted. The vertical and horizontal spacing may be the same or unique depending on their starting position. Regardless, you will be able to adjust the vertical and horizontal spacing individually.

Unlike the distribute function, which repositions objects within the original selection's bounds, the Tidy up function will arrange all objects into a grid that aligns with the top and left edges of your selection.

3 | Make a Smart Selection

Figma will automatically recognise a Smart Selection.

  1. Select any objects you'd like to include in the Smart Selection. Learn more about making selections in our Selecting Layers and Objects article.
  2. Smart Handles will appear on each object; these take the form of a pink ring in the center of each object.
  3. When you hover over the Smart Selection, additional handles in the form of pink lines will appear between each object. These allow you to adjust the spacing between objects.

You can then make a number of different adjustments to the Smart Selection:

4 | Adjusting Space between Objects

With Smart Selection you can quickly adjust the vertical or horizontal spacing between each object.

  1. Hover over the purple handles between the objects.
  2. An arrow will appear where the cursor was. You can then click and drag the handle.
    1. Up to decrease the space vertically between objects.
    2. Down to increase the space vertically between objects.
    3. Left to decrease the space horizontally between objects.
    4. Right to increase the space horizontally between objects.
  3.  The tooltip above your cursor will indicate the distance between objects, in pixels.

    Tip!  You can hold down the [Shift] key while scrolling to adjust the increments by the amount specified in your Big Nudge settings. The default for this is 10px, but you can update this by searching for the Nudge Amount setting and determining your Small and Big Nudge values.

  4. Release the cursor to apply.
  5. Or, you can update the Space property directly, in the Properties panel. Depending on the Smart Selection, you will see either a Horizontal or Vertical space field.
  6. Enter a number directly in the field, or hover the cursor over the icon to scrub the field:

5 | Resizing Objects within a Smart Selection

Smart Selection will also allow you to resize any objects within the selection, while maintaining an equal distance between objects.

When you select an object within a Smart Selection, we refer to this as "marking".

You have a number of options when it comes to marking:

  • Click on an object within the Smart Selection to mark it for resizing.
  • To mark multiple objects, hold down the [Shift] key to continue marking objects.
  • To mark all objects within a 1D Smart Selection, double-click on any object.
  • To mark all objects on the same axis in a 2D Smart Selection, hold shift and double-click on any object. Double-click again to select all objects in the Smart Selection.

You can then make any adjustments to the object(s) as desired. For example: you can adjust the height of the object to indicate a longer message in the newsfeed.

Any other objects in the Smart Selection will automatically be repositioned, to keep the spacing consistent between objects.

Note: You can resize one object within a 2D Smart Selection, or multiple objects within a 1D Smart Selection.

Tip! To resize an object from the center, hold down the [Alt] key (Windows) or [Option] key (MacOS).

6 | Moving, Duplicating and Deleting objects

You can make changes to individual objects within a Smart Selection. This allows you to move, add or delete objects, without leaving the selection.

Moving Objects

You can change the order that an object appears within the Smart Selection.

When you move objects within a selection, surrounding objects will "reflow" to accommodate.

  • You can move a single object within a 2D Smart Selection.
  • You can move more than one object within a 1D Smart Selection.

To move objects within a Smart Selection:

  1. Click on the pink ring on the center of the object to mark it. The circle in the center of the objects will turn pink.
  2. For 1D Selections only: Hold down the [Shift] key and click on another object to mark it.
  3. Drag the object(s) to another location within the Smart Selection. A blue indicator box will show you which positions you can move the object to.
  4. Once you're happy with the new position, release the object(s) to confirm the new position.

Duplicating Objects

You can create a duplicate of an object within a Smart Selection. You can duplicate more than one object within a 1D or 2D Smart Selection.

To duplicate objects in a Smart Selection:

  1. Make your Smart Selection.
  2. Click on the pink ring on the center of an object to mark it. Hold down [Shift] and click on another object to mark it.
  3. You can then Duplicate the object in a few ways:
    • Use the Keyboard shortcut:

      MacOS: [⌘] + [D]
      Windows: [Ctrl] + [D]

    • Open the main menu and search for "Duplicate Selection in Place":
  4. This will copy the object and paste it next to the original object. The other objects in the Selection will move to accommodate the new object.

What to Expect

  • For objects in a 1D selection (row): we place the duplicated object to the right of the original.
  • For objects in a 1D selection (column), we place the duplicated object below the original.
  • For objects in a 2D selection (grid), we also place the duplicated object below the original.

Deleting Objects

You can also delete an individual object within a Smart Selection. You can delete more than one object within a 1D or 2D Smart Selection.

  1. Make your Smart Selection.
  2. Click on the pink ring on the center of an object to mark it. Hold down [Shift] and click on another object to mark it.
  3. Delete the marked objects by pressing the "delete" or "backspace" key on your keyboard.
  4. The other objects in the Selection will move to fill the gap.

What to Expect

  • For objects in a 1D selection (row): Objects will move from towards the left to fill any space created.
  • For objects in a 1D (column): Objects will move upwards to fill any space created.
  • For objects in a 2D selection (grid), objects will also move upwards to fill any space created.

Rearrange Objects

You can also change the order or position that an object appears in the Smart Selection.

At the moment, you can rearrange a single object within a 2D Smart Selection, or multiple objects within a 1D Smart Selection.

  1. Click on the pink ring on the center of the object to mark it; the entire circle will turn pink.
  2. To mark another object within the Smart Selection, hold down the [Shift] key and click on the handle of another object.
  3. Drag the object(s) to another location within the Smart Selection. A blue indicator box will show you which positions in the layout the object can be moved to.
  4. Once you're happy with the new position, release the object(s) to confirm the new position.

Keep in Mind

  • Rearranging items in a Selection won't change the layer hierarchy in the Layers Panel.
  • If you are using Smart Selection with Frames, make sure to use the Resize to fit function. This will resize the Frame as you change the content's dimensions:
  • 2D Smart Selections function more like lists within lists, than a perfect grid. The default behavior when rearranging 2D Selections, is to add that object to the existing column or row.
  • If you would like to swap one object's position for another, you can hold down the [Command] (Mac) or [Ctrl] (PC) key.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.