New Participant

Allow percentages for line height

Forum|Forum|2 years ago
April 17, 2024
197 replies
25154 views

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

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.

Show previous replies

Stewbot

New Member

Would’ve taken this over extended collections any day. The presenter who drops this during Config is going to bring down the house.

Design System

New Member

If this limitation is blocking your workflow, we recently released a solution that might help: Line Height Tokens, a Figma plugin designed specifically to bring true proportional line-height (unitless → %) into Figma — exactly the way it works in CSS.

https://www.figma.com/community/plugin/1577516978004090936/line-height-tokens

Figma currently treats all number-type variables as absolute pixels, which prevents using tokens like 1.4, 1.5, or 150% consistently.
The plugin solves that gap by converting unitless values into real visual percentages while keeping the connection to your original variable.

✅ Why this plugin helps

• True proportional line height (CSS-accurate)
You can define 1.5 in your tokens, and the plugin will apply a visual 150% in the canvas — perfectly matching line-height: 1.5; from CSS.

• Works with existing typography tokens
It plugs directly into your current font-size, line-height, leading, or type-scale variables.

• Clean, scalable Design Systems
You no longer need huge lists of redundant px-based height tokens.
One unitless token = infinite scalability.

• Full visibility in Dev Mode
Thanks to Codegen, developers see the actual token name + the final CSS snippet when inspecting text.

• Smart bulk updates
Update a variable (e.g., from 1.5 → 1.6), run “Sync Page”, and every text element updates instantly.

🚀 How to use it

1. Create your tokens
In Local Variables → Numbers, define unitless values like:

lh-base: 1.5 lh-tight: 1.3 lh-loose: 1.7

2. Apply the token
Select your text → open the plugin → click the token you want.
The plugin converts 1.5 → a visual 150% line height.

3. Inspect in Dev Mode
Developers will see the exact CSS:

line-height: 1.5;

4. Sync changes globally
If you change a variable value, run “Sync Page” and everything updates across the file.

If you're building Design Systems or matching UI ↔ CSS behavior precisely, this plugin fills the missing piece until Figma supports %-based line-height natively.

Happy to share more if helpful!

Barry Lachapelle

New Member

Not having this makes tokenizing type in any meaningful way impossible.

Leo4411

New Member

This is needed! Also seems to be similar to these threads about %:

Use percentage for size variables Share an idea

Hello. I was wondering if it is possible to have percentage values in variables, like setting percentage value for frame widths or shape sizes (etc.) that have variable modes applied to them? Percentage values could respond better to content that varies within a frame or frames within frames.

Use percentages for heights, widths, margins, gutters in auto layout Share an idea

This makes it easier to use components in designs for different screen sizes. And then you don’t have to calculate every time what 40% or 60% of the width is. This also makes it easier to design scalable applications that grow with the width of the screen.

Totally agree, this is really needed. And yes, it ties in perfectly with those percentage-based variable requests. Having true % values for widths, heights, margins, and other properties would make responsive layouts so much smoother and remove all the manual calculations we do today.