RedMadRobot / figma-export

Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project
MIT License
718 stars 114 forks source link

Improved typography handling #178

Closed IljaKosynkin closed 1 year ago

IljaKosynkin commented 1 year ago

Good time of the day!

Recently in our team we've stumbled on case in which postScriptName from Figma API is null (for instance, Poppins Regular does not seem to be working correctly). In this PR I've added a possibility to specify mapping for font weight to font type (like 400 -> Regular, etc.) I've not added a tests yet as I would like to first get a greenlight on the idea itself and maybe some suggestions on the implementation (for instance I've no idea, for the life of me, why Yams is not able to parse [Double: String], but is able to parse [String: String]).

subdan commented 1 year ago

Hi. I've just downloaded Poppins Regular font from Google Fonts and try to export it using Figma API. The API returns correct postScript name "fontPostScriptName": "Poppins-Regular",. Could you please send me an example of font file that doesn't have postScriptName?

IljaKosynkin commented 1 year ago

Hmm, @subdan that's super weird. So I got this from API from our Figma file: "style": { "fontFamily": "Poppins", "fontPostScriptName": null, "fontWeight": 600, "textAutoResize": "WIDTH_AND_HEIGHT", "fontSize": 16.0, "textAlignHorizontal": "LEFT", "textAlignVertical": "TOP", "letterSpacing": 0.0, "lineHeightPx": 22.0, "lineHeightPercent": 117.33332824707031, "lineHeightPercentFontSize": 137.50, "lineHeightUnit": "PIXELS" }, This is for Poppins Semibold. However, when I recreate the style in my own Figma, API return correct fontPostScriptName. We also had quite a few issues with Figma in general (like components not updating or not reflecting in the API etc.) From your experience, can Figma file become corrupted somehow? What's even weirder API spec does not specify this field as nullable (or there are no cues if it can be, at least). Any pointers from your end?

subdan commented 1 year ago

It seems that the font file your designer use is corrupt. Ask your designer to download the font file from Google Fonts and export Text Style again.

We also had quite a few issues with Figma in general (like components not updating or not reflecting in the API etc.) From your experience, can Figma file become corrupted somehow?

No.

IljaKosynkin commented 1 year ago

She did in fact download it from Google Fonts and had exported TS multiple times. In any case, I feel like ability to specify family manually based on weight is still a good idea to have since designer might opt into using TrueType or OpenType fonts (I'm not sure 100% what interaction would be, but I imagine PostScript field would be null in such cases). What do you think?

subdan commented 1 year ago

I need to make a research about custom fonts and post script names. I will get back to you by the end of the week.

It would be cool if you give me an example Figma file and example font file which doesn't have post script name.

subdan commented 1 year ago

It is super weird that fontPostScriptName is null. Does your designer use Windows or macOS, web-version of Figma or Desktop? Could you give me an access to your Figma file? So I can try to export it myself.

In any case, I feel like ability to specify family manually based on weight is still a good idea to have since designer might opt into using TrueType or OpenType fonts (I'm not sure 100% what interaction would be, but I imagine PostScript field would be null in such cases). What do you think?

This is a workaround and I think we should start by fixing the issue that fontPostScriptName is null. Moreover it is a bad idea to compose PostScript name by yourself "\(fontFamily)-\(fontWeightName)". PostScript name may not contains hyphen symbol.

Could you give me an example font file that doesn't have post script name? I think that every valid font file must have PostScript name.

IljaKosynkin commented 1 year ago

@subdan to be perfectly honest with you, I have troubles finding such font. As per spec ID 6 entry in name table is not required, but in reality PS is such a common standard that everyone adds it anyway.

I've crafted font without psName manually. OSX seems to reject it (it allows you to install it but then, if you use it - text comes up with placeholders instead of symbols). Windows seems to be able to install it ok and I also was able to use it in my Figma via Windows (Node ID for TS without PS name is 9:5). Also I should note that in Android fonts without PS name are working fine (tested it) as well, but my guess would be that on iOS they probably won't.

So we're in a little bit of a pickle here. From my research, fonts without PS name are possible, but unlikely to actually happen and, even if they do happen, - it is probably better to add such name manually or use other font, since by using a font without PS name you effectively exclude Apple systems from the equation.

At the same time, our situation is not quite like this: font that we're using actually has PostScript name. I believe the reason why we're getting null in PS name field from API is because when fonts were loaded initially parsing failed to extract the name correctly. I'll probably file a bug report to Figma support if we won't come up with any new ideas on how to fix it on our end. But this still leaves open a possibility of Figma issue, unrelated to the font itself, which my PR mitigates (or allows to mitigate).

That all being said, I'm not sure what to do with this PR, to be perfectly honest. I will leave its fate in your hands. If you feel like there something useful to the functionality (maybe with some modifications to make it more flexible, like custom format for the font name) - I would be glad to discuss it and implement it. If you feel like PS name cannot be null ever (for the reasons of the Apple systems exclusion mentioned above) - than you're free to close the PR. I would just point out that in such case, the fontPostScriptName field in TypeStyle struct shouldn't be nullable either (if we don't expect to be null ever).

subdan commented 1 year ago

Thanks for explanation. I've decided to close the PR. But if anyone else reports a similar issue I will contact you or resume work on your PR myself.


However, when I recreate the style in my own Figma, API return correct fontPostScriptName.

So, to fix the issue in your team Figma file, you can publish the text style from your computer.