Since the introduction of variables, collaboration between programmers and designers in our company has significantly improved. We want to express our gratitude for this fantastic feature. We’re eagerly anticipating upcoming features, such as the ability to set variables within strokes.

Many frontend design systems and frameworks rely on SCSS, where it’s common practice to automatically darken or lighten a variety of colors based on the original color using the tint() and shade() functions. It would be fantastic if this could also be achieved within the context of variables. Currently, this only works in one direction. The tint() function blends the current color with white proportionally, which can be closely approximated with opacity. However, there is currently no straightforward way to apply the shade() function. It would be great if Figma could support this when setting variables.

Here’s an example: (key: value) primary: #0d6efd primary-dark: shade(primary, 20%) = Primary color but 20% darker (mixed with black)