Modified Colors (pro) | Tokens Studio for Figma

Modified Colors

Color Modifiers allow you to easily create consistent, scalable color systems by adjusting and blending colors with fine-grained control within Tokens Studio.

Modifying your Color Tokens is a powerful way to create dynamic color schemes.

For example:

Generate a color ramp from a single 'base color'.
Introduce subtle variations between interactive states.

How to use color modifiers

In the Color Token form, define your Token Name and assign the Token Value by referencing another Color Token.

The Token you've referenced is known as the base color in the rest of this guide.

Select the Add new modifier button on the right side of the Modify label.

Choose your desired color space:
- LCH
- SRGB
- P3
- HSL
Choose your desired modifier
Define the modification amount by entering in a number between 0 and 1 based on your desired effect.
Be sure to Save your new modified Color Token

Modify via Color Picker

You can also use the Color Modifier (pro feature) with the Color Picker tool in the plugin by Selecting the color swatch to the left of the Token Value Input.

Available modifiers

The plugin currently supports four popular types of modifications to Color Tokens.

Modifier

Description

Increases the lightness (luminosity) of the base color by your chosen value.

Reduces the lightness (luminosity) of the base color by your chosen value.

Adjusts the opacity of the base color by your chosen value, often reducing it to make the color more transparent.

Combines your base color with another color, allowing you to control the proportion of each color in the mix.

Lighten

The lighten modifier increased the lightness (luminosity) of the base color by defining a numeric value that represents a percentage of adjustment.

0 = no change in lightness (0%)
0.5 = 50% increased lightness
1 = 100% increased lightness,
- which significantly increases the lightness but does not necessarily make the color white.
- The maximum lightness is usually capped to maintain the integrity of the color's hue and saturation.

Darken

The darken modifier reduces the lightness (luminosity) of the base color by defining a numeric value that represents a percentage of adjustments.

0 = no change in lightness (0%)
0.5 = 50% reduced lightness
1 = 100% reduced lightness,
- which significantly darkens the color, but does not necessarily make the color black.
- The maximum darkness is usually capped to maintain the integrity of the color's hue and saturation.

Alpha

The alpha modifier adjusts the opacity of the base color by defining a numeric value that represents a percentage of adjustment for fine-grained control of transparency.

0 = fully transparent (0%), making the color invisible
0.5 = 50% opacity, making the color semi-transparent
1 = full opacity (100%), the color appears 'solid'

Mix

The mix modifier combines the base color with another color token by defining a numeric value that represents the proportion of the mix for fine-grained control over the balance between the two colors.

0 = only the base color (0% of the mixed color)
0.5 = an equal mix of both colors (50% base color, 50% mixed color)
1 = only the mixed color (100% of the mixed color)

Limitations of modified colors

There are some known limitations with Modified Color Tokens.

Exporting to Figma as Variables looses references

Figma Variables does not support Modified Colors, as they aren't able to resolve the value of these sorts of 'dynamic references'.

The plugin will Export your Modified Color Tokens as Color Variables which will show their Resolved Values in hex codes, which Figma can support. Changes you make to these Tokens in the plugin will also update to the connected Variable when you Export your changes.

W3C DTCG Token Format

Today, we have to resolve your Modified Colors into Hex when Exporting to Figma, and to align with the current definition of Color Tokens in the W3C DTCG specification.

Transforming Tokens

When transforming Color Tokens that have been modified, there are specific configurations to be aware of.

SD-Transforms generic package includes a specific transform to convert Tokens Studio modified colors to their resolved color values.

You can add an optional transform to convert Tokens Studio modified colors to a specific format, for example e.g. hsl which will ensure that the resolved color value will be formatted as the resolved value in HSL.

There's also a global option which allows you to set the color format once for all colors that have a modifier, so you don't have to set this for every token individually.