❇️🌈 Gradient style with variables

Like Color Tokens with a single value, your gradients can be Exported to Figma as Color Styles that reference Color Variables.

Before you export your gradient Color Tokens to Figma as styles, ensure your:

• Gradients have values that reference Color Tokens

• Color variables have been created and are attached to the Referenced Color Tokens

When you Export to Figma as Color Styles, ensure:

• The option for Color styles is selected.

• The option for Create styles with variable references is selected.

• Themes and token sets where the gradients are located are active.

• Themes and token sets where the variables are attached are reference only.

A few screenshots of an example to help get you started if you are Exporting to Figma using Themes with Tokens Studio Pro

A few screenshots of an example to help get you started if you are Exporting to Figma using Token Sets with Tokens Studio Free:

Limitations of gradient color tokens

The plugin does not yet support all the types of gradients offered in Figma:

• Linear - Supported

• Radial - Requested

• Angular - Requested

• Diamond - Requested