Design Tokens

By adding your design tokens to Interplay you can using their values directly to style Figma objects such as frames, components, shapes and text

Applying design tokens

To apply tokens to an object:

• With the Interplay plugin open, select the object in Figma. The plugin will show the available tokens that have been mapped for that type of object in the design system.

• In the plugin, choose the token value you want to apply.

Applying design tokens to text

You can also apply design tokens to Text created in Figma.

To apply tokens to text:

• With the Interplay plugin open, select the text you want to style with tokens. The tokens that have been mapped for using with text will be displayed in the plugin.

• Choose the token from the dropdown to apply it to the text.

Mapping design tokens

The tokens available in the plugin for a given item in Figma are determined by how the tokens are mapped in your design system in Interplay. This allows design system owners to guide users in how tokens are intended to be used.

For example, by default all tokens with a type of color will be available to be applied as colors in Figma. Design system owners can also set:

• Which color tokens are available in Figma (e.g. so designers use semantic tokens instead of raw color scales)

• What the tokens are used for
• To specify e.g. certain color tokens are background colors, so they can be used as fills in Figma
• A single token or group can have multiple used for assignments.