Skip to main content
OG_Can
Active Member
June 27, 2023

Use percentage for size variables

  • June 27, 2023
  • 79 replies
  • 27727 views

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.

79 replies

John_Jackson
July 5, 2024

I don’t understand how this is still unsupported. Figma has built in percentage support for things like line height. Why in the world would they release variables without supporting percentages?

July 22, 2024

PLEASE for corner radius and stroke, too.

davestewart
July 23, 2024

Another +1 here.

Tried to save line-height percentages as variables (i.e. "loose": "200%" ) and it seems they are unsupported, even as strings.

CleanShot 2024-07-23 at 15.12.47

Shayne
August 1, 2024

Upvote for variables using percentage. Would definitely use this feature.

Juan_Guzman
New Participant
August 4, 2024

Absolutely +1 for this feature

Lea_Rosental
New Member
August 6, 2024

+1 also for the Topic and there are many more ideas around percentage: Fr/Percent units for more control over auto layout content

goatdev
August 30, 2024

@atien +1 for this feature. Will also be especially useful for things like line-height and letter spacing. We use unitless values in CSS not fixed px values which could vary between fonts and modes.

Jakob_Schleenvoigt
New Member
September 2, 2024

Absolutely a good idea. Need it for line height and letter spacing.

LXNDR
New Member
September 12, 2024

I feel like this feature is almost a requirement to have considering modern webdev principles. Percents should also be applied to the Variables features. Currently there is only a “Number” variable, which is just limited to floating point numbers, very limited application.

The only cases I can see that it may cause issues is for values that aren’t entirely tied to dimensions, but for line-height. This kind of case, should always be relative to the font-size (e.g. if Variable-A = 150% or 1.5x, and another variable Font-Size = 16, a third variable Header = Font-Size * Variable-A wold result in Header = 24)

This could also help with opacities in colors and pass through %.

Overall, the feature would help to streamline not just the concern for responsive design, but also unify other features as well.

Matty_Vazquez
Active Member
September 18, 2024

Yes, this is needed! Also seems to tie in with these threads about % as well: