Hi everyone, in this video we are going to look at... how to switch from the resizing fixed Hug Fill using shortcuts... the short answer is, double click the edge for hugging... and 'Option', or 'Alt', double click to go to Fill... why is this video so long? There is a couple of things you need to know...

but not much more... let's rebuild this and I'll show you the tips and tricks. All right, to show these shortcuts, let's grab the 'Type' tool... and draw a Type box, like a rectangle... so it's going to be a fixed size box... I'm going to put in some text, you type in some stuff...

or paste in some Lorem Ipsum... and I am going to use the Frame tool... so I'm going to hit 'Esc' to get rid of it all, 'F'... and I'm going to draw, like a line here, I'll use a frame to do it, with a Fill... of that, how high? It's going to be a height of 8 pixels...

let's turn this whole thing into an Auto layout... and the way this needs to work is that, make sure that your comment box... everything that we've drawn so far is inside of it, you, you, you... going to give this a name... will be my "Rule"... everything here is going to be 'Shift A', it's going to be an Auto layout...

mine's going to be top left... so let me show you how responsive this is so far, not very responsive. So to make it responsive we need to play around with the resizing, that's Hug and... Hug and Fixed Height... instead of playing around with these drop downs you can use shortcuts... let's look at the first one, Hug...

let's say I resize this box, through my designs, I realize it's gone to Fixed... I can go and change it to Hug, or I can use a sweet shortcut... all I need to do is double click the outside of this box... and you can see, undo, Fixed, to redo, Hug... same for the width, if you want the horizontal to be hugging... just double click the edges, snaps to resize it...

text works slightly differently, kind of the same sort of thing. So I want it to Hug, because at the moment this thing is a Fixed Height... when it goes outside of that, my parent frame doesn't know what's going on... it only sees this text box... it doesn't see all this other stuff so to get that to switch to... hug contents, slightly different with text...

the operation is the same, so I'm going to hit 'Esc' to get out of Text mode... just double click the bottom... instead of going to Hug, which it kind of does... it actually switches it from this fixed height box to auto height, same, same... but now if I double click, copy it, paste, paste, paste, now it's responsive... so double click the edges to switch it to Hug...

the side here for text, if I want it to hug, if I double click it... it doesn't quite do what I want, because-- it does... it hugs the contents, and the contents doesn't have a break... so it just goes on forever... so it switches to this option. So when you're using a box, when it's a frame or an auto layout...

double click it, it will hug the contents... for text it does similar, but different options... it converts it from there to there, to there... Fixed to Auto Height, to Auto Width, just double click the edge. The one I end up using more often is the next shortcut... same thing, you double click the edge but you hold down the 'Option' key...

what does that do? Goes to Fill Container, so let's have a look at this... this, not very responsive, but if I click the text here... hold down 'Option' key on a Mac, 'Alt' key on a PC, and double click the edge... see, at the moment it says Fixed, watch this, bam... Fill, fills the container, now it's all sorts of good resizing...

let's do the same for this little bar here, little harder to click... but if I hold 'Option', double click, switched to fill the parent container... cool, huh, so that's it, double click the edge for Hug... 'Option', or 'Alt' double click the edge for Fill, handy... all right, that is it, see you in the next video.