Add Gradients as a variable type

Yes, this is exactly what I need. When can we make a gradient a variable?

Same here. Making a gradient into a variable

I have the same question as GMCRuiz. This would be so helpful. I’m somehow surprised we can’t do that.

If they do this the implicitly accept that styles and variables can’t exist simultaneously. They are forcing a way to use them both to avoid this.

Good morning Figma 🙂

I would like to suggest an improvement for the current interaction between gradients and variables. While assigning a color variable to a gradient stop is useful, it has some limitations.

For example, I have two themes (or “flavors”)—let’s call them Eco and Sport—represented by two variable modes.

In Eco mode, I want to use a linear gradient from blue to red.
In Sport mode, I want to use a radial gradient from yellow to green.

With the current implementation, which requires applying the gradient as a style, I can switch between my two modes, but only the colors change, not the gradient orientation.

There are workarounds, like wrapping the two gradients in component variants and binding the chosen variant to a string that changes with the modes. However, this approach does not scale well.

Ideally, we would have a gradient variable, similar to color variables. A simpler implementation, like the one for effects where number variables can be bound to effect values such as spread, would also be acceptable. In this case, we could bind the orientation (linear, radial, angular, etc.) as a string variable. Although this wouldn’t allow for different numbers of color stops, it would at least enable switching between gradient orientations, which would be a significant improvement.

Maybe you also ran into this limitation
Best,
Hendrik

Hey @Hendrik_Cammann, thanks for the feedback!

I’ll pass this onto our team for future consideration.

Same - working on a project where I’m hoping to toggle gradients based on colors defined in varying modes. Gradient color types alltogether would be nice. But applying them to a color style now won’t toggle between modes 🤔

While we’re making requests 😅 Same issue with fonts. I have some components that will display differently per variable modes - can’t figure our how I can define text styles of the same name and toggle them per mode.

That’s it.

We’re in a somewhat similar situation. We work with multiple brands in our one design system, and while one brand uses a gradient as the fill on its primary buttons, the others simply use a solid colour.

The existing release for binding colour variables to gradient stops is great! However, it is limited when working with a multi-brand design system. We would like this to be supported so we can assign when a gradient and when a solid colour is used.

I’ve run into the EXACT same issue with our design system. We need the ability to use the same button component across multiple properties but we’re using modes to support the brand variations. I need to be able to use gradients in the brand definitions. @Figma, please update variables to support gradients soon, this is a severe roadblock to using variables and modes to support complex design systems.

Cool but we don’t want style anymore, we want variable. And there are a lot of work to do on variables !! We don’t need a Figma Power Point… Please work on variable instead.

Bumping. This shouldn’t be marked as “Launched”. Variables being applied in styles is great and there are a plethora of workarounds. But now that variables are directly syncing with developers and code, we need more flexibility to make variables viable a long term solution to our products.

So please. Continue fleshing out variables, like adding the ability to create variables that are themselves a gradient.

If anything, let us have a variable be multiple purpose between modes. Maybe for mode 1 it’s simply a colour variable, but let mode 2 be a string instead that is code for a gradient, and let Figma parse that? Then we’re still synced with our developers 1:1

Agree you should remove the Launch because it is not the case. And this is not a solution just a workaround.

+1 here - we need the ability to add gradients for themes.

This has not been launched. We still need the ability to host gradients in the variables i.e. for some brands, the buttons use a gradient and for others, a solid fill. This is just a workaround and doesn’t offer any real value to this particular issue

Checkout maybe this kind of solution

https://www.figma.com/community/file/1295349493892095561

+1 for the need to set a gradient as a variable

Also, setting an opacity to a variable

Also looking for this. We sync variables to code and are maintaining gradients as both a string variable and an effect right now. It would be much simpler to manage this all as variables. Is there a reason that effects and variables are independent? I’d understand if there was an architecture decision that has been made that variables are only to represent “primitive” key / value pairs. It’d just be nice to know if this is under consideration or not.

​@Celine_D Please let’s make this a thing. :) 

Figma has already halfway towards this by accepting variables in gradients. Please also include the gradients as variables. This will make our design system simpler as we have, for example, special buttons in linear gradient (primary/500 to secondary/500), and normal buttons in surface/action (primary/500).

For anyone that wants to replace colors inside of a gradient / text field / drop/inner shadow like figma currently can’t: https://github.com/nimbling/Nimbling_Scripts#replacer-for-figma (It’s under review by the addons team, I just submitted it).