Add support for multiple fills (gradients, solids)

[Poimen]

Hi there,

We have a number of color styles that use multiple properties for gradients. By this I mean, when creating the gradient, we create 2 different properties for the color style. Figma generates the following css for this:

background: linear-gradient(0deg, rgba(40, 40, 40, 0.12), rgba(40, 40, 40, 0.12)), linear-gradient(90deg, #009677 0%, #60B848 100%);

When importing this style into Figma Tokens, these colors are "ignored".

It seems like gradients were added recently(?), so unsure if this is a known limitation or not.

Is there a way (other than manually adding a token) to import these gradients?

[six7]

This is unfortunately a known limitation for now and is also affecting all other tokens. The plugin currently only works with one fill, not multiple.

We have been talking about adding support for multiples though! It could possibly be written like this in the JSON [#ffffff, #000000] and have Figma-like UI in the visual editor.

I can't promise anything yet on when that issue will be tackled.

[AlexeyNovik]

May be I am late with the question, but I see right now, that figma styles allow to crate multiple fills. Is it still a limitation?

[six7]

Yes, there's still a limitation in place in the plugin. You can only import fills with a single fill.

There will be initial support for multiple box shadows in V68 or V69.

Colors and Gradients is something I'm not too sure about. How would that translate to code? There's no concept of multiple fills in CSS.

[Poimen]

@six7 there are stacking gradients - which I believe is being applied here.

So you could do:

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

and each linear gradient would be applied top-to-bottom stacking order.

The general use case is for alpha on a gradient.

HTH

[six7]

Oh good point! But we couldn't do anything for solid fills, could we?

[Poimen]

Not directly, no.

Figma seems to apply a linear gradient with an alpha channel when there are more than one:

background: linear-gradient(0deg, rgba(98, 71, 204, 0.56), rgba(98, 71, 204, 0.56)), #FF6D6D;

So the final #FF6D6D is the solid color, and the linear gradient applies the alpha color with any other color selection.

This way you could have 2 "solid" fills but internally to Figma, it applies a linear gradient as the final css. I'm not sure what the API does in this situation - it could report solid & linear, or solid & solid. In the above case, both colors are set to solid, but Figma generates linear gradient + solid fill.

I would need to checkout the actual API to see what the internals are doing when it comes to the plugin...

[six7]

As multiple boxShadows will be coming in V69 I'm changing title here to reflect that only fills are left (but those are not being done in V69)

[AlexeyNovik]

Thanks for updates!

[ianmurchison]

We are also in need of this functionality. We're using blendColors to layer our tokens in code.

This is what it looks like for us right now. The first colour must be opaque, so it's the base colour and we're layering on top of that and blending. blendColors(DARK_GREY_350,alpha(APPLE_GREEN_200, OPACITY_24));

[rbosker]

linking related issue, which will be planned for October iteration: https://github.com/six7/figma-tokens/issues/1166

[alexkovachevic]

Any update on this?

[4amraziz]

any update yet about multiple fills color ?