Skip to main content

Tint and shade functions for colors

  • September 22, 2023
  • 1 reply
  • 2035 views

dotling

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)

1 reply

Pavel_Kiselev
  • Power Member
  • 438 replies
  • September 24, 2023

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings