This is needed. I don’t know how it released without this function. Now I have to convert to px based and when the inevitable release happens later this year I’ll have to convert them all back to % again.
+1 for that too, @Mark_McIntyre for the formula part you can try my new plugin for now, I made a video to show your request in action:
You can see that the variables h1-line-height, h2-line-height & h3-line-height use formulas, just like you mentioned:
{{ Math.round( $h1-size * $line-height ) }}.
So their values are automatically updated when you change the line-height or h1/h2/h3-size variables.
And of course the link to the plugin:
Figma
Hope this helps!
Must have feature!
Waiting for it so much!
I know we can work around this issue by using formulas to calculate our line-height from a percentage variable and the font size in px. But this is adding so much complexity that I’d rather not use it at all for now.
Would love to get this in a new iteration of typographic variables!
- 1, needed. It waste so much time to set each line height manual 🙂 And the percentages are the best way in this case
+1, needed. It waste too much time to set each line height manual 🙂 And the percentages are the best way in this case
Out team also needs this! 🫵
What I have never really understood about the implementation of type variables, is that the variables are set in all the sub-fields of the old type styles. What I expected was, similar to color tokens, the old type styles go away. I should have H1 as a variable, with all the settings hard-coded in it. Then I use modes in the variables palette to create necessary switches. Being able to hide type styles would be so helpful in larger systems that have component-specific type styles. I don’t need those showing up for all designers.
I found this not correct for letter spacing.
Yes, you can use a variable. But no, it does not read as a percentage.
Setting a variable “10” in the letter spacing field is a much greater spread than 10 “PERCENT.”
The letter spacing field also should allow setting of a percent value as needed for line height.
Potentially, this would be an easy fix for Figma if they just allowed a string there.
Absolutely! I have been chasing this windmill for a bit.
I just don’t understand the value of variables when they still have to be put into manual styles anyway.
And definitely agree with the need to keep designers working and not thinking about these things.
Hoping this update makes an appearance at Config. This would be really useful to my team!
+1 vote
Ive had to create multiple token values for each font size used to ensure we have scalability for our design system, which is a massive pain in the butt…
Similar to branching, this is like someone who never used tokens for typography designed this. % for line height is missing, you still have to make styles instead of going towards the tokens standard. it’s so weird…
well… untill you realize “Hey we got number and string variables… it’s cheaper to just allow them for the existing fields instead of making something good… should we do it the cheap way?”
Anyone find any solution to use % in line-height?
This is absolutely needed, line height vars are un-usable without %. Come on people.
I love you Figma but im heavily disappointed the line-height percentage support wasnt announced at Config. This is a major blocker for a vast amount of teams that work with design systems.
It would be important for Figma to consider this issue and implement % in the line-height variables. I was waiting for this technical debt to be resolved in Figma config. We are waiting for this correction so that we can fully implement variables in typography.
I completely agree. Line-height should be percentage-based, so please get this minor fix implemented asap. 🙇♂️
So no updates on this so far? It’s a blocker for typography variables setup.
Please, we can’t consider using typography tokens unless we can use percentages.
+++
Please add percentage support 🙏
+1 Not possible to model design system line heights without using percentages.
I agree, it would be a huuuuge improvement! 🙏 🙏 🙏
