Need help with gradientTranform matrix

Has anyone successfully worked with affine transformations (gradientTransform)? I had no luck understanding how it works.
I need to do really simple thing

  • scale gradient 0.5x, 1x, 2x within node
  • change position x, y within node

from this video it seems quite easy to do, but for Figma API it does not work same way (or i am missing something).
How do i calculate transformation matrix to get desired B result?

1 Like

From my understanding if i want to scale it 2x, it should be like this. But instead of resizing, it does opposite → downscales gradient. :grimacing: & also it’s not centred anymore
image (12)

After manually coming up with matrix values i did get desired result, but i cannot figure out the logic behind it.

1 Like

The gradientTransform matrix is multiplied by another matrix to normalize the coordinate space to be [0…1, 0…1].

A simple way to do this is to multiply by the inverse of the gradientTransform. This has the side-effect of inversing the scale factor.

However, it makes it easy to place the gradient handles and convert them back and forth from that to a transform for editing purposes.

I’ve created a gist here: Figma convert `gradientHandlePositions` to `transformGradient` and vice-versa · GitHub with my code for converting between gradientHandlePositions provided by the REST API and gradientTransform provided by the Plugin API.

I hope to do a deeper write-up on it this weekend. I was stuck on this for days as well. But it is incredible how elegant the solution is once you understand it :grin:.

Hey man, this is so cool! Waiting for your write-up too :pray: