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.
3 Likes
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.
1 Like
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!
1 Like
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…
1 Like
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.