Skip to main content

Binding rules and edge cases

A binding does more than supply a value: it can switch off layout sizing, replace paints, or give way to an edit. These are the rules per property; how to bind is on Binding properties to inputs and variables.

When a binding goes away​

A property that loses its binding keeps the value it last showed:

Two cases differ. A sizing change can remove a size binding; the new layout settings then determine the size. Deleting an input returns the properties bound to it to the main component's value on every instance (renaming and deleting inputs).

Width and Height​

On each axis, a layer's size follows either a variable or the layout, never both. Choosing one removes the other, and a message tells you what changed.

  • Binding Width or Height sets that axis to Fixed. An axis set to Left + Right, Top + Bottom or Scale in Constraints changes to Left or Top.
  • Setting the axis to Fill or Hug content, or choosing one of those three constraints, removes the binding.
  • So does any change that makes a stored Fill or Hug content setting apply to the axis: a new layout type or direction on the layer or its parent, a move into another layout container, or toggling Use absolute positioning.
  • A bound axis has no resize handles, and the corner handles are hidden when either axis is bound. Min and max size still limit the bound value.

Fill and Stroke​

Binding Fill or Stroke replaces the whole paint list with one solid paint in the bound color. Gradients, images and extra paints are discarded, and the color's alpha becomes the paint's opacity (Color formats).

  • The list is locked while bound, for inputs and variables alike. When the binding ends, the single solid paint stays; the earlier paints don't come back.
  • On a vector layer, an input recolors every shape area with the one color. A variable isn't offered for a vector's Fill.
  • On a text layer, an input sets one color for the whole text and locks the list. A variable binds character ranges instead (Text ranges).

Text ranges​

On a text layer, text size and Fill bind to a variable per character range, and the binding gives way to edits instead of locking the field.

  • The binding covers the selected characters while you edit the text, and the whole text otherwise. Unbinding covers the same scope.
  • Binding Fill removes an active whole-text color, so the bound color is what shows.

Two edits clear a range binding:

  • Typing a size or picking a fill over the range. Only the part you overwrite is unbound.
  • The Scale tool. It scales bound sizes and removes their bindings; bound fills are unaffected.

One does not: picking a Fill for a text layer inside an instance without entering text editing. That sets a whole-text color, which covers the bound ranges and leaves them bound.

Adjustments on bound paints​

Where: select a layer of a main component whose Fill or Stroke is bound to a color input → Properties panel → Fill adjustments / Stroke adjustments → Add adjustment.

Adjustments derive a layer's color from the color an input supplies. They exist only for input-bound paints on the component, never on layers inside an instance.

  • Adjustments apply from the top of the list down, each to the result of the one above; a hidden adjustment is skipped.
  • Contrast Color replaces the color with whichever of its two colors contrasts more with the result so far.
  • Each layer has its own list, so one input can feed several differently adjusted layers. An instance can't change the list; it assigns the input color.
  • A paint bound to a variable has no adjustments section. Derive the color in an expression variable with the Color functions, for example Color.lighten(brand, 0.2), and bind the paint to that variable. The same goes for text ranges.

Inside components and instances​

Bindings belong to the main component's layers; instances receive the resulting values. A layer inside an instance offers neither Bind input nor Bind variable: bind it on the component.

Two bindings can be made on the instance side:

  • The instance's own input rows bind to a variable (Binding an instance's input). For an instance nested inside another instance, bind the row on the nested instance inside the main component.
  • Text size and Fill on character ranges of a text layer inside the instance. The bound text becomes an override of that instance and keeps following its variables.

A variable bound inside a component gives every instance the same value. For a value per instance, bind the layer to an input and bind that input's row on each instance to a variable.

Overrides​

An override wins over a bound value. An instance that overrides a property the component binds to a variable keeps its override while the variable changes, in the editor and in preview.

  • A variable change never creates an override on an instance.
  • A property bound to an input stays locked on the instance's layer. Change it through the instance's input row.

Duplicate and paste​

Within a document, duplicated and pasted layers keep their variable bindings, on properties and on text ranges alike. A binding to a variable that was deleted between copy and paste is dropped, and the value stays.

Pasting into another document strips every variable binding; the values stay.