Use percentage for size variables

To have percentages in autolayout would also be great. Or maybe you can make this dependent on grid, so that you can specify a number of columns for example in a grid of 12 columns. You would als have to take the gaps between columns into account so that is a little more complex.

Kind of weird, because there are some cases where relative values (%) are possible like here (letter spacing):

And when appling a variable it only supports pixels:

That’s bad and should be supported.

+1 Strongly needed. For instance, during development, I always use the ‘calc’ function for mobile sizing. For example:

@media screen and (max-width: 479px) {
    html {
        font-size: calc(0.75rem + 0.42vw);
    }
}

This method is efficient and generally ensures that everything fits perfectly with minimal adjustments. The challenge, however, is keeping the mobile designs in Figma synchronized with the actual scaling used in the developed version. Therefore, utilizing relative size units would be optimal, especially when combined with ‘calc’ to mix different size units. Additionally, incorporating the frame width as ‘vw’ should be quite feasible. It should also be possible to set a base font size in Figma for specific frame widths.

Please add 😇

Please dear God, prioritize this. It would save SO much work.

Yeah that’s how it should actually work, but that’s not the way it works in Figma. Causes so much pain and violations of the DRY principle.

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?

PLEASE for corner radius and stroke, too.

Another +1 here.

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

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

Absolutely +1 for this feature

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

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

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

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.

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

+10000, I find responsive designing for handoff to devs SO tedious, borderline unusable in Figma, without a whole lot of variable malarky to set up breakpoints with max & min widths for like 5 screen sizes.

If percentages were just a thing, it could be truly fluidly responsive for maybe just 2 screen sizes, mobile & tablet+, and usable outside of the flexbox ‘fill width’ model which doesn’t allow for fully custom design by a grid (5/3 columns designs on an 8 column grid, 6/3 columns on a 9 column, etc).

This is needed! Any progress Figma crew?

So development time from Figma was used on a new UI that is not as functional as the previous UI was, but percentages STILL haven’t been added?! Come on Figma! Get your priorities straight. Give the users what they are ASKING FOR, not what you hope they will like.

+100000 This would definitely help when designing data tables especially when you want a column to have a specific percentage based on the table’s width.

Needed here as well - be it allowing float values (e.g. 1.2) or even 100% as string would do. But strings are not allowed - why? . Now we need to manually convert all values later in deployment have another manual conversion sheet for all the font styles…

Does Figma developing a percentage for size variables?
It is crucial for building cross-platform applications as there are countless screen sizes…

this is crucial. use cases are endless. Especially since designing fluid layout’s is becoming more and more crucial with the rise of foldable devices

Not being able to use percentage in variables for line height is a huge blocker. Could you flip it around and instead make it possible to interpet numbers as a percentage value if used in line-height? I mean, we already have the possibility of defining percentage in the line height field. Please look into this 🙏

This is such a frustrating gap in Figma’s abilities. I can’t fathom why it’s not a priority.

We are building the design system using variables, and we need letter spacing to support the percentage value variable because we need to quickly convert from percentage to em instead of using the pixel.