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?
From my understanding if i want to scale it 2x, it should be like this. But instead of resizing, it does opposite → downscales gradient. & also it’s not centred anymore
After manually coming up with matrix values i did get desired result, but i cannot figure out the logic behind it.
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 .
Hey man, this is so cool! Waiting for your write-up too