Hi everyone, we're going to look at doing the auto spacing... between these different icons... because at the moment we've got something that is quite manual... the problem with it is, if we turn on other icons things don't reflow... well, don't reflow very well, everything kind of spills over... whereas this one here, now that we've got the auto setting going...

when we turn on our little Ticket, you see, everything reflows nicely... we've still got all our paddings on the left and right... everything is nice and responsive. We'll also do a little bit at the end, after we learn auto... just to add some kind of like... rounded corners and interface kind of color in the background...

a little drop shadow here, on our Auto layout, for no good reason... other than to actually make something during this course... rather than just learning individual tools, let's make something together. To just set this to Auto, instead of a fixed space between... like 98 that I've got... all you do is, with it selected, over here, under Auto Layout...

go to the three little dots... and let's change the spacing mode from Packed... which means they're squeezing together as tightly as they can... given the size of the icon and the fixed dimension that I gave them in between... what you can say is, like, don't be Packed, be 'Space Between'... can you see, just above my cursor, there it says Auto...

so it's going to automatically space them out... and because there's no padding on the outside it just spreads out... doing exactly what I want it to do... just need little bit of padding either side. So I can hover above it... if these little pink lines don't appear it means you probably zoomed out too far...

they just don't appear when you're zoomed out... you're going to be zoomed in close enough so that it can see... it's got enough room, real estate to kind of actually show the little pink lines... what I'm going to do is I'm going to drag in some padding... you can do one side at a time, that's fine... or you can - undo, undo.

- hold down the 'Option' key on a Mac... 'Alt' key on a PC, and it does them both at the same time, and drag them in... I've dragged mine in 48, you drag in yours the way you want... but the cool thing about it, once I've set my margin, these, is just auto... can you see, they just resized to fit... and that means now, if I add it over here, oh...

drag it across, holding down 'Alt', or 'Option'... watch this, if I drag the corner now, can you see... it leaves the same margin because I've decided that... I say margin quite a bit when I mean padding... padding in Figma, Dan. So I've still got the exact same...

padding on the outside, which I want for consistency across different apps... I've got a bit more space though, and look, auto goes and fills that space... why is that good, right now you'd be like, "Eh, I can do that"... it's when you have to turn on and off different parts... and get things to reflow. So at the moment, down here, watch this, is the old one with the fixed spacing...

if I turn on my Eyeball, watch this, turn it on, it gets wrecked... because of my fixed spacing... it tries to force all of that to happen... and it's just not enough room, whereas if it's Auto... I can say - where it is? - I can say, you turn the eyeball on my Ticket Sold, look at that...

everything reflows, Auto is awesome. I want a specific padding from the edge for consistency... but these are allowed to jiggle about. Now what I tend to do do is, not use the long way... the Spacing Mode, Packed, Space Between is fine... you can do it a quicker way and just replace the number in here...

the horizontal space between items... space between our icons, just double click and just type in "Auto"... it's generally quicker and easier... you can kind of see the icon change, look... before, after, before, oh, before, after... you can actually type it in down here as well, watch this, if I go 'undo'...

you can click it once, and you see, it says 113... type in "Auto"... we used our shortcut, remember, 'Alt', or 'Option' to drag both sides at once... or you can type it in over here, you can say... actually, left and right is going to be "48"... or maybe "56", depending on how much padding you want.

Next thing I want to do is, I want to style the frame... this is totally nothing to do with the auto layout... we just need to do this before we go away, because... I find that working in a rectangle is fine, but if you look at your phone... you'll notice that you don't have a rectangle... it's rectangle-ish with rounded corners...

so I'm going to do that to our frame before we move on... you can skip ahead if you don't want to make rounded corners. I'm going to click on the name iPhone 14, to click on that frame... and I'm going to say, you have a border radius of "30"... and it goes around all of it, it's more realistic for a phone... especially when you're trying to do margins and padding...

can you see, it kind of was too close to the bottom... but with the rounded corners, exceptionally too close to the bottom. So I'm going to click on my 'Auto Layout' and I want some padding from the bottom... 24, that's about right... if you are thinking, "What is about right, who makes these rules?"  You can make your own rules... depending on how much you're using the operating system...

like Android or iPhone, how much you want to mimic it... or how much you want to do your own thing... if you are looking, and you're like new to UX, and new to UI design... and you're finding a little bit tricky, you're like, "Why did he pick that?"  What I tend to do when I'm working on a component that I don't know much about... like this bottom Nav... I'll go check out the iOS documentation or the Google Android documentation...

let's look at one of them, you can look at either of them, both of them... let's have a look at this one here, so I'm using the Android one... I do a lot more design on Android because that's the phone I have... it's what I want to test on... and they have a really good documentation... Google Android call their design system, called Material...

it's at M3 at the moment, it might be M20 by the time you get to it. The nice thing about it though is... you can go to things like this, go to 'Components'... have a look through... see if you can find the name of the thing you're trying to design... and if you're new to UI design you might not even know...

you might have to go spend some time in here, go... "What the hell is a Navigation Drawer, what's a Navigation Braille?"  Some of them are easy, like I want a Navigation Bar... the cool thing about it is that it will have a lot of documentation about... how to use it, where to use it... the best thing is, can you see, there's actually a Figma design kit for this... you can open it and start copying and pasting bits out...

too good, have a read through... it's good to get your language correct... so you know you're using, you know, a Burger menu, not a Nav Sandwich... because nobody calls it that, except Dan... and you can go through and find out all sorts of stuff about spacing... how far from things should be, there's lots of good stuff in here...

how many you should fit in here, how many should not fit in there... how big they should be so that they're clickable, loads of good stuff... along with examples. Now we're doing it for Android here, you can look at the iOS, Apple's version... you can look at maybe a framework that you're using... say it's a web design that you're doing, have a look what they've done...

Bootstrap, Tailwind, WordPress... they'll all have specific kind of like documentation... about how things should, and be implemented... and you can use that for a starting point for your design. Next thing I want to do is, I've got my rounded corners... I want to make this a little bit taller...

I would like to have a little bit of padding at the top... often it's more padding at the bottom than the top... kind of think, think framed photograph or framed painting on a wall... the kind of like chin at the bottom there is more than the top... gives it kind of a nice footing foundation... and in our case keeps it away from the edge of the frame.

The other thing I want to do is I want my--  you saw at the beginning here, maybe you did... I want the background color to be... a slightly different interface color than the front here... to make this stand off a little bit... so we're just doing some basic stuff, you can skip ahead now... no more cool Auto layout stuff, more just design-ey stuff.

So I'm going to make the iPhone a particular color... so FFF is the white, F7 is what I like... and with these colors here, if you just open one... I know that the color I want is F7F7F7, on repeat... if you just type in one of them and hit 'Enter'... it will fill them all out for you and give you the color you want...

that's the color I want, kind of a darker gray... kind of like that Windows operating system background color... it's so that when I go to this Auto layout down here... and I say, I want you to have a background fill of white... you can see, there's a bit of contrast between the two, not huge... it just allows us to see the boundaries between these two...

and what I'm going to do is, actually, add a little bit of a Drop Shadow... so I'm going to say, 'Effects', I'm going to say, 'Drop Shadow'... and click on the little Sun to change it, I want it to be up a little bit... and I want it to be 0 down, and I want it to be blurry... and I want it to be, I don't know... let's have a look, 'Shift 1' to see everything, it's probably a bit strong...

so I'm going to say, you're down to 15... there we go, I want just that little subtle hint that... "Look, I'm separate from this."  So now I want to copy this frame details to this one... so I'm going to select the frame title, let's go... 'Command Option C', so it's kind of like copy, but with that extra key... on a PC it's similar, it's 'Ctrl Alt C' to copy it...

and then over here, it's those same two keys, and 'V'... and it brings through my background color, brings through all the radiuses. Now there are shortcuts, where you're like... "Man, I'm not going to remember all these, Dan"... what I find is that, the super shortcut... that everyone might know, that you might not...

I've got it selected here, I can't remember what Paste Properties is... so with it selected just hold down the 'Command', or 'Ctrl' key on a PC... and hit the forward slash, '/'... have a look at your keyboard, it's the forward slash, one that leans forward... and just type in, I don't know, "properties", you can see there... Copy and Paste Properties...

you'll learn the shortcuts, but also... it's almost just as quick just to click on these... especially if it's not a shortcut you use all the time... it's 'Command' on a Mac, 'Ctrl' on a PC, and '/'... you can get any shortcut you like... Paste Properties, I did not need it on that.

So we have run into a little problem... this has updated with a Drop Shadow and it's got a white background... this one didn't, why not? Oh, because it's not a component, components inside components... let's do that in the next video.