Selection colours

Select a frame, a component or a handful of layers, and the Selection colours section of the Design tab lists every colour they paint, each one once. Change a colour there and it changes on every layer that uses it, however deep inside the selection it sits.

It is the fastest way to recolour a screen, tidy up near-duplicate greys, or turn hard-coded colours into variables.

Where it shows

Selection colours appears when the selection paints more than one colour, or the same colour on more than one layer. A single plain layer has its own Fill and Stroke sections for that, so the list stays hidden there.

Select a whole screen to see the colours of everything inside it.

What it lists

Every colour that shows:

• fills, and the colour of text (including coloured words inside a text),
• the label colour of buttons and sticky notes,
• strokes,
• each stop of a gradient, on a fill or a stroke,
• the colour placed over a picture.

Colours that follow a variable come first, under the variable’s name. The others follow as hex codes with their opacity. The same colour at two opacities counts as two.

Long lists fold after six; press See all to open the rest.

Change a colour everywhere

• Type a new hex code or opacity in a row: every layer using that colour follows.
• Click the swatch for the colour picker. As you drag, every use updates live.

Find the layers using a colour

The target button at the end of a row (Select layers using this colour) selects every layer that paints it. A toast says how many. From there you can restyle them, check them or move them.

Link colours to variables

Each row has an Apply variable button:

• Pick a colour variable and every use of that colour now follows it.
• Create one from the colour, and the layers are linked to the new variable straight away.
• On a row that already follows a variable, Detach lets the layers keep the colour without the link.

Clicking the swatch of a variable’s row opens the picker on its Libraries tab, where you can swap to another variable.

This is the quickest way to bring an existing design onto your colour variables: select the screen, then link each row in turn. See Variables and modes.

What it leaves out

• Pictures, videos and patterns.
• Hidden fills and strokes (a text’s colour still shows).
• Shadows and other effects.
• The mask layer of a mask group, since only its outline counts.
• The shapes inside a boolean group: only the group’s own colours show.

Catches

• It changes the colour, not the layer’s fill type. A gradient stays a gradient; only the stop you edit changes.
• One edit, every use. If you want only some layers to change, select just those first, or use the target button to see which layers a colour reaches.
• Near matches are separate rows. #333333 and #343434 are two colours. Set one to the other and they merge into a single row.
• Selection colours are on every plan.