Color tokens make up a big part of Figma Tokens, as they're so tightly integrated with Figma's styles but give you options that Styles don't offer (yet).
You can use color tokens for various things:
- Updating color styles
- Creating color styles
- Applying a fill color
- Applying a stroke color
There are multiple ways you can write color tokens:
rgb(255, 0, 0)
rgba(255, 0, 0, 1)
hsla(120, 50, 50, 1)
By default, a token references a Solid Paint (single colors).
You can define gradient color tokens by specifying a css-like syntax:
linear-gradient(45deg, #ffffff 0%, #000000 100%).
If you need multiple color steps, just add more (minimum is 2).
linear-gradient(45deg, #ffffff 0%, #ff0000 50%, #000000 100%)
The great thing about token gradients is that you can create gradients that reference another token, something that is not possible in Figma itself.
linear-gradient(45deg, $colors.white 0%, $colors.black 100%)
Opacity is supported as well, you can write your gradients like this:
linear-gradient(45deg, rgba($colors.primary, 0.5) 0%, rgba($colors.primary, 1) 100%)
- Positioning your gradient on a layer, as you can do in Figma, is currently not possible, as we won't know where to position it, as we only store the degree, not any translation.