Use percentage for size variables

It will be easy if using manually and so helpful, I hope to apply this feature, its from my biggest needs

I applied this way but its so difficult and not helpful

Hi Guys,
@OG_Can I think i have use case also.

Progress bars: From Figma community to personal experiments building responsive progress bars are not great…

What I do is:

Level 1: Get a Main Frame (Main Container) apply autolayout → and fill with no padding so it adapts to the Page
Level 2: Add additional Container (Frame) with autolayout so if needed round corners of progress bar and apply other effects; autolayout → paddding 8px
Level 3: Add 2 Frames: First with the % and the other with fill

So this works fine if I make variants based on predefined frames, but if needed to adapt to all screens I’m toast. So If in Level 3 if the left frame was X% of the Level 2 frame and the other in fill then it would ajust just fine.

I believe percentages for variables can be very useful for line heights. Setting only 2 or 3 variables, such as 100%, 120%, and 140%, will prevent the need to adjust the line height to a numerical value. Currently, if you want to cover all screen sizes, the font sizes might range from 12 to 20, requiring you to create at least 8 to 16 different line heights.

Yes please! and also for Letter spacing! It doesn’t make sense to have fixed numbers for Lineheight and Letter spacing. With that, in our system we would have to add a variable for each textstyle, whereas if you do it in percentages you would only need 2 or 3. For example: 115% lineheight for titles and 150% for body.

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.