From what I see, Figma is struggling with variable heights, especially the ones relative to the viewport (heights of design elements vs height of the prototype and its elements when previewing, relative to the viewport).
For example, you can’t have a section on a homepage be 100% viewport height both in the design and when previewing (which is the MOST ESSENTIAL, BASIC necessity in web/app design).
Suggestion to fix this:
- A new option for Frames, a separate set of dimensions called “Viewport dimensions”
- These dimensions will NOT affect frame dimensions.
- Instead, these dimensions will provide variable boundaries which design elements can refer to, and adjust accordingly in both design view and when previewing a prototype.
For example, your main frame is 1920 x 8000 in design mode and you have a section (auto layout) which should be “full screen height”. This can be a 1-click solution, here’s how:
- You select the main frame and set its “Viewport Dimensions” to 1920x1080
- You select the section (auto layout) and set it’s height to the “Viewport Height”
- In the design view, it will automatically refer the “Viewport Dimensions” and set the section’s height to 1080px
- When previewing the prototype it will match the ACTUAL viewport height
- Additionally, people would HUGELY BENEFIT from having the options to set the “Percentage of the Viewport Height” as well as “Viewport dimensions” being available for min-height and max-height values of the auto layout as well.
Why this?
- This is of course the CSS vh and vw i.e. Viewable Height and Viewable Width, which are a MUST for any web/app design past 2012.
- Designers will have much more accurate representation of their final design in the design view
- Designers will not have to mutilate their design in design view in order to achieve this most basic web/app elements behavior in final preview.
- Clients will have a better previewing experience
- Developers will have the actual units they need