Auto-generate color variations

From one color you can generate different variations to make your color palette automatic.

In the color variable description you can use darken, lighten and trans.

Auto-generate color variations figma

Examples:

darken($Primary, 40)
lighten($Primary, 95)
trans($Primary, 10)

To apply the calculations remember to go to variable calculations in the plugin.

HSL calculations

hsl color operations in figma

If you enjoy working with the HSL color model and understand how it works, you’ll be able to perform operations or individually replace each of its components: hue, saturation, and lightness.

This gives you greater flexibility and control when manipulating colors, and it can also be used as an optional method for calculating lighter (lighten) or darker (darken) variations of a base color.

Examples for calculating lighten and darken with HSL:

$primary(H, S, L*1.5)
$primary(H, S, L/1.5)
$primary(H, S, L+5)
$primary(H, S, L-5)
$primary(H, S, L=30)