Tokens Studio set up for additional font properties.

font-properties.json

{  
  "weight": {
      "100": {
        "value": "Thin",
        "type": "fontWeights",
        "description": "Thin"
      },
      "200": {
        "value": "ExtraLight",
        "type": "fontWeights",
        "description": "Extra Light"
      },
      "300": {
        "value": "Light",
        "type": "fontWeights",
        "description": "Light"
      },
      "400": {
        "value": "Regular",
        "type": "fontWeights",
        "description": "Regular"
      },
      "500": {
        "value": "Medium",
        "type": "fontWeights",
        "description": "Medium"
      },
      "501": {
        "value": "SemiBold",
        "type": "fontWeights",
        "description": "Medium"
      },
      "600": {
        "value": "SemiBold",
        "type": "fontWeights",
        "description": "Semi Bold"
      },
      "700": {
        "value": "Bold",
        "type": "fontWeights",
        "description": "Bold"
      },
      "800": {
        "value": "ExtraBold",
        "type": "fontWeights",
        "description": "Extra Bold"
      },
      "900": {
        "value": "Black",
        "type": "fontWeights",
        "description": "Black"
      }
    },
    "stretch": {
      "010": {
        "value": "Ultra Condensed",
        "type": "fontWeights",
        "description": "Ultra condensed"
      },
      "020": {
        "value": "Extra Condensed",
        "type": "fontWeights",
        "description": "Extra condensed"
      },
      "030": {
        "value": "Condensed",
        "type": "fontWeights",
        "description": "Condensed"
      },
      "040": {
        "value": "Semi Condensed",
        "type": "fontWeights",
        "description": "Semi condensed"
      },
      "050": {
        "value": "Normal",
        "type": "fontWeights",
        "description": "Normal"
      },
      "060": {
        "value": "Semi Expanded",
        "type": "fontWeights",
        "description": "Semi expanded"
      },
      "070": {
        "value": "Expanded",
        "type": "fontWeights",
        "description": "Expanded"
      },
      "080": {
        "value": "Extra Expanded",
        "type": "fontWeights",
        "description": "Extra expanded"
      },
      "090": {
        "value": "Ultra Expanded",
        "type": "fontWeights",
        "description": "Ultra expanded"
      }
    },
    "style": {
      "Normal": {
        "value": "Normal",
        "type": "fontWeights",
        "description": "Normal"
      },
      "Italic": {
        "value": "Italic",
        "type": "fontWeights",
        "description": "Italic"
      },
      "Oblique": {
        "value": "Oblique",
        "type": "fontWeights",
        "description": "Oblique"
      }
    }
}

formatter.ts

dictionary.allTokens.forEach(token => {
const tokenType = token.type;
let tokenValue = token.value;

switch (tokenType) {     
 case 'typography':
        if (isNumeric(tokenValue.letterSpacing)) {
          tokenValue.letterSpacing = tokenValue.letterSpacing + 'px';
        } else if (tokenValue.letterSpacing.includes('%')) {
          tokenValue.letterSpacing =
            Number(tokenValue.letterSpacing.slice(0, -1)) / 100 + 'em';
        }

        if (tokenValue.lineHeight.includes('%')) {
          // We take the number, with no % sign, and divide it by 100
          tokenValue.lineHeight =
            Number(tokenValue.lineHeight.slice(0, -1)) / 100;
        } else if (isNumeric(tokenValue.lineHeight)) {
          tokenValue.lineHeight = tokenValue.lineHeight + 'px';
        }

        if (Array.isArray(tokenValue.fontWeight)) {
          const fontWeightCopy = [...tokenValue.fontWeight];

          fontWeightCopy.forEach(weightValueType => {
            if (weightValueType.type === 'weight') {
              tokenValue.fontWeight = weightValueType.value;
            }
            if (weightValueType.type === 'stretch') {
              tokenValue.fontStretch = weightValueType.value;
            }
            if (weightValueType.type === 'style') {
              tokenValue.fontStyle = weightValueType.value;
            }
          });
        }
break;
}

how-to.md

Use the custom fontWeights tokens as words to combine into the names of Figma font styles

For example:

Roboto Condensed ExtraBold Italic

We can split this name into it's font properties.

Family: Roboto

Stretch: Condensed

Weight: ExtraBold

Style: Italic

Combined in Figma Tokens we would have a typography token like so:

      "My Typography Preset": {
        "value": {
          "fontFamily": "Roboto",
          "fontWeight": "Condensed ExtraBold Italic",
        },
        "type": "typography",
      },

We can replace those words with the tokens in the font-properties.json gist

      "My Tokenised Typography Preset": {
        "value": {
          "fontFamily": "{fontFamily.roboto}",
          "fontWeight": "{stretch.030} {weight.800} {style.italic}",
        },
        "type": "typography",
      },

The Style Dictionary formatter example above will strip the properties out of the font weight - and add each as a property into the token output.