Skip to main content

LAUNCHED: Bind color variables to gradients


Erik_Lindsay1

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

This topic has been closed for comments

66 replies

Equinusocio

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


Equinusocio

At least allowing variables in gradient fills


sho.ro
  • 5 replies
  • June 22, 2023

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!


recepkutuk

ahmed_nawaz

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


Caleb_Panza

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!


Daniel_DWM

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.


Thomas_Renon

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


sho.ro
  • 5 replies
  • June 23, 2023

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


sho.ro
  • 5 replies
  • June 23, 2023

Equinusocio

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


Larry_Gerard

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.


Larry_Gerard

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…


Equinusocio

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.


Natalie_Doronina

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


Same problem here…


Larry_Gerard

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 🙂


ileb
  • 2 replies
  • June 29, 2023

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?


Thomas_Renon

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


Mark_McIntyre

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


Equinusocio

Equinusocio

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings