Use percentage for size variables

Hey @OG_Can,

To get some more clarity on the request, were you looking to set a variable to a certain percentage value and, when switching modes, the dimensions would scale to the percentage of the mode you were switching to with respect to your source mode variable values? i.e. scale factor vs static value

Hello @atien . Yes, I have a parent frame that acts as the viewport, and within it, I have a content frame. I want to be able to have this content frame have 100% height when I switch modes. Currently, it allows me to set a static value in pixels, but it does not allow me to put 100% or 75%, etc. So, when I switch between modes, the height of my frame changes rather than having a relative or fill behavior.

A use case: I have different viewports to show the client options like tablet vs. XXL screen. As the content area width increases in XXL, the bottom elements designed to stay at the bottom start to come up as there is more room to expand the content since I cannot use fill or 100% height.

At least, I could not find how to do this within the variable table under different modes. I can apply this manually to frames, but it is a burden to update everything once you have many frames to juggle.

Thank you for your assistance.

Hey @OG_Can,

Thanks for the confirmation!

At this time, we only support defining static values in variables (or aliasing another variable thats a static value).

That being said, I can definitely see the value in this use case.

I have shared this with the team for their consideration. With some luck they’ll add it to the roadmap at some point!

I kinda found a way to do it. Lets say you want to have a component using 50% height of the frame:

make sure your frame is in auto layout, select the desired component, make its vertical resizing to full then switch it to fixed (it should cover 100% of the frame) then enter 50% inside the height value. It will resize to 50%.

Would be cool to have the option to put percentage variables tho, didnt find a way for that yet but hey its my first day on figma…

Hello @Pier-Antoine_Veilleux. Thank you for sharing that tip. It is a good suggestion and it usually works well. One bug I bumped into is, when applying responsive behavior (wrap function), things go haywire if the spacing is set to auto instead of a fixed value. Haywire as in; the wrapping container does not hug contents, and any other frame following the wrap overlaps with the said container.

Like, think of your footer suddenly floating over your main content area.

When developing components/websites/app UIs in actual code, the concept of percentage sizing has long been standard. I would really love to see this come to Figma.

Why would this be helpful?
Percentage sizing is an incredibly powerful tool for responsive design. If you could specify percentages, components and frames could expand/collapse as needed depending on the frame size (i.e., mobile, tablet, desktop).

How could it work?
I imagine that when you input width/height values, you could add a percentage and the hight would then become that percentage of the parent containers size. (i.e., Frame A is 400px wide and contains Frame B. The Size of Frame B is input as 75% and now Frame B’s size is calculated as (Frame A x 0.75). Additionally, including this option in the auto-layout padding/spacing inputs would be amazing. For auto-layout, the percentages would simply be calculated as (current frame W or H x %).

Thank you!!

Hello,

I also have this need, while designing a design system we are using variable as design token in order to define each value. Most of the time size are related to a specific pixel size itself predefined as a variable. But in some case this size will change in order to take 100% of the component size (for example), so I need to replace the token to another one in percentage.

Please add a width and height modes that are described in percentage of the parent container.

Hey,

It would be great if I could set my components to “Fill container” and set a percentage in which the component would fill.

Also have a need to have responsively percentage-based sizing. Without this, child frames fall off the grid as parent frames are resized.

In designing templates, I have a frame that needs to take up 25% of the screen at any size. So, when the designer stretches or shrinks the template, that frame needs to still take up 25% of it’s parent frame.