Skip to main content

Firstly great job Figma Font variables are here!!!



Figma tutorial: Variables for typography



The only thing missing is the use of percentages in the line-height property.


You can not use a percentage in the line-height as it only accepts variables that are a number type.


Although the variables for line-height caters for pixel (absolute) line-heights (10,12,14)- it does not accommodate relative line heights.


In other words you can’t use percentage variables for line heights that are a percentage of the font size (100%, 120%,150%).


image


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.

Chiming in that this would be extremely valuable to my team.

Come on guys. This is a basic but needed feature!

This is very much needed and an oversight by Figma, please introduce relative units for line height! thanks.

+1! Needed here as well!


  • 1 - this is needed!

+1 Really need this feature!

+1 We need percentage line height plz

As devs, we always use relative units (eg: 150%, 1.5, or 1.5em) for line-height. It’s funny that till today, such a basic web typography property isn’t supported in Figma. Please get this in ASAP.

Upvoted! This would be really helpful as we use a percentage such as 125% for heading and 150% for body copy.

+1 Much needed for design system consistency between teams !

Yeah, at that point you are hurting yourself.


Just use a percentage value in the style and save the headache. Too much chance for error and waste of time maintaining tons of excess variables.


Until that works properly and supports percentage in the variable, my team has better things to do.

That is the same thing as just typing in a text value.


Sure, IF there was some way that the variable would apply your equation to the actual style setting field, then yes.


But here all you are doing is typing in a math problem.


You still have the same issue…you have a fixed value to update in each and every line height variable if you ever change the font size variable.


It would be fine IF the equation could be advanced enough to use the font size variable in the math probelm so it did not have to be manually manipulated in every lineheight variable.

Definitely need this.

Needed now now now now now

Currently working on a design system. It’s sad that this is not implemented yet. Makes me wonder how to contain line height in a variable that makes sense for our code department as well.

Reply


Terms & ConditionsCookie settings