Skip to main content

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?

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.


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.


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 🙏



Yes, I would like the same as well


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.


Reply