The Tints and Shades Generator at maketintsandshades.com is a useful tool for expanding core brand colors into a full palette of lighter and darker variations. What many designers may not know is that it also has a Figma plugin — which eliminates the back-and-forth between the browser and Figma entirely.
Installing the Plugin
In Figma, go to Plugins and select Manage Plugins. Search for “Tint and Shade Generator” and install the one with the orange-pink gradient icon. Once installed, it will be accessible directly from the Plugins dropdown menu in any file.
Generating Tints and Shades Inside Figma
Open the plugin from the Plugins menu. Use the color dropper inside the plugin to sample colors directly from your Figma file — a logo, an existing swatch, or any element on the canvas. Alternatively, paste hex codes in manually. Multiple colors can be entered at once, separated by spaces.
Before generating, configure the options:
- Choose between 5, 10, or 20 swatches per color
- Toggle whether to auto-create Figma color styles (skip this if you use color variables instead of styles)
- Optionally include complementary, analogous, split-complementary, or triadic colors
- Toggle the hashtag prefix on hex codes on or off
- Enable a dark mode preview of the swatch table if needed
Click Make Tints and Shades. The plugin drops a swatch frame onto the canvas — just drag it clear of any existing frames and close the plugin.
Applying the Swatches to Color Variables
With the tints and shades now sitting directly on the canvas, updating color variables is straightforward. Open the Variables panel, select a variable, activate the eyedropper, and click the corresponding swatch. The variable updates immediately.
A practical approach for most brand palettes:
- Light: pick from around the 40–50% mark on the tint scale
- Extra light: pick from the lightest end of the tint scale
- Dark: pick from just past the midpoint on the shade scale, rather than the very darkest end
Repeat this process for each core brand color and its associated variables.
Cleaning Up
Once the color variables are updated, the tints and shades frame can be deleted from the canvas. Its only purpose is as a reference during the variable-building process — there’s no need to keep it in the file once that work is done.
The main benefit of the plugin over the web tool is staying inside Figma throughout the entire process. No switching between browser tabs, no copying and pasting hex codes manually — just the eyedropper and the variables panel.
