Following. This prevents me from using these features on many of our designs because many have some gradients.
2 Likes
당신은 천재이다. 나는 감탄했다.
Confirming my team needs this for our design system. With opacity fades too.
1 Like
Where was it announced?
3 Likes
First of all, love the new variable system! Simplifies so many of my complex component systems.
However, the big miss for me was not being able to reference color variables in individual points of a gradient style.
Here’s an example of how this simple addition would help:
I have a component which has fixed gradient positions and tokenized logic for the construction of the gradient styles, which swaps out 42 different color themes (why we have 42 themes is a separate discussion haha)
Right now, I am having to create 4 variants for each theme - light-resting, light-pressed, dark-resting, dark-pressed
If I was able to swap out the tokens for the gradient construction, I could set up the 42 themes as modes in the base variable system, and create 4 total variants for the component
Hopefully this functionality can be brought into Figma soon!
4 Likes
yes, a workaround is creating an alpha mask with a colored layer above another colored layer – But this is pretty laborious.
The same goes for the color of the shadow effect.
Yes, laborious, and not code compliant either so it makes it even more complicated to do a developer handoff
1 Like
Yes please, this should be a must! 
Here I had proposed a solution that might work for this use case as well: Creating gradients based on color styles - #13 by Recep_Kutuk
1 Like
1 Like
While the use case you are bringing up is an important one, I think our issues are slightly different here. I want to reference variables to define the gradient style, while you want to define a gradient as a variable. I believe these are slightly different usecases, but equally valid!
Would appreciate if you voted up this issue too 
Yes the issue are very similar, i’m fine with both as long as we can use variables with gradients.
Having the ability to use variables as the points within a gradient would be very useful for my design system. I have a layout for palettes and clients where this would be useful.
Colour Variables are great but we cant use them in gradients - yet 
Similarly if we could have an input box showing the position of the colour stop on the gradient would be amazing for keeping gradients consistent.
#gradients figma #Variables #FeatureRequest
5 Likes
Hi @Mark_McIntyre ,
Thank you for your feedback! You are right, we can’t at this moment.
As the Variable feature is still very new, we’re eager to hear from our community what would help make your experience using Variables even better. I will pass along to our team for consideration.
3 Likes
Yes! I would also vouch for this
Variables awesome so far, can’t wait for a deeper integration with shadows, gradients, within a compound color style, etc. !
1 Like
The way I would like to approach using Variables in gradients is this:
- Have a list of opacities and positions (a ramp) as Number variables that I can reference
- Reference and combine Color Variables with Opacity and Position Variables
- Once the desired Gradient is created, we can lock it down as a Style.
Anyone else have thoughts on how they want to use it?
2 Likes
Plus one for gradients.
Allow the definition of the gradients directly within the variable + modes.
If that isn’t easy within the architecture the second thing I tried before googling is as follows:
- Specify the colours in variables (with modes)
- Create a colour style with the colour variables which has the ramp etc.
- Use the colour style in the file
1 Like