I’m having trouble using the number vars for line and letter spacing.
For some reason (why??) percentages are not supported. So i tried using the rem and em values from our codebase. But it seems thats not the right unit, because as I apply the variable i can see the text move slightly.
Also, it seems number vars do not support 3 numbers after the decimal. Why???
Variables are definitely not ready to be out of beta. The UX of editing&applying them is also bad. Keep working on it please.
I was about to ask the same question. Our design system has both explicit unit (px) and percentage. It seems like typography variables only support px now?
In seeing what fields support variables, I added number variables assuming they’d be ingested in the style as a percentage—since that’s what is displayed by default.
Then when I tried applying that number variable, it came in as px. Not wanted or expected.
Okay, so I tried using percent in a string variable. That can’t be selected. The letter spacing field only appears to accept number variables.
Then I tried setting the field manually in px, em, etc. to see what it would accept. It only seems to accept px and %.
With this double bind between unit and variable types, I tried different numbers in px to approximate our existing % spacings. I found for example that 12% for one font style is about 1.92px. However, this is only equal at this font size, making it useless if the size is a variable.
So if you want to use variables for letter spacing, you’ll have to use it the same way as size, with discreet values for each mode. NOT a percentage that could scale with the size.
I think this needs to be fixed, so that we can use variables for either accepted unit.
If not, then If Figma is going to create this kind of mess, they should at least document it. It’s pretty disappointing to have to discover this through trial and error.
I don’t think they fully thought through the typo variables. It looks like a rushed alpha launch. No idea who at Figma thought variables are ready to come out of beta.
I was told it was meant to be a fast follow to support units and then was told it isn’t even on the roadmap, which means typography variables are useless.
This is also an issue with corner radius. We have a difference between pill shape and circle. One is 50% and the other 9999px.