Mapping to Figma

Guiding designers when using tokens in Figma

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?
😞
😐
🤩