Color Tokens

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

Solid colors

There are multiple ways you can write color tokens:

  • Hex: #ff0000
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 1)
  • HSLA: hsla(120, 50%, 50%, 1)

By default, a token references a Solid Paint (single colors).

Gradients

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%)

Token References

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%)

Alpha values (opacity)

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%)

Limitations

  • 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.