❇️ 🔠 Text styles from Variables using Typography tokens

When creating a typography composite token in the plugin, for properties that accept numeric values, you can reference tokens that are:

• same token type

• dimension tokens

• number tokens

When you export a typography token (or any of the individual properties defined as their own tokens) as variables:

• font family (will create as string variable)

• font weight (will create either as string or number variable, depending on if theyre a string or a number)

• letter spacing (number variable)

• line height (number variable)

• paragraph spacing (number variable)

• paragraph indent (number variable)

When you set the Export to Figma Options menu to Create styles with Variable references for Typography, the plugin will create the style and map each property to the appropriate variable.

• For decisions using percentage units, the plugin will not map this property to the variable created to preserve the responsive design decision in the token.

• Read more in the Limitations from Figma section below.

Limitations from Figma

• They only support unitless numbers

  • rem values will be converted to the pixel equivalent

  • percentages are not accepted in number variables

    • the plugin will create the variable with the same value and ignore the percentage.

    • For example:

      • 4% = a variable of 4

• You will run into similar issues with font family + font weight as you do with tokens

  • If I have a font family + weight set for mode A and I duplicate for mode B

    • if there isn't a direct match for the weight Figma will "guess" which one to apply but not tell the designer there isn't a match and they can't see the value of the weight in the UI panel at all, they only see the variable name

    • So, if I'm consuming a library from elsewhere, how do I know?

    • Dev mode appears to be the only way to see the value.

• They don't support all the text properties that we have natively in Tokens Studio