Aliases

The nice thing about Figma Tokens is that you can reference other tokens as a value for your tokens (or ultimately, your styles). That means you can have your brand color be a reference to colors.red.500, or have a background token that takes its value from a colors.black token while a foreground token takes its value from a colors.white token.

To use an alias in your tokens, we write them in the following notation: {spacing.sm}, you can also write them in the older $ notation, like this: $spacing.sm

💡

References are case sensitive, that means you should write your references like your tokens are named (usually lowercase).

What this does is tell the plugin to go look for a token of spacing.sm, if it is found, use that value. Whenever you change spacing.sm, the token that referenced it also changes.

You can also embed aliases inside color tokens! If you want a color style that's using the brand color but reduce it's opacity to 50% you could just write: rgba({colors.brand}, 0.5)