# 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.

## 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.