Managing design tokens and themes

Design tokens and themes can be created and managed in the Design Tokens tab of your Design System project. When you publish your design system, your tokens will be available to use in Figma via our Figma plugin.

Design Tokens

The Design Tokens tab in your design system gives you access to create and manage design tokens and themes for your components.

Design tokens are named values that capturing the atomic decisions in your design system. 

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

Functional Token Values

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])<br>
	
e.g.
color.lighten({base.red.100}, 10)
color.complement({base.red.100})
color.setAlpha({base.red.100}. 0.3)<br>
	

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)<br>
	
e.g.
eval(1 + 4)
eval(12 + {scale.typography})<br>
	

Token type

You can specify any  type string for your tokens.

Currently the following  type values are recognised as having special meaning in Interplay:

  • Tokens with the following types can be used to style Frames, Components, Component Sets and Instances in Figma using the Interplay plugin:
    • color
    • border
    • borderRadius
    • shadow
    • size ( used for padding and gap when Frame in auto-layout )
    • space, 
    • backgroundColor
  • Tokens with the following types can be used to style Ellipses, Lines, Polygons, Rectangles, Stars, Vectors using the Interplay plugin
    • backgroundColor
    • shadow
    • border
  • Tokens with the following types can be used to style Text in Figma using the Interplay plugin.
    • fontWeight
    • fontFamily
    • fontSize
    • lineHeight
    • color

Adding Tokens

You can add design tokens to your design system either in the browser or by importing token data from JSON files in your repo.

Adding Tokens in the browser

You can add tokens in the Design Tokens tab of your design system in Interplay.

If you don't have your own tokens yet or are just exploring, you can get started with a sample tokens file by clicking the link in the welcome screen.

To upload your own tokens, browse to a JSON file containing your tokens, or drop it onto the upload panel. For information about the JSON formats supported, please see: Design Tokens JSON formats

Importing tokens from your repo

On our paid plans, you can sync your Design Tokens from JSON files in your code repo using the Interplay CLI.

For information about the import process, please see Import Overview

Editing Tokens

Editing individual tokens

Once you have added your tokens, they are available in a folder structure based on the token path:

Click on a token to edit its type, description and value. The type of the token will determine what options are available to edit here. A color token will have a color picker attached, whereas a simple text value can be edited in place.

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.

Bulk Editing tokens

If you want to edit multiple tokens, it is often easier to work directly with the underlying token data. To do this, click Edit JSON at the top right of the tokens screen. 

This will display the token JSON side-by-side with the token display. You can edit the tokens on either side.


Creating Themes

Depending on the requirements of your code library, you can create a theme from your design tokens and pass it to your components.

We will add more details for creating themes here soon - for now, please contact us for help setting these up.

Next: Managing code components