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?
Solved
Typography variables - weight is not displayed as variable in inspect mode
Best answer by djv
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.
Devs need to know what token to use, otherwise they may hard-code the value which may not be the same between modes. How do we request this be fixed?
This is the main concern I have when working with variables, and it goes against proposed specs for design tokens in the industry. This is Figma making an implementation judgment on behalf of an organization rather than allowing for an organization to define the Tokens/Variables that work for them.
Additionally, focusing only on CSS implementation here leaves out other platforms that are represented elsewhere in Dev Mode.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.