Tab/Shift+Tab layer navigation when multiple Component Instances are selected

Let’s say I have a list of Select Item components, each with a label and a nested Checkbox component, and I want to toggle all of the Checkboxes to be “on” for the next screen. If I have 10 instances of Select Item, I either have to go into them one by one and toggle the checkbox, or I have to do trickery with command + drag selection to select only the checkbox components.

Currently Figma allows you to navigate through layer structures using Enter/Shift+Enter for going in and out, and Tab/Shift+Tab for selecting sibling layers. My idea is to enable this functionality when multiple layers are selected, if their layer structure matches. The simplest way to start would be with Components, because regardless of Hidden layers and overrides, the Layer structure is locked in Component Instances.

In my example, I would be able to:

  • Select all 10 Select Items
  • Click “Enter” to go into each of them
  • Click “Tab” to select all the Labels
  • Click “Tab” again to select all the Checkboxes
  • Change my Checkbox variant or do whatever else I want to do.

Component structure:

Example flow:

PS: I know that my example could be solved by having Variants of the Select Item itself, but that’s beside the point. Currently selecting and manipulating the same layers from multiple parents is not very smooth.

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.