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.