Working with colours is a vital part of the creative process in product design. Creating different shades and tints is essential when making design systems. However, traditional methods can be slow and may lead to uneven results. In this case study, I will share the challenges of colour generation and the development of a Figma plugin that simplifies the process, making it more efficient and accurate.

‍

‍

The Color Challenge

Many designers face difficulties adjusting colour transparency values against white or black backgrounds. This simple but tiresome process often results poorly and takes up much time. Repeating the process for each colour can also lead to consistency in the design.

‍

Working Together for a Better Solution

To find a more efficient and accurate way to generate colour variations, I researched and realised the need for a tool that easily mixes colours with white (tint) or black (shade) at specific intervals. I teamed up with my developer friend, Seyi, to make this solution a reality.

We worked together to develop a method for adding whites and blacks accurately at intervals. We shared our idea with our peers and got feedback, which helped us improve our approach. Once we were happy with the results, I designed the user interface while Seyi worked on turning our idea into a functional Figma plugin. This project was also a great learning experience.

‍

Outcomes

The plugin currently has almost about 30k 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.

‍

Features and Mentions

Five Plugins we love by Goodpatch.

Recommended by UI.Martin

‍

Future updates

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