Skip to main content
Lukas_Oppermann
January 29, 2021

Use styles in other styles

  • January 29, 2021
  • 45 replies
  • 9129 views

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?

45 replies

J_Yun1
December 7, 2021

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.

Scott_Ehly
January 14, 2022

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.

Ash.Sharifi
February 28, 2022

Hi Figma!

I am creating a design system and came across the idea if there would be a possibility to have the main colour as the Master style while having instances of that colour into 75%, 50%, 25% & 5% opacity style instances.

Here is an example of colour shading:

I have to create manually all these styles which is a bit of pain when you have to change them at some point. Can you imagine how much pain would it be if the shades had 10% decrement? 9 Styles to update for every colour.

It would be great to have a hierarchy like how I can do it with components where we have _MasterComponent for the design and instance of that instance inside of variants for different states.

I guess the colour style would look like something like this:
Master colour
| 75% Shade of the colour
| 50% Shade of the colour
| 25% Shade of the colour
| 10% Shade of the colour

When I update the Master colour, it should automatically update all the instances below it.

Is there anyone else out there having a similar struggle?

Simon_Tran
March 19, 2022

This!! Really need Figma to update this because this is affecting my Design System. I can’t create different component (button) states without having to unlink the color styles.

Shawn_Willings
March 24, 2022

This would be a tremendously powerful feature, especially for the application of different colors (skinning) to a single design. With the way colors are right now, you can layer fills and add blend modes to them. If you could set fill layers to a color style and then add other custom colored layers above and below, you would then be able to change the main/base color and all other color instances that use that style within its own style would be updated. This would make the creation of tints, shades, and other color palettes so much easier to create, use, and modify. I am currently using the Google Material design library and the idea of recreating all of the color styles is not appealing.

Basically the Purple in the image above should be a color style. The secondary color (the effecting shade) are shades with the luminosity blend mode selected. I should be able to create the 3 different color styles. If the base color is an embedded style then all I would need to do is update my base color and the tonal styles will update.

As you can see in the image above, I have a series of grey scaled tiles with the luminosity blend mode applied, over top of a solid purple rectangle (which represents the base color).

Food for thought.

andrea-hg
Active Member
April 12, 2022

😭 😭 😭 Please do 😭 😭 😭

andrea-hg
Active Member
April 12, 2022

Exactly this.

David_Borresen
April 27, 2022

Please add this feature.

aaron.ellis
April 28, 2022

I see this being particularly useful in a few key areas.

  • Effects (drop shadow, inner shaddow)
  • Gradients

I also see a need for layering as mentioned above. Being able effects is pretty common… background blur and a shadow for example, or compounding shadows of different colors.

Goran2
New Member
May 30, 2022

This would make so much sense for us!