Allow gradients in color variables

+1 on using variables in gradients.

For now, it is challenging to use gradients in terms of variables, but a style referencing a variable is valuable since gradients can change in light/dark themes or other themes.

The same could go for effects like shadows.

1 Like

Ohh I’d love that. Sadly I’m out of votes so leaving a comment here instead :smiley:
+1

+1 for gradient variables

Isn’t this… obvious? :grinning:

we need this soon

yes, please!

Can’t wait for Figma to implement this! waits faster

1 Like

Here is a solution using variables that mimics gradients: https://www.figma.com/community/file/1295349493892095561/gradients-with-variables

1 Like

make it soon~~~~~~~

1 Like

I want to:

  • define a gradient variable as a that uses other color variables as color stops
  • also want to apply an opacity for each color stop

Hey all this would be really rad +1 I’m running into this issue right now where I want to make everything based on a variable color but because gradients are a big part of the design i’m working on right now I can’t do this atm

1 Like

+1 - I have a design system with multiple themes and each theme has a set of background of different color gradients. I’m not able to shift to variables from styles until we’ll have one single variable to handle a gradient. Which will allow me to quickly switch between themes.

I solved this by creating variables for each gradient stop, so each theme has like a gradient-green-start and gradient-green-end

but now they are saying typography is the next focus without mentioning anything about gradient at all: https://www.figma.com/blog/all-your-questions-about-variables-answered/

+1 for gradients and variable integration.

I wouldn’t say it’s not feasible, for me it’s quite the opposite. In css each element has background-image prop which is like an extra layer you can put on top of the solid fill. So you can mix colors using alpha mask and get something like this

Other way around is to simple gradient as background image with a blend mode like overlay. I use white-to-black for deeper gradients, white-to-transparent or black-to-transparent to produce a variety of gradients.

It’s even more flexible and gives decent single color gradients

And here is another example made with Tailwind CSS

https://namad.github.io/source-foundation-docs/#gradients

I’m in huge favor of the latter as I can make nice gradient out of thin air.

Both ways are easy to componentise in Figma. Also it’s fairly easy to document so your devs won’t have troubles to get it done.

PS. Also I tried different blend modes in CSS. They are not exactly the same as in Figma, but good enough to have it in design work.

I got them in Figma, works just fine.

Great implementation! Our product team is primarily mobile-first, so we run into a lot of the native limitations of Android in rendering complex graphics, including issues with blend modes.

However, for the time being we are solving this by working closely with dev teams to implement our styles as intended in the code, and using opacity masks and blend modes to simulate the components on Figma.

(The other obvious solution was to reduce our 42 variations to just 6, haha)

+1 on this one!

bump this! will like to see it in future release

While gradients as variables would be nice, I’d rather have the option to put variables into gradients.
That way you wouldn’t need to change every possible gradient that include already existing colors.

2 Likes