Interestingly …You can use a variable for letter-spacing ( which accepts a number variable - but reads it as a percentage) - the challenge remains that line heights by default are absolute not percentages - even though you can input a percentage.
Percentages allow greater flexibility and less calculations
Word around would be to allow formula in a variable
e.g. =[variable] * 1.5
Or figuring out a way for the line height to be toggle between absolute or relative application of the number variable.
The native typography variable has different issues that make it another half-implemented feature.
We can’t use variables inside line-height since we can’t use % values (only numeric variables work on that field, so no % allowed)
Another big issue for us is that we can’t hide typography values inside other non-typography-related fields. Or, in other words, we can’t show typography variables only for text’s fields since the option is not present inside the list:
I’m a Product Designer working closely with developers to update our hard-coded UI using a design system.
Emulating our design system’s code structure is such a boone for design-dev synergy. Using variables in Figma has brought me closer to parity with the system, improving efficiency and collaboration.
Variables help me evaluate the effectiveness of our design system structure and identify areas for improvement. I enjoy using variables for the same reasons devs do — fixed values result in a lot inefficiencies when you are working with a complex UX.
Using pixels makes line-height values dependent on font size result in numerous variables to maintain consistency. Using percentages would streamline this process and allow for more flexible adjustments based on context.
I have 7 font-sizes within my system. Then, I have 3 stylistic choices for line-height for each of them (tight, base, loose) that can be chosen based on what’s needed in-context. If I am using px, this would result in about 21 variables to cover my whole system. If I ever wanted to update my font-sizes: I would need to update all the applicable line-height variables. Percentages allow for me to have just 3 variables — and these variables would not need to be updated if I were to update my font-sizes.
The line-heights are specifically important to me because they are now the only Core Token in my design system that I can’t use my Figma variable system for
If the Figma team wants to avoid adding units or percentages into the variable itself, maybe there could be a select dropdown beside the line-height field (or letter-spacing field) that lets you select from px and %.
This would be really helpful!
