Skip to main content

This has been an ongoing issue in my current job and my previous job (in Sketch as well, so to be fair its not unique to Figma.) I’m not sure it qualifies as a bug per se because it is “technically correct,” but that’s cold comfort because the font CSS we get from Figma has always been unusable. I can’t convince our website that it’s “technically correct” 😆 so I’m calling it a bug for our purposes!


I’m hoping either Figma would consider allowing for some options to adjust its font CSS output, or the community could let me know if a plugin could possibly fix this (even if I had to commission someone to build one for me.)


Its strange because the font CSS Figma outputs has always been incompatible with our webfonts, and yet I’ve only found a couple other people outside our company with this same problem. The issue is not unique to the “Motiva” font, we fought with another font in the past and the new font we want to implement in the future will still have this problem.


I’m told there’s nothing we can do on our end when setting up our web fonts to make it work the way Figma handles it. We can not use “font-style” or “font-weight,” we HAVE to treat each weight/style as separate fonts. Is this fundamental to how webfonts work? If so, why does Figma handle it this way? Does it depend on the font itself and we’ve just been incredibly unlucky?


Screenshot 2024-01-11 at 1.21.19 PM


I’ve created this conversion document, but in the years I’ve been dealing with this I haven’t been able to make it stick process-wise. This is a big company with a lot of designers, developers, project managers, etc. It’s difficult to remember “ignore this bit, replace it with this bit” across a zillion people on a zillion project files. Even though I’m personally very familiar with this issue, I still have trouble with these conversions, so it feels unfair to expect others to remember all this.


Do I need to go to the font foundry we purchased the font from and ask them to change the font files on their end? This really doesn’t seem like their problem though and I can’t quite articulate what I’d want them to do, so it feels embarrassing to ask them to “make your font file somehow different please.”


What can I do to fix the CSS that Figma outputs? I’ve tried converting the font files myself, to no avail. Lost count of the number of font-hacking-apps I’ve downloaded 😂 I’m out of ideas!

Let me start by saying that there is no Plugin or Widget API’s bug here. Better change the category to Share an idea.


As for fonts in CSS, they can actually have arbitrary names. It all depends on the naming conventions within your specific team.


I suggest looking at some examples.

Here, for example, is a screenshot from Adobe Fonts:

adobe-fonts


And here, for example, is a screenshot of the CSS file for the Inter font:

inter-css-example


As you can see, none of the examples match your “correct” CSS.


And here are some quotes related to code generation in general:



Code in Dev Mode is entirely redesigned and customizable for whichever language you’re working in. We know that code isn’t useful out of the box. Rather, it’s a jumping off point so you don’t have to go from 0 to 1 every time.


Source: Introducing Figma’s New Dev Mode | Figma Blog




Should you just use codegen to… generate code? Not so fast. Codegen is best for augmenting your design to development process, not automating it.


o…]


Generated code can be a really helpful starting point. But even then, you still have to edit these code snippets to bring in other properties, add formatting, extra styles, and more. Once the code is in that state, subsequent Figma file changes can’t always be “pasted in” using codegen in the same way; doing so would be overriding the work you’ve already edited. At that point, the value of codegen is as a reference more than it is a snippet you can paste.


Source: What Codegen Is (Actually) Good For | Figma | Figma Blog




Moving away from codegen as a primary feature for Dev Mode was a major pivot. While codegen could continue to play an important role as a jumping off point in a developer’s workflow, actually translating design to code still required a human touch.


Source: Dev Mode: Building a Design Tool that Works Harder for Developers | Figma Blog



Therefore, to make code snippets compliant with your team’s norms, you can develop your own codegen plugin that will replace the default snippets. Check out the documentation on the Figma Developers website:

figma.com

Thanks so much for your insight, this is super helpful!! That’s great news that we can make a codegen plugin, I’ll dig into that more 😃

Reply


Terms & ConditionsCookie settings