Token values and types

Types, aliases, functional tokens and controlling usage

Last updated on August 26, 2022

You can specify any  type string for your tokens in Interplay.

Token value

A token value may be:

  • A simple value e.g. color string such as #276EF1
  • A reference another token e.g. {button.background.success}, which references a color token.
  • A composite object made up of values and references e.g. a typography token, which defines values for fontFamily, fontSize, color and lineHeight
 

Type is inherited

A tokens or token group inherits its types from its parent group, unless it has its own type assigned.

This makes it easy to set the types across large numbers of tokens by setting the types on the container groups at the root of your design token group tree structure.

 

Reference tokens

Tokens can reference or alias other tokens.

A reference token has the type of the token it references.

If a token references another token for its value, the value field is locked for editing:

If you want to override this behaviour you can choose to unlink by clicking on the icon that appears when you mouseover the value field.

 

Functional Tokens

Functional token values allow for manipulation and conversion of token values. This can be very useful to generate a scale from a core reference token. To use functional token values, simply add the function syntax specified below. You can pass references to other tokens by wrapping the token path in curly brackets.

Color Functions

color.lighten (color: string, amount: number [0 - 100])
color.brighten(color: string, amount: number [0 - 100])
color.darken(color: string, amount: number [0 - 100])
color.desaturate(color: string, amount: number [0 - 100])
color.saturate(color: string, amount: number [0 - 100])
color.greyscale(color: string)
color.spin(color: string, amount: number [0 - 100])
color.complement(color: string)
color.setAlpha(color: string, alpha: number [0 - 1])
e.g.
color.lighten({base.red.100}, 10)
color.complement({base.red.100})
color.setAlpha({base.red.100}. 0.3)

Mathematical expressions

You can compute basic mathematical expressions by wrapping in the eval function. This is a safer and more math-oriented alternative to using JavaScript’s eval function for mathematical expressions.

eval(statement)

e.g.
eval(1 + 4)
eval(12 + {scale.typography})
 
 

Mapping tokens to Figma

Design systems can have many hundreds of design tokens in each theme. This can become overwhelming for consumers of the design system so it is useful to guide your users in how your tokens should be used.

Interplay provides 3 layers of control of how tokens are available to users of your design system in Figma:

 

1. Hiding tokens from Figma

By default, all tokens in your published design system are available in Figma.

You can hide groups of tokens from Figma by editing the token group in Interplay and setting the visibility toggle to off:

Notion image

This is useful if your design system has certain tokens that are only to be used as base tokens (e.g. blue-100) and users of your system should only be working with the semantic tokens that reference them (e.g. background-primary)

 

2. Token type

The token type will control the general ways that a token can be used in Figma. For example, color tokens can only be used as colors in Figma.

The following table shows which token types are available for different Figma objects.

Type
Figma objects
• color • border • borderRadius • shadow • size ( used for padding and gap when Frame in auto-layout ) • space, • backgroundColor
Frames, Components, Component Sets and Instances
• backgroundColor • shadow • border
Ellipses, Lines, Polygons, Rectangles, Stars, Vectors
• fontWeight • fontFamily • fontSize • lineHeight • color
Text

3. Used For

You can further refine how a token can be used by specifying its usage or “used for” value

For example, rather than have all published color tokens available in all places in Figma where colors are allowed, you might specify that:

  • Some colors are background colors, so they can be used as fills in Figma
  • Some colors are text colors, so they can be used to style Text in Figma.
    • Notion image

After setting the token type, the list of available used for settings will be updated.

 
 
Did this answer your question?
😞
😐
🤩