Skip to main content

Our design system uses themed gradients. Would be nice if they could be swapped as easily as the other colors.

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.


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


Can somebody share the announcement?


Following. This prevents me from using these features on many of our designs because many have some gradients.


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


The way I would like to approach using Variables in gradients is this:



  1. Have a list of opacities and positions (a ramp) as Number variables that I can reference

  2. Reference and combine Color Variables with Opacity and Position Variables

  3. 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?


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


당신은 천재이다. 나는 감탄했다.


Confirming my team needs this for our design system. With opacity fades too.


+1 on using variables in gradients.


For now, it is challenging to use gradients in terms of variables, but a style referencing a variable is valuable since gradients can change in light/dark themes or other themes.


The same could go for effects like shadows.


Ohh I’d love that. Sadly I’m out of votes so leaving a comment here instead 😃

+1



Where was it announced?


+1 for gradient variables


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.


Here: https://youtu.be/M0NU5QFLCl4?si=Cb1XoGTLpGIiqClj&t=2469


Isn’t this… obvious? 😀


we need this soon


yes, please!


Can’t wait for Figma to implement this! waits faster


Here is a solution using variables that mimics gradients: https://www.figma.com/community/file/1295349493892095561/gradients-with-variables



make it soon~~~~~~~


I want to:



  • define a gradient variable as a that uses other color variables as color stops

  • also want to apply an opacity for each color stop


Hey all this would be really rad +1 I’m running into this issue right now where I want to make everything based on a variable color but because gradients are a big part of the design i’m working on right now I can’t do this atm