Skip to main content
Question

Auto-Layout for Top Level Frames

  • January 29, 2021
  • 5 replies
  • 2088 views

Jim_Muirhead

Has anyone found a way to set up top-level frames so that they auto-resize in height (or width) based on the content in the artboard?

This topic has been closed for comments

5 replies

Gleb
  • Power Member
  • 4707 replies
  • January 29, 2021

What’s the issue with them? Just add auto layout, like with all other frames. Top-level frames are not some kind of special frames where you can’t add auto layout.


Jim_Muirhead

The issue arises when you are mixing fixed elements like app bars and nav bars with scrolling elements like the body of the screen. It doesn’t seem possible to mix fixed elements and scroll elements within a top-level frame with auto-layout set. Here’s my test file.

Figma – 29 Jan 21

The first frame in the file has Auto-Layout applied, and yes it will grow and shrink in height based on the amount of text in the Body frame, but it’s not possible to fix the Header or Footer frames to the top and bottom of the screen respectively.
The second frame does not have Auto-Layout applied to the top-level frame and I’m not able to fix the Header and Footer frames. The Body frame has Auto-Layout applied and does grow & shrink in height depending on the amount of text, but has no effect on the height of the top-level frame on the canvas and cuts off the scrolled content when previewed if the Body frame is not completely visible on the Canvas.


DesignedByPaul

Framer has this feature in “Stacks” (Their version of Auto-Layout). They allow you set “Fixed” Headers and Footers inside an Auto-Layout Frame.

It would be nice if Figma could support this feature in the future as well!

I prefer to Design all my Mobile Layouts with Auto-Layout applied to the Top-Frame, so that would solve a lot of issues 🙏


Aaron_Lawrence

Yes, I would like the same as well


Pavel_Kiselev
  • Power Member
  • 438 replies
  • November 4, 2024

I would make a top level frame fixed width and height. Header width is fill container, height is set to hug. A body to fill the space both horizontally and vertically, clipping is enabled, scroll set to vertical. Then goes footer, same setup as for header, width → fill, height-> hug.

This one is super basic but you get header and footer always present and the scrollable body which is perfect for all sorts of presentations

If you want the content to appear beneath header and footer, let’s say there is background blur effect, then you would need to make it a bit more complex, remove clipping from the body and nest some parts to benefit from the ability to change a stacking order in auto layout frames.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings