Figmagic gradients appear different from Figma

[tjmusser]

Describe the bug There's difference in the gradient that Figma outputs and the one that figmagic returns. Both in the angle of the gradient, and in the color stops.

You can see an example of this in the code pen I created.

https://codepen.io/tmusser-illumina/pen/jOBJdGb

Figma value linear-gradient(61.68deg, #0045E6 -4.27%, #FDDD33 116.09%)

Figmagic value linear-gradient(8.62deg, rgba(0, 69, 230, 1) 10%, rgba(253, 221, 51, 1) 100%)

To Reproduce Steps to reproduce the behavior:

1. Have a gradient color on the colors page
2. Run figmagic
3. Check output and compare to figma inspector

Expected behavior I would expect the same gradient settings between Figma and Figmagic

Screenshots	Figma File	Code Pen Example

Gradient angle in Figma

Additional context RGBA colors/values are fine.

Json from Files API for gradient in question

{
  "id": "3279:0",
  "name": "TJFINDME",
  "type": "RECTANGLE",
  "blendMode": "PASS_THROUGH",
  "absoluteBoundingBox": {
    "x": -2372.0,
    "y": -1033.0,
    "width": 120.0,
    "height": 120.0
  },
  "preserveRatio": true,
  "constraints": {
    "vertical": "TOP",
    "horizontal": "LEFT"
  },
  "fills": [
    {
      "blendMode": "NORMAL",
      "type": "GRADIENT_LINEAR",
      "gradientHandlePositions": [
        {
          "x": 0.028397589928173650,
          "y": 1.5776396405568802
        },
        {
          "x": 0.48260872530965471,
          "y": -1.4196428150293696
        },
        {
          "x": 1.9517800440212534,
          "y": 5.1467014794766746
        }
      ],
      "gradientStops": [
        {
          "color": {
            "r": 0.0,
            "g": 0.27150836586952209,
            "b": 0.90196079015731812,
            "a": 1.0
          },
          "position": 0.10496804118156433
        },
        {
          "color": {
            "r": 0.99215686321258545,
            "g": 0.86516082286834717,
            "b": 0.19843137264251709,
            "a": 1.0
          },
          "position": 1.0
        }
      ]
    }
  ],
  "strokes": [],
  "strokeWeight": 1.0,
  "strokeAlign": "INSIDE",
  "effects": [],
  "cornerRadius": 4.0,
  "rectangleCornerRadii": [
    4.0,
    4.0,
    4.0,
    4.0
  ]
}

My FIgmagic settings

{
  "debugMode": false,
  "figmaData": "figma.json",
  "fontUnit": "rem",
  "letterSpacingUnit": "em",
  "outputFolderGraphics": "./dist/graphics",
  "outputFolderTokens": "./dist/tokens",
  "outputFormatCss": "ts",
  "outputFormatDesc": "md",
  "outputFormatGraphics": "svg",
  "outputScaleGraphics": 1,
  "outputFormatTokens": "js",
  "syncElements": false,
  "skipFileGeneration": {
    "forceUpdate": true,
    "skipCss": false,
    "skipDescription": false,
    "skipReact": true,
    "skipStorybook": true,
    "skipStyled": true
  },
  "remSize": 16,
  "syncTokens": true,
  "spacingUnit": "px",
}

[mikaelvesavuori]

Hi and thanks for the reproducible example. I looked at this when you first posted it, but my work did not fully cover a solution at the time.

This will have to be on hold from my side until I get more time to look into this.

[mikaelvesavuori]

I've worked on this, to and from, a couple of times since this issue originally popped up. Most recently I also used ChatGPT as well as finding more recent discussions around the gradient handle positions and gradients overall, out on the internet. Even with intense prompting and chaining, I can't get ChatGPT to figure out what's going on, either.

Some things seem pretty simple to understand, such as how color positions work in strictly straight lines (0, 90 degrees etc.) but I can't seem to figure out the math when the handles are originating from outside a frame or having angles similar to what you've shown in your demo use case.

There is no obvious way that the Figma-provided output (in the Dev Mode, for example) is calculated, at least to my degree of competence.

With all that said, it seems the angle calculation is improved in this recent commit https://github.com/mikaelvesavuori/figmagic/commit/a97db337680a45eee4fc7ecbc4b57d619fae3a08