Use styles in other styles

Forum|Forum|5 years ago
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?

Share an idea

Show previous replies

Vesno

this would be super helpful - immense help when creating a design system and sharing it with devs

Marc7

For it will make sense to can use style colors to create another one. For example, in code, I have neutrals and branding colors as base colors and these CSS variables are used to create other variables → --xx-color-text-primary: --neutral-100; This will be amazing!

Glenn3

We need this feature asap!

Ludwig_T

New Member

Nested Styles are a must for anyone making a design system.

Zack_Davenport

+1, need this feature asap.

Whatislove

+1, it would be very helpful!

MFR

My solution might help: Figma BASE colours and THEME. - YouTube

MFR

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.

8c3034644c915ba4ea40de5cada56ffe65d386c3.zip