Allow gradients in color variables

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

31 Likes

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

9 Likes

At least allowing variables in gradient fills

6 Likes

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

1 Like

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

6 Likes

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

1 Like

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.

2 Likes

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…

1 Like

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.

1 Like

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

1 Like

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 :slight_smile:

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!

2 Likes

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

4 Likes

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

Same problem here…

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!

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.

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

1 Like

Can somebody share the announcement?