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.

Adding my voice to this feature request, would be much more convenient when dealing with various size for parent component.

I also have so many use cases for this within design systems (making components responsive)

This would be so helpful to have for developing responsive components and would also help with dev handoff. Currently to implement a component that is 60% image and 40% copy area for multiple breakpoints I have to create a different component variant per breakpoint as auto layout will only give you a 50/50 split when filling an area with 2 frames inside. Seems like an easy win in getting Figma closer to CSS and seamless dev implementation.

+1 here i’d love to have percentage based resizing

+1 (Million) to using percentages for width and height in auto layout children elements!!!

Filed a similar post here: Allow for relative values in Variables, lineHeight as a percentage of fontSize

With the added support of variables for text properties, we can’t use variables because our lineHeight values are relative to the fontSize using percentages

Yep +1 to this. Re-useable components would be so much more flexible if we could work i percentages rather than pixels. It’s more accurate to how we might code a site too - so more useful into transition to development.

+1 Please make this feature happen, it’s silly to have static values, this would eliminate the need to be able to set them to Fill. For example, on mobile I want to set buttons to fill but can’t in variables, setting to 100% would eliminate that other need plus add ability to variate even more

Line height and paragraph spacing as a percentage of the text size please

Yes, we need that please !

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.