Confusing Relative Transformation Matrix In Shear Situation

I found the relative transformation matrix in the figma file API is confusing in the shear situation :sweat_smile:. And i don’t know how to get the shear info from this abnormal transformation matrix.

The API documentation said it is a 2x3 affine transformation matrix that can be used to calculate the affine transforms applied to a layer, including scaling, rotation, shearing, and translation. As I know, a normal transform matrix (ignore translation) for a shear in x-direction is:
[
1 \tan(\theta)
0 1
]

If we only do the shear transformation with a angle of 45 deg in x-direction, the matrix is expected to be:
[
1 \sqrt(2)/2
0 1
]

However, the matrix obtained from the figma API is not in that form. The element m[1][1] (indexed from zero) is \sqrt(2)/2 other than 1. I wonder if the transformation matrix is calculated wrong :stuck_out_tongue_winking_eye:.

Here is the reproduction process:

  1. draw a rectangle in a figma file and shear it in the x direction for 45 degrees, i.e. dUm14EjdHK6J8tcfbgwbss
  2. call the figma restful API, i.e. v1/files/dUm14EjdHK6J8tcfbgwbss?ids=0:1&geometry=paths
  3. we got the confusing transformation matrix:

This problem is solved. I found the document said additionally that ‘The transform always has unit axes’, that is to say, a shear transformation, contains a shear transformation and a EXTRA scale transformation. So the matrix is:
[
1 \tan(\theta)
0 1
]
*
[
1 0
0 \cos(\theta)
]

that is:
[
1 \sin(\theta)
0 \cos(\theta)
]

2 Likes