Skip to main content

I cannot figure out how to use auto layout space between like this Youtube video - 

I have 2 auto layout components that are in a auto layout component wit 1440 width. 

 

How can I

 

  1. Put equal spacing between so they are positioned to the front and end of the nav.
  2. How can I add padding to the left side of the logo (first component)?

 

You wanna set it to auto to add spacing in between. To set padding to one side only, you can expand the individual paddings and assing a value to one side.

 

A quicker way to add the auto spacing is to double click any of the alignment points.

 


Thanks. I am now trying to achieve this. But, am stuck. Should the main artboard be turned on auto layout. I am unsure how I would add the titles component next to the left navigation? Should the left navigation be combined with the titles group component?

 

It should look like this -

 


You should add a wrapper frame with a horizontal auto layout. See the dotted frame in this image:

 


Thank you! Should the gray background be a frame and then used as a auto container with the white auto container box I created? I can’t seem to add padding around the white box/remove padding above it. Thank you so much!


  1. Also - I can get these tiles to be responsive with reducing their auto layout container. But, they do not become responsive when reducing the white box or main parent?

Thank you SO MUCH for your help!

 

 


Thank you! Should the gray background be a frame and then used as a auto container with the white auto container box I created? I can’t seem to add padding around the white box/remove padding above it. Thank you so much!

 

Yes, I would make it a vertical auto layout with padding and vertical overflow if you’re gonna have scrollable content.


If you want a fully responsive design, then your starting point should be to make ALL frames auto layouts, and work with the auto layout controls. Do this and most of your “this and that is not responsive” problems will vanish.

Your issue with the tiles probably stems from any of their parent frames not being an auto layout. Make sure to also apply fill container width to the tile wrapper to constrain it to the width of the parent frame.


Reply