Skip to main content

Selecting and locking

Selection on the canvas works level by level: a click reaches as deep as the current selection, and modifiers reach further. Locking takes a layer out of the pointer's reach without protecting it from edits, and hiding takes it out of layout, preview and export. Also called: direct select, selection rectangle.

Which layer a click selects​

  • A click selects the topmost layer under the pointer at an open level: a layer directly on the page, a direct child of an artboard, or a child of any frame that contains the current selection. With a layer selected deep inside a card, its siblings and the card's siblings stay one click away.
  • A double-click reaches one level deeper than a click.
  • An artboard that contains layers ignores a click on its background, and the click clears the selection. Click the artboard's name to select it. Every frame placed directly on the page behaves this way, a component or a component set included. An empty one is selected by a click anywhere on it.
  • Enter selects the children of the selected frames and Shift + Enter the parents. Esc clears the selection instead of stepping up a level.
  • Dragging a layer inside an instance moves the whole instance and selects it.

Deep select and the layer picker​

  • Ctrl-click selects the innermost layer under the pointer, whatever its level. It skips frames without a visible fill. Artboards are the exception: Ctrl-click on an artboard's background selects the artboard.
  • Ctrl + right-click opens the layer picker, a menu of the layers under the pointer, topmost first. Pointing at a row outlines that layer on the canvas. The menu includes frames without a fill and leaves out hidden layers.

Marquee​

  • A marquee selects every layer it touches, at the levels a click reaches. When it touches a frame and layers inside it, it selects the frame.
  • An artboard that contains layers is selected only when the marquee encloses it completely, so a drag that starts on its background selects the layers on it.
  • Ctrl-drag draws a deep marquee, also when the drag starts on top of a layer. It selects the innermost layers it touches. A frame that lies completely inside it is selected whole, and a frame it partly covers only when it touches none of the layers inside.

What a locked layer still allows​

Where: the lock button on the layer's row in the Layers panel, or right-click → Lock / Unlock (Unlock All for a mixed selection).

  • A locked layer and every layer inside it ignore the pointer on the canvas: click, hover, Ctrl-click and marquee pass through to what is underneath. Select it in the Layers panel, or with Ctrl + A, which includes locked layers.
  • Lock doesn't protect a layer from edits. Once it is selected, the Properties panel, the arrow keys, align, duplicate and Delete work on it. Only pointer transforms are blocked: dragging a mixed selection moves the unlocked layers only, and a selection of locked layers shows no resize handles.
  • A layout still places a locked layer and a binding still changes it. Lock has no effect in preview.
  • A lock set in the main component doesn't carry over to instances, and Lock is unavailable on a layer inside an instance (what an instance can override).

What hiding a layer changes​

Where: the eye button on the layer's row in the Layers panel, or right-click → Hide / Show (Show All for a mixed selection).

  • A hidden item of a Flex or Grid frame leaves the flow and the other items close up, as with CSS display: none. Shown again, it returns to its place in the item order.
  • Preview doesn't render a hidden layer, and exports leave it out.
  • Visibility can be overridden on a layer inside an instance, and it can be bound: a Boolean variable then shows and hides the layer in preview (bindable properties).