Figma Support Forum

Use styles in other styles

Problem
Currently you can’t use color styles in other styles like grid or effect styles.
However this is very helpful for building design systems. Otherwise when changing a color that is used in effect styles you have to manually change it in all effect styles (which is a lot of work and can lead to bugs by forgetting it).

Solution
One possible solution would be to allow us to use color styles within the other styles.

Am I the only person who feels this pain or do others run into this as well?

18 Likes

If I’m reading this right, you mean something like color styles based on other color styles right? If so, I’m all for it. Something similar to Sketch’s color variables would be immensely helpful.

Oftentimes I set my color styles to have regular names assigned to the initial color color set (primary blue, primary yellow, secondary black, etc…). Then I have color styles set to specific UI elements such as text (text-heading, text-body, text-link) that are based on the main colors. But you have to create a separate color style; which make updating/changing colors in the future very time-consuming and error-prone.

Color variables would allow us to create a main style of colors and then create other granular styles more efficiently.

6 Likes

Being able to create tints and shades without having to create a brand new color style would be amazing as well.

5 Likes

Exactly, that is a very common case. So is creating shadows with your color variables.

2 Likes

Title says it all really.

By having a default color, and adding a white or black opacity layer over it, shades and tints can be generated. Nesting color styles would allow users to quickly change every tint/shade used in their file from one color swap.

2 Likes

I feel like this could work more easily if you could apply multiple fill styles to an element. but definitely agree. you should also be able to access colour styles from the selection window too.

My use case would be theming. Being able to nest colors into semantic containers would be really helpful to having a single source of truth for base colors while maintaining actual color name definitions used in code (Android in this case).

5 Likes

Yes, exactly the same here. Would be such a great feature!

2 Likes

We’ve been looking at Figma Tokens as a possibility but like others are concerned about relying on a plug-in for Production work in our Design System. Having the ability to have styles drive other styles would better match our user’s workflow, to have a baseline set of say brand colors, that drive myriad usage colors, that would automagically change at least the hex value (leaving other styles like say opacity for a modal set the same) if one from the brand was updated. The mapping is something that’s necessary for light/dark mode as well as theme switching from one brand to another. Does Figma have any plans to add this to the roadmap in 2021?

3 Likes

I agree with the need, but feel this should be wrapped into Design Token support in Figma - it covers this and a lot more as well.

1 Like

+1
For design systems and, more specifically design tokens this is so important! Massively time consuming going through and changing all individual colour (and type!!) styles across all the different tokens (primary button hover, disabled, etc etc etc) whilst they largely share all of the same few core colours (+ respective tints/shades).

1 Like

Is this at all in the works? We have a pretty large design system and we deal with state-based color variations by overlaying “Action Colors”. If we can nest multiple color styles, the design intent would be more clearly communicated to engineering. Right now, we have to create individual state color styles with stacked raw hex values.

So if you have hover for your primary, secondary, success, danger, etc etc you have to create “hover” color for all those rather than just stacking each color style with an “action-hover” color on top.

For users who work with a very large design system, we need ways to control styles on an atomic level.

Hopefully, this is just an oversight that could be easily corrected.
They already have an interface for selecting colors by using color styles.

The heart of this request is simply to access color styles from any part of the interface from which one might choose/assign a color.

In our case, developers use color variables that they take directly from the design specs. This is something we could never do in XD and were excited about in Figma. However, if effects use color, but do not access the styles by name, there is no way for developers to glean the color variable (style name) from the effects spec.

I’m fairly new to Figma. Recent convert from the hideous Adobe XD.
Does Figma provide any feedback on feedback?

In other words, do these feature requests just sit here unattended with no “light at the end of the tunnel” response from Figma, or do they periodically let us know that something may be in the works?

This is a very reasonable request that has been languishing for a year now. It would be nice to know if anyone from Figma has acknowledge it.

1 Like