Call for feedback: Selection improvements in Mac app v97

The upcoming v97 of the Mac app, which is currently in beta, includes many changes and improvements to selection. We know change can be difficult to get used to, especially on selection: something you use all day, every day, and is practically second nature.

For this reason, I’ll start by giving you a thorough explanation of the changes we’ve made and the pain points we’re trying to address. Then, want to encourage all of you to share your feedback during this Beta period so we can do our best to make it great for everyone.

Major changes

There are two main changes aimed at making selection and dragging more predictable:

  1. You can select layers and groups only by clicking on their visible parts.
  2. You can move selected layers by dragging anywhere within the selection box.

You must click the visible parts of a group, or symbol to select it

Until now, when trying to select a layer, it was possible to unexpectedly select another group or symbol because their empty space was technically in front of that layer. This can be very frustrating and make you depend too heavily on the ⌘ key for selecting anything.

Everyone should have confidence that they’ll select what’s under the cursor, and not something else, consistently. Now, layers and groups can only be selected by clicking their visible area, so clicking on the empty space of a group or symbol will no longer select it.

Edit: We had originally made this change for symbols as well, for the sake of consistency, since groups and symbols are visually indistinguishable on the canvas. After feedback, it’s clear that many people expect to be able to select symbols by clicking anywhere within their bounds. So, we’ll be reverting this for symbols, which will remain selectable by clicking on their empty space. Holding ⌘ will, however, consistently go through their empty space.

Follow-up: We’ve reverted the tweak to ⌘-click on the empty space of Symbols. Doing so will select the symbol, or within the symbol, and will not go behind that empty space.

You can move selected layers by dragging anywhere in their selection box

If a selection contains mostly empty space, with few or small visible parts — such as open paths, tiny layers, or shapes with borders but no fills — it can be difficult to move on the canvas, as you have to drag on those visible parts, and you don’t get any highlight feedback in this situation.

We’ve improved this so you can move your selection by dragging anywhere within the outer selection box, regardless of whether you do it over layers or empty space. Importantly, this doesn’t prevent you from selecting a different layer in the same area with a normal click. This also helps when moving a layer that’s clipped by a mask or its containing artboard.

Bonus: secondary-clicking anywhere within the selection box will open its context menu.

Other changes

You can fully manipulate locked layers once you select them

Locked layers, if selected, behave inconsistently. You can’t resize or move them with the cursor, but you can with the arrow keys, or if the selection also contains non-locked layers. If you try to open the context menu for a locked layer, you’ll lose your selection.

Now, once you select a locked layer, there are no restrictions on what you can do. Selecting a locked layer is already difficult to do by design, so if you do it, we don’t want to make your life difficult twice. We think of locking as a way to prevent selection, but not edits.

We’ve removed ⌥-click in favor of a dedicated Select Layer menu

Until now, ⌥-click would select the layer behind the frontmost layer. This feature is little-known (raise your hand if you knew :person_raising_hand:), infrequently used, and limited as it can only select the second layer but no further. It also conflicts with ⌥ to see distance guides or ⌥-drag.

So, we’ve removed this feature. Instead, you can now ⇧-secondary-click to open a dedicated Select Layer menu to select between overlapping layers underneath the cursor.

We’ve also improved this menu, which remains accessible via the canvas context menu. As you hover each item you’ll see a highlight on the canvas, and you can also ⇧-click an item to add it to an existing selection. If you’ve ever used Xcode’s Interface Builder, this will likely feel familiar.

Select any artboard by ⌘-clicking its background

While you can select an empty artboard by clicking its background, an artboard with layers can be difficult to select, as you must click its title, which is small and may be out of view.

We’ve made this easier by allowing you to select any artboard by ⌘-clicking its background. This reinforces the role of ⌘-click as direct selection, bypassing most rules of hierarchy.

Press X and drag to marquee select even on top of layers

Until now, you’ve only been able to start a marquee selection by clicking and dragging on empty space. This makes it impossible to marquee-select layers on top of a background layer without selecting that background layer in the process, too.

Now, you can press or hold X to activate the marquee tool. Then, click and drag to make a marquee selection, even on top of layers, without also selecting the layer where you started.

Smaller fixes and improvements

  • You can now ⌘-click on a selected layer within a multi-layer selection to exclusively select it and deselect all of the others.
  • When aligning multi-selections, you can now make an artboard the reference object.
  • When you duplicate layers with ⌥-drag, releasing ⌥ simultaneously or even slightly before releasing the mouse or trackpad will now still duplicate the layers instead of moving them.
  • We fixed a bug where you couldn’t press the ⌥⌘ modifiers for a marquee selection before starting the marquee. You can now — as long as you don’t have an existing selection. Pro tip: if you do have a selection holding ⌥⌘ and dragging anywhere will move that selection.
  • We fixed a bug where you couldn’t select a shape by clicking on its border if it had both a fill and border.
  • We fixed a bug where shapes with a border but no fill would have a selection hit area that was unnecessarily large on the inside of the shape, making it harder to select layers behind them.

