Gradient color support

[ROG3R-DEV]

Hello, first I would like to say that this plugin is fantastic and thanks to the developer for maintaining it!

I noticed that when trying to export gradient colors the object is empty {}

One suggestion is that when it is gradient the behavior is

"MY_GRADIENT_COLOR": ["#ffffff","#111111"]

[jsakas]

Hi @ROG3R-DEV - thanks for the feedback.

I looked into this, and it seems like there will be some complexity in converting the GradientPaintStyle interface into a raw CSS value. I reached out to their Community forum to see if there could be an API to do this, since Figma have already done this work in their software. I think it would be tedious to reverse engineer their transform matrix into an angle & color stops.

Here is one example of a gradient that is rotated and scaled.

background: linear-gradient(69.73deg, #D9D9D9 -17.8%, rgba(217, 217, 217, 0) 118.74%);

// figma internal representation - `GradientPaintStyle`
{
    "type": "GRADIENT_LINEAR",
    "visible": true,
    "opacity": 1,
    "blendMode": "NORMAL",
    "gradientStops": [
        {
            "color": {
                "r": 0.8509804010391235,
                "g": 0.8509804010391235,
                "b": 0.8509804010391235,
                "a": 1
            },
            "position": 0
        },
        {
            "color": {
                "r": 0.8509804010391235,
                "g": 0.8509804010391235,
                "b": 0.8509804010391235,
                "a": 0
            },
            "position": 1
        }
    ],
    "gradientTransform": [
        [
            0.5348186492919922,
            -0.19756440818309784,
            0.32792696356773376
        ],
        [
            0.5108506679534912,
            0.8009988069534302,
            -0.1419539451599121
        ]
    ]
}