LAUNCHED: Bind color variables to gradients

+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.

• 1 To the Topic 😃 Add it pls Figma 😃

+1 for gradient / variable integration. Real annoyance for us at the moment

• 1 here. Figma, add gradient support to color variables.

Hi guys! This feature —binding color variables to gradients—was officially announced at Figma’s Framework 2024 event last week, along with support for typography variables. 🙂

You can find the playground file here: https://www.figma.com/community/file/1234936397107899445

Hey All, @Gyongy is correct! We launched the ability to bind variables to gradients on April 16th! 🎉

You can now apply a color variable to the different gradient stops. And then, you can create a style for that gradient, which will then update across different modes.

6 posts were merged into an existing topic: Add Gradients as a variable type

4 posts were merged into an existing topic: Add Gradients as a variable type