+1, it would be very helpful!
I just explored a solution. You can use a BASE colour and then apply styles this way. It’s also useful for changing an entire theme of a design at once.
You could make the shades different variants of the same component and swap them easily as states. Changing the base colour on the component would allow you to theme it.
I have found that “Figma Design Token” plugin works well to do this and has good video tutorial on YouTube.
This is a very interesting approach, that’s for sharing it I will give it a try and see if it fits for me as well
❤️
This is doable in CSS, so it makes sense to include this in Figma. For example:
:root {
--color-primary: gray;
--color-background: var(--color-primary);
}
I don’t personally like this because it distances itself from how we would use CSS variables on the web
I would really appreciate a way to specify dependent colors, based on HSL and/or HSB/V and possibility to export that to CSS vars.
Last night I couldn’t sleep. I thought about how great it would be to implement nested colors in figma. It’s great that I’m not the only one. We need this feature! 😁
We need this feature))) Figma please 🙏
No this feature
I’m against
I don’t like it
I’m against
Yes, please! This would be an excellent foundation for design tokens!
Please implement this 🙂 When creating a new color style allow me the option to choose from existing color styles. This is one thing I do miss from Sketch.
I would like this especially so I can use different opacities based on the same primary color. For example if I want to make a primary color frame, and on hover I want it to become semi-transparent, I have to detach the style to reduce the opacity… I would much rather be able to modify the transparency, or indeed be able to create a new “Primary - 50% opacity” style which always uses the Primary color.
What effect is this? Would help me a lot
It would indeed be great, if one could base a Color Style to be a tint (darker or lighter) of another Color Style. Changing a theme would be so much easier with that extra relationship.
Using a layer’s Fill opacity/transparancy to at least achieve lighter appearances, looks initially the same but is not effective when using elements with such a setting on other backgrounds. Adding white or black layers underneath is a workaround, but not very practical or structurally elegant.
Popular software like Adobe Illustrator and InDesign have always been supporting the dependency of lighter tinted Swatches on a base color swatch. It would be great if Figma would at least offer the same approach, and even go beyond this by offering darker tints as well !
Most designers are not sure how to define the separately and scientifically calculated values for Hue, Saturation, and Brightness/Lightness in the HSL/HSB settings, to reflect the brighter/lighter/darker perception of a color.
I would love this for text styles as well!
I believe this request is obsolete since we now have variables.
