Tints and shades — a Figma plugin

The Tints and Shades plugin is a personal project. It is the easiest way to generate lighter and darker variations of any colour.

The idea of Tints and Shades was developed to help designers easily generate shades and tints of colours quickly and accurately.

‍

As a product designer, working with colours is essential to my job. Working with colours also means generating different shades and tints of the same colours when creating design systems.

One popular method was adjusting transparency values at different intervals against a white or black background to generate a lighter or darker version of the colour. This method is not so accurate and also quite time-consuming because one would have to repeat the same process for all the colours.

‍

I started doing some research to figure out a more accurate and quickest way to generate these colours. A tint is a mixture of a colour with white, which increases lightness, while a shade is a mixture with black, which increases darkness.

I had a brief call with my friend — Seyi, who is a developer, to figure out how the engineering part of this would look as that would be the bulk of the work. We were able to find a way to accurately add whites and blacks at intervals. We also got feedback from a couple of our friends which helped us adjust our values.

As soon as we were satisfied with the result, I began the UI design while Seyi figured out how to make this into a plugin — it was a learning experience.

‍

The plugin currently has over 15k installs on the Figma community. The plugin has been able to cut back the time used in manually generating these variations by a lot.

What would have taken about 10 minutes can now be done in less than a minute.

‍

‍

‍

I have gotten some feedback on how to make the plugin work better and these would be designed into the next version of the plugin.

‍

I have learnt more about colours and a more accurate way to generate these variations. The UI would also be redesigned to look better and load faster, it would also have an eye picker tool to allow designers quickly pick colours from their canvas.

‍

‍

Try out Tints and Shades