Allow changing transparency of styles and variables

This would be a nice addition that would certainly help with increasing maintainability of a design system. This is what I am currently running into as well; I’d like to set a fill for a layer, but then with a different transparency than the (opaque) color variable.

It is a little hard to imagine how this would look like, but I think that maybe aliases of variables could be able to work like component instance overrides. Anything will be inherited from the “source” variable up to the point that you start changing properties of an alias variable. The changed properties would not adapt to changes of the “source” variable.

I am curious what anyone else would think of this approach, maybe it’s worth considering by the Figma team to make variables more adaptable. 🙂

I just came to realize, the distinction between styles and variables is explained here: https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes#Styles_and_variables.

To quote the documentation:

A style can be used for properties that are made up of multiple values, such as gradients or shadows. Although styles cannot reference other styles, they can reference variables.

Variables are made up of individual raw values, such as #E5E5E5 in one mode and #888888 in another. The ability to switch between contexts can only be done using modes for variables. In addition, variables can be aliased to create complex design token structures.

This distinction between styles and variables might solve the issue. However, at this point, it not possible to adjust a color’s transparency in color styles. If I interpret the intended distinction between styles and variables, it would make sense to actually be able to adjust a color’s transparency when a color style uses a color variable.

What’s more, at this point we can’t utilize Variables inside Styles other than Color Styles (which allow the user to select Color type Variables). It would make sense to make this consistent and add variables for Text Styles and Effect Styles, too.

Maybe this is implicitly part of the roadmap, as mentioned below, but I’m not sure about it:

Also, I believe that during Config, Dylan mentioned that variables would become available in more property fields over time? At least this gives us some pseudo-perspective, but I would like to drop the additional two cents about interconnecting Styles and Variables more deeply anyway. 😉

Also important for variables is to be able to specify HSLA and RGBA as the color format so that when we’re organizing our colors systematically with those formats, they can remain human-readable in the variables interface.

I really hope this gets into Figma soon because we need it if we’re expected to convert our design systems to depend on variables and use opacity values as variables for colors.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.