Skip to main content
Solved

Typography variables - weight is not displayed as variable in inspect mode


Henrik_Hedegaard

I’ve just applied variables to all our project’s text styles.
It all works as expected.

However, in inspect mode, font weight it still displayed as normal css value and not with css-variable.

See screenshots.

Is this a bug or me messing up things?



Best answer by dvaliao

Hey All, sorry for the trouble!

I reached out to our engineering team for further insight, and they confirmed that this is expected behavior when using String variables for font weight and size.

We will display Number variable bindings in Dev Mode for these values, but not String variables, as often many of the string representations don’t have CSS equivalent values in code.

View original

23 replies

Johan_Holmberg

Im having the same issue. Have you found any solution to this or is it a bug i Figma?


Same issue here, font weight is displayed as normal css in dev mode. Anyone found a solution?


ksn
Figmate
  • Community Support
  • 1611 replies
  • April 23, 2024

Hey all - I actually poked our engineering team about this, and they’ve actually filed a ticket on our end to have the weight display reviewed. I don’t have exact details just yet, but I’ll update when I know more.


Johan_Holmberg

@ksn our hero! 😀


Henrik_Hedegaard

@ksn How do I report related bug?

I have a situation where I’ve applied a color-variable to a text.
But in inspect mode it shows a completely different variable.

This is a MAJOR bug as it will cause UI tests to fail.
…and how can we trust inspect mode?



ksn
Figmate
  • Community Support
  • 1611 replies
  • April 25, 2024

Would recommend filling out this form here. This will need to be reviewed by our tech quality team – this is outside of my area of expertise at this time.

Once you file a ticket, feel free to drop the case number you are assigned and I’ll escalate it on the support side to see if they can review faster.


David_Simpson
  • New Participant
  • 14 replies
  • April 26, 2024

def seems like a bug, I’m seeing the same. I’ve used numerical variables for font weight, the same as Henrik, and the value is displayed in inspect rather than the name or defined code syntax.


ksn
Figmate
  • Community Support
  • 1611 replies
  • May 1, 2024

hey all - wanted to give an update:

I have a bug ticket filed for this, and it is currently in the review process. I don’t currently have a timeline on the next steps, but I will do my best to get periodic updates posted.


David_Simpson

I’m seeing this as fixed now. My font weights are displayed in dev mode using the code syntax values entered in the variable settings, not the variables value. Thanks for the speedy fix Figma!


Henrik_Hedegaard

Yes, seems to be fixed.


dvaliao
Figmate
  • Community Support
  • 4595 replies
  • May 8, 2024

Hey @David_Simpson & @Henrik_Hedegaard, thanks for letting us know!

Our team confirmed that a fix has been pushed. Please let us know if you run into any further issues.


  • 2 replies
  • May 20, 2024

Hi,

I can see it is fixed to Number variable not string variable for font weight, but unfortunately the font that I am using have the weight as Medium, Regular etc rather than number value, and the variable name or code syntax is not shown.

Is this the same bug or string value is not support for font weight variable right now


  • 2 replies
  • May 21, 2024

Okay, noticed that font weight is recognising number as well (interchangeable in variables), but wonder if string is not support for font weight then? (can read as variable but not showing the proper name in dev mode)


dvaliao
Figmate
  • Community Support
  • 4595 replies
  • May 21, 2024

Thanks for following up, @becky_u!

That definitely sounds odd. Please reach out to the support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new

Please use your Figma account email, include a link to the file, and share it with support-share@figma.com, so they can take a closer look.


Melissa20
  • New Member
  • 1 reply
  • May 22, 2024

I’m having the same issue as the original poster for both font-weight and font-size.


David_McEnroe

Same issue, weight variable not displaying in dev mode


Zhibang_Jiang1

Same issue here. I’m using the Named Alias for font weights, and they cannot be correctly displayed in the dev mode. The dev mode displays the Numeric Values that inherit from the typeface.


Thom_van_der_Doef

Looks like this issue still exists. dev mode just shows the numeric values instead of the string variable for font-weights.


Elie_Georgesson

Hello @dvaliao unfortunately the issue still exists and not yet solved.


Sahand
  • 1 reply
  • December 12, 2024

Same issue here? Any update @dvaliao 🥲


dvaliao
Figmate
  • Community Support
  • 4595 replies
  • Answer
  • December 13, 2024

Hey All, sorry for the trouble!

I reached out to our engineering team for further insight, and they confirmed that this is expected behavior when using String variables for font weight and size.

We will display Number variable bindings in Dev Mode for these values, but not String variables, as often many of the string representations don’t have CSS equivalent values in code.


Andrea_Monfrini

Hi ​@dvaliao are you sure this is fixed? I use Poppins font from google, setting a numeric weight in my variable but still didn’t see it if i inspect the element with dev mode.

Can you help me?

 


dvaliao
Figmate
  • Community Support
  • 4595 replies
  • February 28, 2025

Hi ​@Andrea_Monfrini, thanks for following up! 

No fix was implemented; this is currently the expected behavior. As mentioned above, string variables (variables applied to the text content of any text layer) will not be displayed as a variable in inspect mode. String representations don’t have CSS equivalent values in code.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings