Smart Selection allows you to quickly and easily adjust the spacing and arrangement of objects on the canvas. This is perfect for making adjustments to a design for an email inbox interface, or a social media news feed/timeline.
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.
In this article we'll cover:
- What is Smart Selection.
- How to use the Tidy Up function.
- How to make a Smart Selection.
- How to resize objects within a Smart Selection.
Learn more about the why behind Smart Selection: Introducing Smart Selection.
1 | What is Smart Selection
Smart Selection allows you to quickly select 3 or more objects in the canvas and easily adjust the spacing or arrangement of them.
To qualify for Smart Selection, objects must:
- Be spaced equally apart.
- Overlap on either the X (horizontal) or Y (vertical) axis.
Objects won't need to be the same shape or size to be included in a Smart Selection.
If objects aren't equally spaced, then you can use Tidy Up function (below). Once "tidied up", the Smart Selection indicators will appear on your selection.
2 | Use 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.
Tip! This won't align the objects along the x or y axis (e.g. center them), but you can use the alignment tools in the Properties Panel to make any adjustments to the objects' alignment.
3 | Make a Smart Selection
- Select any objects you'd like to include in the Smart Selection
- Once objects are selected, the objects will be outlined in purple and Smart Handles will appear on and between each object:
You can then make a couple of different adjustments.
You can change the order or position that objects appear in a selection. You can even move or reorder multiple objects at once.
- Click on the pink ring on the center of the object. The entire circle will turn pink when it is successfully selected.
- To select another object within the Smart Selection, hold down the [Shift] key and click on another object.
- Drag the object(s) to another location within the Smart Selection.
Tip! 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.
Set and Adjust Spacing
You can quickly adjust the 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.
- Guides will indicate the distance in pixels.
- 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, or both.
Enter a number directly in the field, or hover the cursor over the icon to scrub the field.
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.
Or, you can update the Space property directly, in the Properties panel. Enter a number directly in the field, or hover the cursor over the icon to scrub the field.
Tip! You will be able to adjust the spacing by negative values, but this can go no lower than the size of the smallest object. For example: If you had three objects, each with a height of 26 pixels, the minimum value you can set the spacing to would be -26.
Resize 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.
You can select any object within a Smart Selection - we call this "Marking". You have a couple 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 selection, double-click on any of the objects.
You can then make any adjustments to the object as desired.
For example: adjust the height of the object to indicate a longer message in the newsfeed.
Tip! To resize an object from the center, hold down the [Alt] key (Windows) or [Option] key (MacOS).
Other objects in the Smart Selection will automatically be repositioned, to retain the spacing between objects.
Things to note
- Rearranging items on the canvas (via Smart Selection) won't change the layer hierarchy in the Layers Panel.
- At the moment, you can only use Smart Selection to adjust the space between objects, horizontally OR vertically. It's not currently possible to adjust both horizontal and vertical spacing using the same selection.
- 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: