Learn more about color gradients here: docs.tokens.studio/token-types/...



Check out Tokens Studio for Figma plugin: tokens.studio/plugin?utm_s...

I set up my color gradients in a separate token set, allowing me to export the color scale as Figma variables and the gradients as Figma styles linked to those variables.

In this example, I take the color scale I created and use those as reference to create gradients. 🌈

The format for defining these gradients is:
linear-gradient(45deg, color-1 0%, color-2 100%)

You can add as many color stops as you want to customize your gradients further

Creating color gradients in Tokens Studio 🎨

Did you know you can easily create color gradients in Tokens Studio and export them as Figma styles?

Tokens Studio We empower brands and product teams to scale efficiently, enhance collaboration, and innovate with consistency and quality - in design tools and our upcoming platform. Manage your brands at scale - al...

Explore Tokens Studio for Figma:
tokens.studio/plugin?utm_s...
Read more about color modifiers here:
docs.tokens.studio/token-types/...

Next, I define steps to lighten and darken the colors. Using these steps, I adjust the primary, secondary, and tertiary colors to create a complete color scale. 🌈 
I then export this scale as Figma variables, ready to use in any design! 🎨

I've organized the brand colors into a token set named 'brand'. 🌟
Then, I create a core/colors token set to define primary, secondary, and tertiary colors. This approach keeps our design tokens structured and adaptable for any project! 🎨

Did you know in Tokens Studio, you can use color modifiers to create a color scale? 🎨



In this example, I demonstrate how to build a custom color scale in Tokens Studio.