relativeTransform

The position of a node relative to its containing parent as a Transform matrix. Not used for scaling, see width and height instead. Read the details page to understand the nuances of this property.

Signature

relativeTransform: Transform

Remarks

Scale

The relativeTransform is not used for scaling a node. The transform always has unit axes. That is, sqrt(m00^2 + m10^2) == sqrt(m01^2 + m11^2) == 1. In order to set the size of a node, use resize or resizeWithoutConstraints.

info

If you have a background in computer graphics, you may find it odd that we use the transform matrix in such a manner. This is because in 2D UI design, it's rare that you would want to scale the children when resizing a frame. And even if you did, it would be through more nuanced constraint settings that aren't captured by a transformation matrix.

Also, if nodes had both a width and a separate m00 scale property, it would be confusing to the users which one they're changing, especially during interactions like dragging.

Container parent

The relative transform of a node is shown relative to its container parent, which includes canvas nodes, frame nodes, component nodes, and instance nodes. Just like in the properties panel, it is not relative to its direct parent if the parent is a group or a boolean operation.

Example 1: In the following hierarchy, the relative transform of rectangle is relative to page (which is just its position on the canvas).

page
  group
    rectangle

Example 2: In the following hierarchy, the relative transform of rectangle is relative to frame.

page
  frame
    boolean operation
      rectangle

One implication is that to calculate the absolute position of a node, you have to either use the absoluteTransform property or multiply relative transform matrices while traversing up the node hierarchy while ignoring groups and boolean operations.

info

Why this complication? We do it this way because groups and boolean operations automatically resize to fit their children. While you can set the relative transform of a group to move it, it's a property derived from the position and size of its children. If the relative transform was always relative to it’s immediate parent, you could get into confusing situations where moving a layer inside a group by setting the relative transform changes the position of the parent, which then requires changing the relative transform of the child in order to preserve its on-screen position!

Skew

While it is possible to skew a layer by setting m00, m01, m10, m11 to the right values, be aware that the skew will not be surfaced in the properties panel and may be confusing to the user dealing with a skewed node.

Auto-layout frames

The translation components m02 and m12 of the transform matrix is automatically computed in children of auto-layout frames. Setting relativeTransform on those layers will ignore the translation components, but do keep the rotation components.