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:
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.
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.
• 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
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.
After setting the token type, the list of available used for settings will be updated.