Tint and shade functions for colors

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)

It would be nice to have indeed.

In the meantime, we can work around the problem with some design components and a bit of documentation. Check this one out - https://www.figma.com/file/RK1eViAGtxSbzSUjLQWQsT

It is my take on the issue. These are very simple components that I can layer anywhere to get the desired behaviour. And the documentation bit with some code snippets should do the trick for the dev guys.