Is there any plan to be able to create the gradient itself as a variable? For example, if I wanted some themes to have a solid background variable but others to have a gradient?
Yes, this is exactly what I need. When can we make a gradient a variable?
1 Like
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.
1 Like
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
5 Likes
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.
1 Like
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.
1 Like
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.
2 Likes
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
6 Likes
Agree you should remove the Launch because it is not the case. And this is not a solution just a workaround.
2 Likes
+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