Use styles in other styles

This would make so much sense for us!

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

1 Like

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!

We need this feature asap!
image

4 Likes

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

1 Like

+1, need this feature asap.

+1, it would be very helpful!

2 Likes

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

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.

1 Like

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
:heart:

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