The position of a node relative to its containing parent as a
Transform matrix. Not used for scaling, see
height instead. Read the details page to understand the nuances of this property.
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
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.
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).
Example 2: In the following hierarchy, the relative transform of
rectangle is relative to
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.
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!
While it is possible to skew a layer by setting
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.
The translation components
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.