Font Family and Font weight validation

[esthercheran]

Is your feature request related to a problem? Please describe. I struggle quite a bit with Font Family and Font weights. A typo in the font family or trying to apply a font weight that does not exist for the font family leads to a lot of frustration and trying to figure out the issue.

Describe the solution you'd like A validation on filling in wrong data could definitely help (checking if a particular font has that font weight etc)

We should fetch the list of available fonts from Figma, we can do that with https://www.figma.com/plugin-docs/api/figma#listavailablefontsasync - and then check if the Family / Weight combination exists. If not, we can show an error. In the future we can improve this by letting the user pick from available fonts, but for now this should be a good step forward.

[six7]

@esthercheran could you work on a concept for how this can look like? I'd assume we'd want to surface this in

• a tooltip when hovering Typography tokens (cause there we have the combination)
• EditTokenForm when editing typography tokens (cause there we have the combination)
• Possibly a Figma error flash when applying font family / font weight or typography tokens and that combination isn't found?

Any other place where we'd be able to surface this?

[esthercheran]

@six7 I was also thinking that we could give a dropdown with the valid font family names for the Font family token and in case of Typography token when the font family is selected only the valid font weight could be shown in the drop-down. Because we already have a drop-down for aliases, we should consider the UX.

[six7]

We shipped this a while ago, but never seemed to have updated the issue