Numerical font-weight not applied correctly

[Subcide]

Font weights specified as:

font-weight: 600; default to standard font weight rather than mapping to how they render.

[steve8708]

Ah yes, thanks for the feedback! This is slightly tricky due to how Figma handles font weights, but I'm sure it can be done. Will keep this here to be on my todo list and try and get to it soon

[Subcide]

Thanks for your quick turnaround with these fixes by the way. This one is definitely minor as we'll apply text styles from our design system to them anyway, but thought it was worth raising.

[MarioRicalde]

This is one of those issues that in theory should be easy to fix by sticking to the spec. With that, you could create your equivalents and it should work.

https://www.w3.org/TR/CSS2/fonts.html#font-boldness

[steve8708]

Yeah, so for this one the hard part isn't reading the value, it's applying it. The way Figma handles font weights is as font variations. So there is no comparable fontWeight property for text layers, you have to choose from a variety of font and "style" pairings. Bad sadly the "style" pairsings are not standard

Lots of fonts have different names for different weights. They often don't use straightforward names like "regular" and "bold", they use a lot of names like "book" "thick" "black" "medium" "thin" "light" "plain" "semibold" "wide" etc. I quick script showed that there were 177 of these with just the built in fonts, and there will be more for those who have custom fonts

["Bold","Plain","Regular","ExtraBold","Heavy","Light","Medium","SemiBold","Thin","UltraLight","Black","Semibold","Ultralight","Semi Bold","Bold Italic","Italic","Medium Italic","W0","W1","W2","W3","W4","W5","W6","W7","W8","W9","Heavy Italic","Light Italic","Semibold Italic","Black Italic","Thin G1","Thin G2","Thin G3","Thin G4","Thin Italic","Ultralight Italic","BoldG1","BoldG2","BoldG3","BoldG4","HeavyG1","HeavyG2","HeavyG3","HeavyG4","LightG1","LightG2","LightG3","LightG4","MediumG1","MediumG2","MediumG3","MediumG4","RegularG1","RegularG2","RegularG3","RegularG4","SemiboldG1","SemiboldG2","SemiboldG3","SemiboldG4","ThinG1","ThinG2","ThinG3","ThinG4","UltralightG1","UltralightG2","UltralightG3","UltralightG4","Ultrathin","UltrathinG1","UltrathinG2","UltrathinG3","UltrathinG4","??","ExtraLight","ExtraBold Italic","Condensed","Condensed Bold","Condensed Light","Default","Outline 6 Dot","Outline 8 Dot","Pinpoint 6 Dot","Pinpoint 8 Dot","Chancery","SemiBold Italic","Black Oblique","Book","Book Oblique","Heavy Oblique","Light Oblique","Medium Oblique","Oblique","Roman","Demi Bold","Demi Bold Italic","Ultra Light","Ultra Light Italic","ExtraLight Italic","Book Italic","BoldOblique","Bold Oblique","Regular24","Extra Bold","Extra Bold Italic","Extra Light","Extra Light Italic","Regular Italic","Semi Bold Italic","Retina","One","Solid","Condensed ExtraBold","Condensed Medium","UltraBold","Condensed Black","UltraLight Italic","Ornaments","Demi","Demi Italic","Titling","BoldItalic","League Script","Wide","DemiBold","Extended Italic","Bold Inclined","Inclined","ExtraCondensed","SemiCondensed","DemiLight","Condensed ExtraLight","Condensed SemiBold","Condensed Thin","ExtraCondensed Black","ExtraCondensed Bold","ExtraCondensed ExtraBold","ExtraCondensed ExtraLight","ExtraCondensed Light","ExtraCondensed Medium","ExtraCondensed SemiBold","ExtraCondensed Thin","SemiCondensed Black","SemiCondensed Bold","SemiCondensed ExtraBold","SemiCondensed ExtraLight","SemiCondensed Light","SemiCondensed Medium","SemiCondensed SemiBold","SemiCondensed Thin","Condensed SemiBold ","DIN","ExtraBlack","Inline","Block","Dash","B","EB","L","M","vert","HouseScript","HouseScript Semibold","Black Condensed","Black Extended","Extended","Light Condensed","Light Extended","Text","MagerKursiv","cmbx10","cmex10","cmmi10","cmr10","cmsy10","cmti10"]

That said, we can maybe solve 80% with 20% of the work by just checking for if the font variation chosen has something called "bold", "thick", "black" for heavier font weights, "regular", "plain", etc for normal, and "light", "thin" for light

So that's my tentative plan, will leave this open until I have time to draw out a mapping and add this best-effort logic

[MarioRicalde]

Does Figma provide access to what options are available for selection? If so you could use that array. And translate by guesstimating, which could fix the problem 99% of the time.

