font-stretch/weight not exporting

[MafialDR]

We recently started using a variable font and need to use the font-stretch/weight attribute. Even thought it is assigned it doesn't export properly to the JSON.

In Figma :

Exported JSON:

[lukasoppermann]

Hey, this is interesting.

The problem is that the plugin is not setup to deal with variable fonts.

For the fontweight, this line would need to be changed:

https://github.com/lukasoppermann/design-tokens/blob/main/src/extractor/extractFonts.ts#L80 to return the input value if it does not find one in the matrix.

best would be to check if it is a number before.

For fontStretch its this line: https://github.com/lukasoppermann/design-tokens/blob/main/src/extractor/extractFonts.ts#L85

I don't know if it always says "CTGR" for variable fonts? If it does this could be something to look for.

@MafialDR would you be able to send a PR for this. I am happy to support you on it.

[MafialDR]

Hello @lukasoppermann,

Thank you for the response.

After discussion with my team, le "CTGR" is juste something on our end. For the rest, I looked over the code and belive to have found a solution but do not have access to commit my code.

Here is what I think would fix the problem :

const parseFontWeight = (fontStyle: any): number => {
  if(Number.isInteger(fontStyle)){
    return fontStyle
  }
  const parts = fontStyle.toLowerCase().split(' ')
  ...
  return fontWeights[weight] || 400
}

const parseFontStretch = (fontStyle: any): FontStretch => {
  if(Number.isInteger(fontStyle)){
    return fontStyle
  }
  const parts = fontStyle.toLowerCase().split(' ')
  return fontStretch[parts[parts.length - 1]] || fontStretch[parts[parts.length - 2]] || 'normal' as FontStretch
}

[lukasoppermann]

Hey @MafialDR I had a moment to look into it now, and sadly it does not work like this. :(

Don't as me why figma does it this way, but the data from the inspect panel is not what you get out of the API.

The variable font data is not available in the API. https://www.figma.com/plugin-docs/api/TextStyle#textstyle

The only I currently get the weight and style is by parsing the fontName property.