Using Smart Selection
Smart Selection allows you to quickly and easily adjust the spacing and arrangement of objects on the canvas. This is perfect for making quick adjustments, or iterations to complex layouts - from email inbox interfaces, social media news feeds or timelines, to photo galleries, libraries and other grid based layouts.
Smart Selection saves you time and reduces the need for tedious repetitious tasks, so you can build and rearrange layouts easier, increase your productivity, and prototype faster.
Smart Selection is perfect for:
- Adjusting the vertical and/or horizontal spacing between multiple objects.
- Creating both uniform and non-uniform grids from a selection of objects.
- Rearranging or reordering objects within a row, column or grid layout.
In this article we'll cover:
- What is Smart Selection
- Using the Tidy Up function
- Making a Smart Selection
- Adjusting Spacing between objects
- Resizing Objects within a Layout.
- Rearranging 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.
- Select any objects you'd like to include in the Smart Selection.
- There are a couple of ways to perform a Tidy Up:
- Hover over the selection and a Tidy Up icon will appear. Click the Tidy Up button:
- Use the keyboard shortcuts: [⌃] + [⌥] + [T] (Mac) or [Ctrl] + [Alt] + [T] (Windows).
- Click the Tidy Up icon in the Properties Panel (on the far right of the alignment section):
- 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.
- Select any objects you'd like to include in the Smart Selection. Learn more about making selections in our Selecting Layers and Objects article.
- Smart Handles will appear on each object; these take the form of a pink ring in the center of each object.
- 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:
Adjusting Spacing between Objects
With Smart Selection you can quickly adjust the vertical or horizontal spacing between each object.
- Hover over the purple handles between the objects.
- An arrow will appear where the cursor was. You can then click and drag the handle.
- Up to decrease the space vertically between objects.
- Down to increase the space vertically between objects.
- Left to decrease the space horizontally between objects.
- Right to increase the space horizontally between objects.
- 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.
- Release the cursor to apply.
- 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.
- Enter a number directly in the field, or hover the cursor over the icon to scrub the field:
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).
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.
- Click on the pink ring on the center of the object to mark it; the entire circle will turn pink.
- To mark another object within the Smart Selection, hold down the [Shift] key and click on the handle of another object.
- 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.
- Once you're happy with the new position, release the object(s) to confirm the new position.
Note: 2D Smart Selections function more like lists within lists, than a perfect grid. When rearranging an object in a 2D selection, the default behavior is to add that object to the existing column or row. If you would like to simply swap one object's position with another in a 2D Smart Selection, you can hold down the [Command] (Mac) or [Ctrl] (PC) key while rearranging.
Things to note
- Rearranging items on the canvas (via Smart 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 allows the Frame to be resized, as the content's dimensions are changed: