Skip to main content
Question

Combined Auto Layout & Fixed Position


Miftakhul Rizky

I’m currently designing a dashboard with a base size of 1920x1080 and making it responsive using Auto Layout, so it can be previewed properly at 1280x832 and fit the screen responsively. Is there any specific method to keep the top bar in a fixed position when using Auto Layout in Figma, other than using "Ignore Auto Layout", since that method doesn’t support fully responsive layouts?

I’ve attached a video to help clarify the issue.

https://drive.google.com/file/d/1GH6t5Mp8KF2VIXuZpbyOGoKWR8hjz84a/view?usp=sharing

7 replies

Raphael_M
  • Power Member
  • 348 replies
  • April 14, 2025

It should be still possible even if you put it in absolute position (ignore auto layout) if you properly set the constraints of the layer. But if you’re just talking about the prototype you can just set the header into sticky so it would stay in place without putting it on absolute position.


Miftakhul Rizky
Raphael_M wrote:

It should be still possible even if you put it in absolute position (ignore auto layout) if you properly set the constraints of the layer. But if you’re just talking about the prototype you can just set the header into sticky so it would stay in place without putting it on absolute position.

yes it's possible when only top bar using sticky, but i need sidebar to fit the screen, because there is a menu that fixed to the top and bottom of the screen


Raphael_M
  • Power Member
  • 348 replies
  • April 14, 2025

Hmm. So it’s not just the topbar but also the sidebar? Can I see how you structured your layer, because you can control the scrolling on your layer.


Miftakhul Rizky

sure, this zip contain screenshoot & video is what I want, but I can't because I use responsive auto layout


Raphael_M
  • Power Member
  • 348 replies
  • April 14, 2025

Weren’t you able to do it? Anyways, based on what I understand here is this is what you want:

  1. Full responsive auto-layout
  2. No absolute position (ignore auto layout)
  3. Only the content is scrollable

 


 

  1. Have you tried just adding the scroll on the Main Content container only?
  2. Is your side menu vertically responsive? Based on the first video, it’s not but on the second video, it is.
  3. You can’t set scroll/overflow if the content is less than the parent container, all the contents should be longer than the container.
  4. All the container and it’s sub content should be on Fill
  5. Side menu panel gap should be in auto or one part’s height is in fill if you want it to be sticky at the bottom (i don’t recommend it because when you expand the number of menu, you’re going to be having an inside scrolling menu though not sure if that’s going to be intended on the design).

Miftakhul Rizky
Raphael_M wrote:

Weren’t you able to do it? Anyways, based on what I understand here is this is what you want:

  1. Full responsive auto-layout
  2. No absolute position (ignore auto layout)
  3. Only the content is scrollable

 

 

  1. Have you tried just adding the scroll on the Main Content container only?
  2. Is your side menu vertically responsive? Based on the first video, it’s not but on the second video, it is.
  3. You can’t set scroll/overflow if the content is less than the parent container, all the contents should be longer than the container.
  4. All the container and it’s sub content should be on Fill
  5. Side menu panel gap should be in auto or one part’s height is in fill if you want it to be sticky at the bottom (i don’t recommend it because when you expand the number of menu, you’re going to be having an inside scrolling menu though not sure if that’s going to be intended on the design).

yes it works, but when accidentally scrolled in the sidebar or navbar, it will go down


Raphael_M
  • Power Member
  • 348 replies
  • April 15, 2025

Ohh, I think that’s a bug. The extra white space right? Not entirely sure what causes it. The size should be the same size of the main frame, for the content to be overflowing with all contents heights on fill means that it’s not working as expected.


Reply


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