sometimes figma can feel a little overwhelming right uh so I've put together uh seven tips to make figma less hard and you a much more awesome ux designer all right my name is Dan Scott I am an award-winning instructor and chief course creator here at bring youron laptop.com and today I'm going to show you how to be more super awesome with figma all right tip Number One Auto layout Mastery we spend so much time with auto layouts any time saved compounds over the day so I've got some icons hanging out down here in a frame if I select them all we use our first sweet shortcut shift a to make it an auto layout you already knew that let's make it reusable so a component command option K on a Mac Control Alt K on a PC all right I'm going to have one on here one over here right first tip let's add some padding here we can use commas so on the top to be 10 comma 15 hit enter look at us we're basically front end developers or Cody and C once you've got some padding you can actually drag on the document looking for these kind of like checkerboard lines here and you can change the padding gets fancier if you hold down the option key on a Mac ALT key on a PC cuz I want to do both at the same time the top and the bottom we can do the same to the sides holding that option on a Mac Al on a PC and it's going to do both sides but you can see the padding in the middle here is set to a fixed size so we want this to be Auto the shortcut for that is with it selected over here you can just double click in the middle and it switches it to Auto now if I drag it okay and you can see it's kind of adjusting on the second one as well that's why we love you components all right right last couple for auto layout uh if you've got something that in this case the width is set to fixed you want it to be hug you can go up to the big long drop down or just double click the edge and you can see that it automatically switches it to hug it's not what I want still a cool tip undo all right the last couple of options is if I need another icon in here I can just select it copy and paste it and you get another one there you go so we got another icon you can just drag them in as well and you can reorder them by using your left and right arrow rather than messing around in the layers panel look at us we are Auto layout Masters soow my head that was just one tip it was like 10 tips anyway let's move on right tip number two uh making color styles suck they do um picking colors is fun I use uh Adobe color quite a lot to kind of like pick my colors and kind of work through it's all good fun but turning those into Styles inside of figma making sure there are good uh naming conventions and apply appropriately and flexible that part is pretty sucky until go to shift I which is the widget tool and type in color levels gin and look for color levels generator open that up drag it over here what you can do is you can take those fancy colors and this fancy color copy and paste it into here remember to keep the hash give it a name oh it's already done it so cool uh primary color and look at that they're all named nicely we've got all of our variants even fancier we can say save Styles and check it out I've got a color Style with them all listed with all the right naming hands up who's done that with the I don't know forward slash technique it takes forever let me do a couple more in fast mode and Bam primary secondary and neutral colors we look fancy there's lots of flexibility they're easy to implement I can just click on the background here and say I would like the color fill of the style we're going to use 500 and we're going to use our neutral background color so for the background here here add a style 500 tidy it all up and go this one look at us best of all our developer is going to look down their nose less at us when we hand over colors that you know cuz you do it I've done it you've done it cuz naming colors can be a pain but no more all right tip number three grids rule grids for me were a big unlock as a designer both Print and ux Design it's a way of adding consistency it was kind of like where I went from like a good enough designer it really kind of raised my game especially when there's larger projects and things didn't quite fit right something was wrong and for me it was like grids consistency big documents it's awesome and look you can kind of just drag it around make sure that there's even spacing we're working to an eighto grid easy to add and for me was definitely a level up all right let's make one all right to add them is you click the parent frame I'm going to go over to here it says blout grid I'm going to going to hit plus I'm going to say I don't want the grid actually I would like a column to start with in terms of columns I just want one okay basically I'm want to use it just for the margins either side so I'm going to do 24 for a bit of space you can see a bit of Gap in between the sides but the real helper is when we add a second so I'm going to hit the plus again go from grid I'm clicking the little icon here and I'm going to say I don't want another grid I want rows okay and the rows work really well when you've got not stretched cuz at the moment they're kind of I've got five rows stretching across the document I want to start at the top and I'd like the height of these to be eight it's a really common size okay for spacing when you are using say mobile devices or websites and the gutter or the space between the rows I want to be eight as well to give us that kind of like stripey look now the count for some reason it's defaulted to five and you it's got all kind of mushed up at the top here but I'm going to switch it to Auto and it should fill the whole thing there we go giant candy cane what's really cool about it though is that we can start having some consistency you can see here this doesn't quite line up now it does where does this one start that one magically starts in the right place this one here can you see the bottom doesn't quite do it zoom out okay and it should if you've got your grids visible snap to it look at this snapping 888 88 so good same with the side here I can drag it out okay to get it snapped to the edge if you're like oh how is that so responsive H come check out the full course but grids now I can say all right you are you know there's a a three- space grid what size is 38s I know the maths but you can hold down the option key in a Mac ALT key on a PC and just kind of like hover between it so have the thing selected hold that key down you can see it says oh 24 pixels apart all right so now we know that is a good spacing and it could be consistent across lots of the different uh Pages either in an app or a website consistency I love it shift G is a shortcut for turning them on and off cuz sometimes they're helpful and then sometimes everything is stripey so you can hit shift G to turn it off even better you can turn it in to a style so click on the parent frame and over here you can say see this little style button here I'm going to add to the style I'm going to call this one all right now I get to reuse it on lots of different documents all using that same style grids R grids do roll now these tips are kind of like the just a couple of the really nice sexy ones for YouTube um I've got like a thousand more of them where are they they're in my figma either Essentials or figma Advan course okay so if you're digging these and you want loads more in a kind of nice structured course format check out the link in the description all right that's it tip number four tip number four what is it frame Mastery now working with frames is probably what we do the most in figma so let's learn some shortcuts to impress your friends and colleagues with anything selected you hit shift two and it will zoom in right on that thing another sweet shortcut is the n key n for November okay just it'll just toggle to the very next container frame okay so you can kind of work your way through your project shift in okay we'll just go backwards okay so it's a nice way of working through big documents or even if you've just got a stack of them the End Key the home and the end key do the same sort of thing but it retains the zoom level can you see how it's not just uh if you H the in key it goes all right you're full screen everything is full screen which can be good or a pain but the end key or the home key forward and backwards um will retain that zoom level so you can kind of be in at that same level all the way along but if you're on a laptop it's hard to even find the home and end key so maybe the end key is for you another handy one is you can actually just double click on the frame in the panel and it will Zoom there sometimes it's easy to find it this way because shift one you have everything everywhere bad the last one let's click on this one shift two we know that one already let's say you want to move this to the bottom of the frame or you're doing kind of like a horizontal scroll but you notice that it jumps the frame you're like what are you doing don't go what are you doing over there anybody do this okay can be a pain so what you can do is start dragging so start the dragging process click and hold down the mouse hold space bar while you're dragging for some reason it will keep it inside the frame that it needs to be in and just be over here so start dragging hold space bar and you can kind of have things just tidy just on the edge here without jumping to the next frame all right that's frame Mastery tip number five is the accessibility hack for a lot of us it can be scary to even open up that accessibility door I know it was for me what's in there is it going to bite I'm sure it's going to be lots of extra work for this one it is a plugin rather than the widget that we were using earlier there's lots of different accessibility tools I'm going to use this one called contrast okay this one here in particular uses a little drop down you can generate a contrast report and you can see green is good there is a high enough contrast between the background and the foreground or in this case the font but you can see let's have a look the exact same color used on a smaller font fails says it's red same with this down here you can say all right this is not working but it's kind of working up here it helps you develop your skills in terms of accessibility and in this case I can say all I need to do is go you instead of using that 500 I'm going to use the 700 and same with the background of this button here maybe I've got a darker version of it maybe the 500 would work I know cuz I've already tested it sometimes though it is just a matter of Bolding a text that might not be bold okay it might be regular and that might bump up the contrast ratio enough I'm going to run that plug-in again the shortcut to do that is command option p on a Mac Control Alt p on a PC runs it again you can see green we win no there is green we win there's green we win there are lots of different tools this is only one part of it I find it's a good way in understanding accessibility if you are very new to it now a plugin like this though doesn't replace a full accessibility audit but if you are one of those people hiding from accessibility cuz it seems scary it's a good first step learn the language build build or at least start building your accessibility muscle tip number six file Mastery we're going to learn to flow through figma like a boss first boss move is the tabs along the top here if you hold command on a Mac control on a PC and go 1 2 3 4 okay you can jump to any of the tabs works in the browser as well the one I probably use more though is hold the control down both Mac and PC and hit Tab and it just goes to the next one kind of like Cycles through them now depending on your level of OCD you can rearrange them so I've got my main Styles here that I kind of use the most for this project I can drag them around and that one's there this is the tips video we're making for this this is the least important this one's next so you can drag them around to get your fway sorted you can also right click them and hit tab that one there always open you know what it is so you can tab it down it works in the browser as well all right the last file Mastery tool is you can actually split your screen okay so this one here I've got lots of different pages I can right click the tab at the top and say give me a split Tab and basically what I've done is I've got two versions of figma looking at the exact same file so this one over here let's look at the accessibility page this one over here we could look at maybe a design spec page it's the same document but we get to view one maybe high level one in details maybe one as reference you can copy and paste across them but it's the same thing checks out exx ability move it around okay it's moving on this screen as well so sometimes you can be nice and tight and be working on something and lots of little pixels and vectors while seeing the kind of result in this larger zoomed out version all right that's file Mastery like a boss actually before you go it's weird having two things open it's hard to know how to close it okay so you got two tabs they're exactly the same close one of them it'll be left with one the last tip tip number seven please don't make me make variables yes that's the name of the tip variables are one of those features in figma that are extremely powerful and everyone spends like 2 minutes trying to work them out find they're too hard and then give up but they're Game Changer especially when it comes to prototypes let me know in the comments if you're one of the people who tried it for a little bit and gave up and was like nah it's going to fake it let me do a quick demo and see if I can kind of get you back on side variables are awesome so a simple example let's have nothing selected let's go to local variables let's create a variable I'm going to use a number variable this one's going to be called total and we'll give it just a fake value for the moment five we need to apply that to something I'm going to apply it to this little text box here just a text box with a number in it but what I can do is I can go over here and say all right design view under my text I can say let's apply a variable which one we've only got one called total you can see there it changed to five watch this I'm going to change it to seven here in my variable and look we're hacking the matrix it's changing down there all right it back to zero and now what we want to do is make this button make it go up and down this is what got me when I was doing it you got to go to prototype mode so shift e for the shortcut and I'm going to say this button here I'd like to add an interaction of tap or click and I'm going to say what do I want to do I want to set a variable what variable total what I would like to do to Total I'd like total to add a one to it let's click enter let's jump out and check it on my phone look ready one two three four five if I can hit the button I always feel like a bit of a I don't know heck in The Matrix computer programmer it's only a simple variable so even if you don't consider yourself a coder or good at Mass hands up out there figma users quite a few of us like me but just some simple variables okay just some little basic stuff can really level up your prototypes uh especially when you're doing user testing sometimes you need some key interactivity that can only be done with a variable now there's a million more things you can do with variables but there's loads of simple things too hopefully this tip makes it a tiny bit less scary and look I made mine go down down down down ah computer hacker all right that's it uh if you do want to carry on uh leveling up your figma skills though uh instead of like zigzagging your way around YouTube with some good videos and lots of bad videos okay and you want a bit of CLA uh structure you want a class brief okay quiz questions teacher support certification at the end class projects certificates all taught by a handsome ball guy in New Zealand I know a guy enroll in my figma essentials or a figma advanced course links in the description that is it my friends goodbye bye for