On Wed, Sep 11, 2019 at 12:00 PM Steve Sewell notifications@github.com wrote:

Yeah, so for this one the hard part isn't reading the value, it's applying it. The way Figma handles font weights is as font variations. So there is no comparable fontWeight property for text layers, you have to choose from a variety of font and "style" pairings. Bad sadly the "style" pairsings are not standard

Lots of fonts have different names for different weights. They often don't use straightforward names like "regular" and "bold", they use a lot of names like "book" "thick" "black" "medium" "thin" "light" "plain" "semibold" "wide" etc. I quick script showed that there were 177 of these

["Bold","Plain","Regular","ExtraBold","Heavy","Light","Medium","SemiBold","Thin","UltraLight","Black","Semibold","Ultralight","Semi Bold","Bold Italic","Italic","Medium Italic","W0","W1","W2","W3","W4","W5","W6","W7","W8","W9","Heavy Italic","Light Italic","Semibold Italic","Black Italic","Thin G1","Thin G2","Thin G3","Thin G4","Thin Italic","Ultralight Italic","BoldG1","BoldG2","BoldG3","BoldG4","HeavyG1","HeavyG2","HeavyG3","HeavyG4","LightG1","LightG2","LightG3","LightG4","MediumG1","MediumG2","MediumG3","MediumG4","RegularG1","RegularG2","RegularG3","RegularG4","SemiboldG1","SemiboldG2","SemiboldG3","SemiboldG4","ThinG1","ThinG2","ThinG3","ThinG4","UltralightG1","UltralightG2","UltralightG3","UltralightG4","Ultrathin","UltrathinG1","UltrathinG2","UltrathinG3","UltrathinG4","??","ExtraLight","ExtraBold Italic","Condensed","Condensed Bold","Condensed Light","Default","Outline 6 Dot","Outline 8 Dot","Pinpoint 6 Dot","Pinpoint 8 Dot","Chancery","SemiBold Italic","Black Oblique","Book","Book Oblique","Heavy Oblique","Light Oblique","Medium Oblique","Oblique","Roman","Demi Bold","Demi Bold Italic","Ultra Light","Ultra Light Italic","ExtraLight Italic","Book Italic","BoldOblique","Bold Oblique","Regular24","Extra Bold","Extra Bold Italic","Extra Light","Extra Light Italic","Regular Italic","Semi Bold Italic","Retina","One","Solid","Condensed ExtraBold","Condensed Medium","UltraBold","Condensed Black","UltraLight Italic","Ornaments","Demi","Demi Italic","Titling","BoldItalic","League Script","Wide","DemiBold","Extended Italic","Bold Inclined","Inclined","ExtraCondensed","SemiCondensed","DemiLight","Condensed ExtraLight","Condensed SemiBold","Condensed Thin","ExtraCondensed Black","ExtraCondensed Bold","ExtraCondensed ExtraBold","ExtraCondensed ExtraLight","ExtraCondensed Light","ExtraCondensed Medium","ExtraCondensed SemiBold","ExtraCondensed Thin","SemiCondensed Black","SemiCondensed Bold","SemiCondensed ExtraBold","SemiCondensed ExtraLight","SemiCondensed Light","SemiCondensed Medium","SemiCondensed SemiBold","SemiCondensed Thin","Condensed SemiBold ","DIN","ExtraBlack","Inline","Block","Dash","B","EB","L","M","vert","HouseScript","HouseScript Semibold","Black Condensed","Black Extended","Extended","Light Condensed","Light Extended","Text","MagerKursiv","cmbx10","cmex10","cmmi10","cmr10","cmsy10","cmti10"]

That said, we can maybe solve 80% with 20% of the work by just checking for if the font variation chosen has something called "bold", "thick", "black" for heavier font weights, "regular", "plain", etc for normal, and "light", "thin"

So that's my tentative plan, will leave this open until I have time to draw out a mapping and add this best-effort logic

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/BuilderIO/html-to-figma/issues/5?email_source=notifications&email_token=AAA6XTG5NAYH4K2MZHHLIFLQJEPZXA5CNFSM4IS3A5K2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6PFSHI#issuecomment-530471197, or mute the thread https://github.com/notifications/unsubscribe-auth/AAA6XTAFP55R4DIMYK4ZYQ3QJEPZXANCNFSM4IS3A5KQ .

[steve8708]

Yeah, that's exactly my plan :)

[geiras]

Is there any possibility to cross check the final result of the imported text with numerical font-weight with the CSS generated by the Code module on Figma?

Usually, what's on the Code module matches the font-weight value on the actual website.

[steve8708]

This would really be great to do @geiras. Sadly though Figma's plugin API doesn't have access to generated CSS styles or else this solution would work perfectly