Introducing Smart Selection

As a designer a large part of our work is about exploring constraints and possibilities, which is often a very iterative process. We try this, we try that, we document our findings, and we revisit what we did yesterday.

Most of this work involves repetitive tasks, like “What if the spacing around the icons was a little bit tighter?” or “Would it help to move these things around?”

This tedious work can take up a huge amount of time. Simply increasing the height of some elements of a list might mean performing 10 resize operations, 9 move operations — all while keeping track of spacing and alignment in your head.

It shouldn’t have to be this hard. After all, we have these amazingly powerful computers at our disposal, where one of the fundamental aspects is effective repetition and reuse. I.e. a computer is able to perfectly repeat the same action multiple times at blazing speeds, something utilized by writing professionals, software engineers, data researchers and others. But not as much by designers.

Today we are excited to introduce a novel new feature that is going to relieve this repetitive “monkey work” for designers and speed up your explorations.

We call it Smart Selection — it helps you adjust spacing and arrangement of multiple items in a selection of objects on the canvas with ease, among other things. Think of it as a power-up. It gives you the freedom to focus on the essentials of your creative process, rather than the minutiae.

How Smart Selection works

Smart Selection works automatically on any selection or group of three or more items with equal, uniform spacing. With items selected, you can adjust spacing, position and size of all these items at once.

Here’s what you can do with Smart Selection:

• Drag the pink-colored handles in the space between objects to adjust spacing of all items.
• Drag the ring to quickly rearrange items.
• Click one or more items’ pink rings to mark them: this allows resizing by pulling on their edges.

In building this feature, we wanted to find a solution within the paradigms that designers are already working in, rather than introduce a brand new way of thinking.

With this in mind, we created a way to assist you right on the canvas where you are able to directly manipulate objects, without needing to learn any special new tools or object types. It’s a pure UI feature.

Tidy Up

Alongside Smart Selection, we’re introducing another great feature called Tidy Up which makes it fantastically easy to get a Smart Selection out of something messier. No need to be precise when playing around — just invoke the Tidy Up action to deftly arrange selected items. Think of it as a “distribute” function that does a better job.

Tidy Up takes the selected items and shifts them so that they’re both near each other and have the same spacing. The use cases go beyond just assisting with Smart Selection — you’ll find Tidy Up helpful with things like tables and toolbars. Unlike the traditional distribute function, the spacing will always be even.

To help you visualize how Tidy Up works, imagine working on 20 screens, all constituting one flow. We want these to be neatly arranged with perfect spacing in between, so that when we present this to other stakeholders, it looks refined.

Doing this in traditional design tools often means manually going through each and every space (19 spaces to measure in our example!) and adjusting the ones that are off.

With Tidy Up all this can be done in a single quick action — select your screens and then click the Tidy Up button at the top of the right sidebar. The keyboard shortcut for Tidy Up is ⌥⌘T on macOS and ctrl-alt-T on other platforms.

What's next?

We’ve got a lot more in store for you in the coming months, including support for 2D grids with Smart Selection and other exciting things.

As always, we’re eager to hear what you do with Smart Selection and to get your feedback on how we can make it even better. Reach out to us in-app (the question mark button) or on Spectrum.