Same boat, we can’t migrate our themes to variables because of themed gradients (gradients that use colors from other variants)

At least allowing variables in gradient fills

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!

I guess this is related to this idea: Creating gradients based on color styles - #13 by Recep_Kutuk

This is a must-have for design variables. Please add this ASAP

Hey there! I was just playing around with variables and I realized that while it’s great that we can stack them on top of each other in Color Styles, I’m missing the ability to create gradients that reference variables. I tried to select a variable to place in a gradient, but it didn’t work.

I think it would be super useful if we could select a gradient and add as many break points as we want, then have these break points either reference a variable within our variable library or be a raw color value. This would be so powerful for masks and fades, and it would make it easier to update brand colors or reuse components in new projects. Do you think we could get this feature added? Let me know what you think!

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.

they said it was not available for gradients, this is where styles should be still used. I hope in the future they’ll come with some upgrades as well.

They might have technical challenges to generate a potential clean code from variables in a gradient.

Update: it’s coming next, just announced

Yes, laborious, and not code compliant either so it makes it even more complicated to do a developer handoff

I asked for the same feature here: Allow referencing of color variables for points of gradient values - Share an idea - Figma Community Forum

Is also a bug, because now we can’t apply gradients from shared libraries since the option is gone.

Not the best solution but I usually solve it by playing with multiple layers and a mask.

You can still transform it in a component and re-use it from a project to another.

In the example above, the “color” layers are using styles and the gradient is masking the top color. Then you can decide to have a color underneath or not…

We tried the same thing but we figured out that we often need to reposition the gradient based on usage and the mask method is really blocking on this.

The variable gradient is in the Figma announcement. We need to wait for updates this year.

Same problem here…

FYI, you can still modify the gradient as it’s not linked to a style or a variable. Just that the gradient itself isn’t tokenized… Will be better natively for sure 🙂

Is there any way to make gradients switch when moving a frame into a new variable-mode-section? Or to just apply variables to values from the Gradient? Another thing I tried was to add the gradients to different component variants. But again, as far as I know there is no way to make a component switch its variant based on variable mode values? I’d love if anybody could help or forward this “idea” if its not possible by now!

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

Great news, do you have the source of the announcement made by figma?

They announced it in one of the video at config but didn’t mention when though.

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

Please vote here

Allow gradients in color variables - Share an idea - Figma Community Forum

We can’t also use variables inside effects like shadows… which is another blocking missing feature because using modes for theming requires everywhere we can set a color should also allow a color variable