Add support for radial gradients

[tjmusser]

Is your feature request related to a problem? Please describe. Currently figmagic seems to pass over or omit a color token if it has a radial gradient fill type. Linear gradients appear to work fine.

Describe the solution you'd like It would be great if a color had a radial gradient that figmagic could support that as a token output value.

[mikaelvesavuori]

Hey @tjmusser.

Correct, only linear gradients were supported. This was documented in the dedicated elements README but seemingly not in the main one.

However, I did just release support for radial gradients in 4.2.7, so do try it out.

[tjmusser]

Hey thanks @mikaelvesavuori ! This is just what I needed

[tjmusser]

@mikaelvesavuori one thing I did notice is that the gradient doesn't appear to be an exact match.

Figma shows this as the CSS for a gradient

radial-gradient(129.7% 129.7% at 37.96% -17.61%, #6284F8 0%, #5276EB 22.51%, #5276EB 56.92%, #D2A1C5 100%);

While figmagic has that same gradient output as:

radial-gradient(circle, rgba(98, 132, 248, 1) 0%, rgba(82, 118, 235, 1) 23%, rgba(82, 118, 235, 1) 57%, rgba(210, 161, 197, 1) 100%)

The circle size and co-ordinates appear to change.

[mikaelvesavuori]

Hi again, it seems my naive implementation falls on the first part where we need to calculate the shape and size of the gradient. It was hardcoded to circle, but this is of course broken given a shape where the gradient does not originate from the center.

My remaining piece now seems to be to figure out how we can calculate the first two values (129.7% 129.7 in your example) from Figma since those do not seem to be directly present in the JSON we pull from the API. The secondary couple of values however is present.

See https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()

[tjmusser]

@mikaelvesavuori I'm not sure if this helps but I'm including the json from the files API for this exact gradient. It's speculatioon on my part but perhaps it is calculated in some way using the gradientHandlePositions values as a ratio compared against the height/width of the absoluteBoundingBox in the json response.

Also included is a screenshot of this same gradient in Figma. It expands outside the box uniformly in a circle.

{
  "id": "2631:9025",
  "name": "Backgrounds/Core Gradient",
  "type": "RECTANGLE",
  "blendMode": "PASS_THROUGH",
  "absoluteBoundingBox": {
    "x": -1650.0,
    "y": -1033.0,
    "width": 120.0,
    "height": 120.0
  },
  "preserveRatio": true,
  "constraints": {
    "vertical": "TOP",
    "horizontal": "LEFT"
  },
  "fills": [
    {
      "blendMode": "NORMAL",
      "type": "GRADIENT_RADIAL",
      "gradientHandlePositions": [
        {
          "x": 0.37963923004588951,
          "y": -0.17608905954948240
        },
        {
          "x": 0.53427832078498128,
          "y": 1.1209453230683617
        },
        {
          "x": -0.91739525745239492,
          "y": 0.32380704136536220
        }
      ],
      "gradientStops": [
        {
          "color": {
            "r": 0.38431373238563538,
            "g": 0.51764708757400513,
            "b": 0.97254902124404907,
            "a": 1.0
          },
          "position": 0.0
        },
        {
          "color": {
            "r": 0.32156863808631897,
            "g": 0.46274510025978088,
            "b": 0.92156863212585449,
            "a": 1.0
          },
          "position": 0.22509866952896118
        },
        {
          "color": {
            "r": 0.32156863808631897,
            "g": 0.46274510025978088,
            "b": 0.92156863212585449,
            "a": 1.0
          },
          "position": 0.56917303800582886
        },
        {
          "color": {
            "r": 0.82352942228317261,
            "g": 0.63137257099151611,
            "b": 0.77254903316497803,
            "a": 1.0
          },
          "position": 1.0
        }
      ]
    }
  ],
  "strokes": [],
  "strokeWeight": 1.0,
  "strokeAlign": "INSIDE",
  "styles": {
    "fill": "701:3247"
  },
  "effects": [],
  "cornerRadius": 4.0,
  "rectangleCornerRadii": [
    4.0,
    4.0,
    4.0,
    4.0
  ]
}

[mikaelvesavuori]

This should now be improved and was released in 4.2.8.

[tjmusser]

Thank you @mikaelvesavuori ! I will have to check it out :)