We’d love to hear your feedback

We didn’t make these changes lightly. They were a result of much debate and consideration and our design team used it in their own everyday work for an extended period. While we’re confident this is a step forward as a whole, we’d like to get further feedback, from all of you.

Please download the Beta of v97 of the Mac app, try it out, and reply with your feedback.

Thank you!

3 Likes

I love this idea. Haven’t tested it yet, but I have definitely run into the mentioned issue where I want to select a bunch of objects that are on top of a background layer, then end up selecting the background layer instead. Normally I have to lock the background layer, which can created its own issue. So this update will be super useful!

4 Likes

@jkilp Please let us know how the X to marquee works for you. We wondered whether it should also do direct selection — that is, skipping groups as if ⌘ is also pressed — since situations that call for background-skipping are likely to be groups, but we left it be with the default marquee selection behavior to start with.

Just did some small tests. The X + drag works really well. I also like that you can have the background layer already selected, then press x and drag and it’ll de-select the background layer and only select the top layers. That small thing will actually make this feature a lot more efficient.

I can definitely see it being useful to bypass groups with the ⌘ key, but that current combo ⌘+x deletes the layers! So that would have to be changed haha!

One thing I noticed with the current beta is that pressing ⌘+click on an artboards background doesn’t seem to select the artboard (at least it didn’t seem to work for me). I have a video attached.

Beta version: 97 (173019)

You can ⌘-click. But if you ⌘-click-and-drag, we’re prioritizing doing a marquee selection, with the ⌘ being used as a direct selection modifier on the marquee.

1 Like

Ahh, got it! That makes sense. Thank you.

Not being able to select hidden or locked layers in the layer list using tab is an annoyance of mine. Sometimes I want to tab to select an adjacent layer that I know is hidden or locked, to perform the CMS + Shift + H shortcut to unhide, or the CMD + Shift + L shortcut to unlock. Unfortunately this doesn’t appear possible and I have to engage the mouse to make the selection.

We’ve decided to revert a change to selecting symbols. This will be available in a future beta for this version, and in the final release of v97.

I’ve updated the original post, along with this explanation:

1 Like

I’ve updated the original post with a further change we’ve made:

Please make the selection to be consistent with Grouped and Ungrouped text.

1 Like

@Paulius How does this affect selection for you?

Hi Paulo, It’s sometimes confusing when trying to scale or move the selected object.
Please take a look at the video.

  1. After scaling an object the tooltip shows increased dimensions, but after reselecting it shows other dimensions.
  2. The selection drops when trying to move the object.

Recommendation
Make selection consistent as it’s at any zoom level.

@Paulius This enlarged selection box was introduced in v94 in October last year, and it’s meant to help resize a layer that’s very small — otherwise, in your case, the resize handles would be overlapping each other and covering your layer, making it near impossible to move or resize. This feature hasn’t changed in v97 and we plan to keep it.

However, the behavior you’re seeing there doesn’t seem quite expected to me, but it’s a bit hard to tell what’s happening just by looking at the canvas. Please email me at paulo.pereira@sketch.com with a link to or copy of the document you used in that video, so we can take a look, and we’ll take it from there. Thank you!

@paulozoom I was not using v94 and v95 because of the radical changes introduced in the Inspector which prevented me from making the transition. I just started using v96 and finding this new selection behavior not working as I would expect. Hopefully you can improve it.

You can download the file via link below:

Hey @Paulius! :wave:

We just reviewed the Document you shared with us, and there does seem to be some inconsistency with how the selection handles appear when using:

  • Symbols
  • A grouped text element
  • A simple text element.

As an aggregate, we found that this behaviour only happens on Text Elements set to Auto Width. When using Auto Height or Fixed Size, the bounding box does react correctly to this change and is expanded when zooming out to < 20%.

We’ll forward the information to the team so they can check this out and we’ll let you know as soon as we have more info about a possible fix!

Thank you once again for bringing this to our attention, we truly appreciate the feedback and your time. :pray:

1 Like

The only thing I have noticed is that clicking into text nested into a symbol or smart group isn’t as responsive as before. I feel I am clicking more. It feels that clicking the space between two text lines also doesn’t trigger the text to be edited. You literally have to click on the characters.

This shouldn’t happen. Could you show us a video of this happening, please?

This shouldn’t be the case either, unless you have outlined your text and thus transformed it into a path.

Here is a video of it happening.

@KarlCanBeCool That doesn’t seem alright, but I’d like to take a look at that artboard. Could you please put it in a new document and share the link or the file? Feel free to email me at paulo.pereira@sketch.com if you’d like to do so privately.

Ok will send now.

I found another bug too.