Drag-deselect?

[Svarry]

There’s lots of different ways to select content in Figma, from the menu’s “select all with…” to plugins, to good old CMD + A. However, I can’t seems to figure out how to drag-deselect something, and I mean deselect only, not “unselect what’s selected and select what is not selected” as all drag-selects currently seems to work.

I have a common case where I have a bunch of components/instances, and need to select all, swap half out to one thing, and another kind to another. See the image below.

Level marker is a nested instance inside champion avatar, and I want to swap out the lower row for something else. I can easily select all of them, but now I can’t deselect the upper row as any drag-select that would deselect them selects the main champion avatar at the same time.

Sketch has this exact functionality where they have a modifier key for drag-deselect that only deselects and nothing else, making modifying lots of instances a breeze. Is there something similar in Figma or how to go about it?

[Josh]

Not sure if this is quite what you’re looking for but holding shift while you drag will deselect. You can also click on the object itself. Hope this helps.

[Josh]

I realize this gif is kinda hard to see what is going on here. But if you focus on the smart selection dots in the middle of the square it’ll show what I have selected vs deselected.

[Svarry]

Not quite unfortunately, as shift-drag selects unselected objects as well as deselects selected ones. I need to only deselect.

[Steven]

The best way for me to make complex selections is to use the similayers plugin.

Similayer

[Svarry]

Nice plugin, thanks! Doesn’t help with deselection issue tho if all layers are the same

[Steven]

Maybe I don’t understand what you want to do exactly .

[Svarry]

Simply put I want to be able to drag-deselect (only deselect, currently figma’s selection either unselects what’s selected and selects what’s not afaik) specific items from an existing selection.

See the image at the bottom. Let’s say I have two components (green and pink dots) that are instanced inside my avatar component. Then I have a bunch of avatar instances for whatever reason, maybe I am making variations, maybe lots of different designs, etc. I need to perform actions only on the instances of the pink dot on second row of the avatars, how do I select them in an efficient and fast way?

I can’t simply select the avatar row and then go down in the hierarchy with enter because you can’t switch between siblings on multiselect for some reason (I made a thread about it here) so you hit a dead end as soon there’s multiple things on same level. I can select all pink dots through your plugin or some other tricks, but how do I then deselect the first, third and forth rows that I don’t want to perform actions on? I can’t drag deselect over the unwanted pink dots because it will also select the avatar user silhouette at the same time that overlaps the drag-select.

I have over and over stumbled over this issue in my designs where I have dozens of identical component instances and want to modify something in half of them.

[Steven]

Solution 1 : Combine filters

Solution 2 : Frame to create a selection zone

[Svarry]

Neat hacks that will probably work for many of my situations, thank you! Although it would still be nice a simple drag-deselect all function

[Steven]

Glad it could help. So I suggest you to indicate your direct need as solved and open a Product ideas topic to present your idea of adding drag-deselect all function.

[Svarry]

It’s nice, but leaves a lot of scenarios uncovered for example if components are not on a straight line, are within a variation and can’t be framed, or I need to select a specific variant of an instance which the plugin seems to ignore. So I was hoping maybe someone has more fool-proof tricks.