Tints and shades — a Figma plugin
Visit project
In product design, working with colours is more than just choosing appealing hues—it’s about maintaining consistency and efficiency. Creating different shades and tints is fundamental when building scalable design systems, but the traditional methods are tedious. Designers often struggle with adjusting transparency values manually, repeatedly tweaking colours against black and white backgrounds, only to end up with inconsistent results. This process isn’t just time-consuming; it’s frustrating.
I wanted a better way—a faster, more accurate method for generating colour variations that would free designers from this manual, error-prone workflow.
.png)
I started by researching existing tools and methods for creating tints and shades. Most relied on manual adjustments or external generators, which weren’t seamlessly integrated into Figma’s workflow. I realized what designers truly needed: a plugin that could effortlessly generate tints (by mixing colours with white) and shades (by mixing colours with black) at precise intervals, directly within Figma.
To bring this idea to life, I partnered with my developer friend, Seyi. We collaborated on a systematic approach to accurately apply tints and shades at controlled increments. As we built our prototype, we sought feedback from fellow designers, refining our approach based on real-world use cases. Once we had a working model, I focused on designing an intuitive user interface, while Seyi handled the technical implementation.
The result was Tints and Shades, a Figma plugin that simplifies colour generation in a way that is both efficient and precise. What used to take designers 10 minutes now takes less than a minute—a dramatic improvement in workflow efficiency.
Since launching on the Figma Community, Tints and Shades has gained nearly 30,000 installs. It’s been featured in Goodpatch’s “Five Plugins We Love” and recommended by UI.Martin, solidifying its place as an essential tool for designers looking to streamline their colour workflows.
Five Plugins we love by Goodpatch.
While the plugin has been well-received, there’s always room for improvement. Feedback from users has highlighted new ways to enhance functionality, and these insights are shaping the next version. Future updates will include:
Tints and Shades has already helped thousands of designers speed up their workflow—now, it can help you too. Try it out in the Figma Community and see the difference for yourself.
Try out Tints and Shades
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.
