Allow percentages for line height

Firstly great job Figma Font variables are here!!!

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%).

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.

47 Likes

Is there a way to use % based line heights with Figma variables?

6 Likes

Seconded! This would be very helpful!

1 Like

1000% Second! - best practice on the code side is unitless numbers. Which we translate to percent in Figma. (1.5 = 150%)

5 Likes

I just asked myself the exact same question. It seems that it does not work - very sad!

1 Like

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:
    CleanShot 2024-04-17 at 18.52.39
15 Likes

Agreed, we need percentage based line-height

3 Likes

+1 from me for percentages and for enabling formula.

2 Likes

I totally agree, using a single number is neither used in code, most of the time it translates in 1.5 for example.

2 Likes

Much needed.

1 Like

+1 (million) from me! once i read the news i expected this to be shipped with % support

2 Likes

Definitely needed. Don’t particularly care about the format (eg. 1.5 vs 150%)

5 Likes

YES! Just working on that and I’m so confused they forgot about that…

1 Like

:100: This would be really helpful!

Expansion on Why It Would Be Helpful

I’m a Product Designer working closely with developers to update our hard-coded UI using a design system.

  1. 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.

  2. 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.

  3. 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.

  1. 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 :sob:
6 Likes

Great new features but this is 100% (Badum tss) missing!

3 Likes

yes, please

1 Like

Yes, please :slight_smile:

1 Like

Much needed in my team too :pray:

1 Like

I’ll add that this would be very helpful. Percentages all the way!

1 Like

Agree this would be super helpful!

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 %.

3 Likes