Figma Advanced Tutorial: A 2-hour Masterclass

foreign [Music] hey my name is Dan Scott and this is the figma advanced course so who am I I'm Dan I am a ux designer and figure instructor I've won multiple teaching Awards and I've helped more than a million people become better designers now through my courses now this course is aimed at people who already know the fundamentals of figma you've either done my essentials figma course or you're self-taught but you know that there are tools and tips and workflows and updates that you just haven't had time to go and explore so if that sounds familiar it's courses for you during the course you'll be given your own unique brief and Persona and build an app that is ready to drop into your portfolio you'll start by diving deep into multi-level nested Auto layouts you'll make robust components that are easy to update but hard to break learn workflow tricks for managing design assets styles opponents grids and column layouts finally learn how to use variables and put them to work creating even more complete prototypes then use variables to make easy light and dark modes and Compact and comfortable spacing versions of all your components and with all our new variable knowledge we'll be able to understand and create our own design tokens learn Advanced animation techniques in figure you'll build responsive elements ready for any device size all the while learning the best shortcuts and plugins to make you a more efficient ux designer you'll learn how powerful figma can be to manipulate and mask images and videos you'll know all the advanced typography features and how to use Ai and your process to make you a better ux designer you'll learn all the advanced prototyping techniques to level up your user tests of course there'll be a pug dog in there somewhere there is you'll learn the right accessibility tools and techniques you become a variant boss learn how to cut down those unwieldy 100 100 variant components down to one by mastering component properties learn all the best ways to work with other designers developers and all of the stakeholders now there is so much more than that in this course there is more than 160 videos so check out the table of contents see what we cover check out the student reviews and testimonials and you will see that this course will take you from fig were good to figma great in this course we'll use real world practical projects you can download the exercise files and the shortcut sheets so that you can work alongside me in the mini class projects not homework so if you want to take your Fitness skills to the next level sign up and go from good to a figma superhero hi everyone hey quickly this is a free extract from my larger much larger figma Advanced course okay so if you do want to master figma check out the link in the description but for now let's jump in all right uh to get started first thing is to download the exercise files so there'll be a link on the page uh download the files that we use for this course in that folder though there will also be the shortcut sheet okay it's a PDF you can print it off and there'll be lots of shortcuts in this course I'll go through them loads but it'd be handy having that next to you so you can Circle the ones that you really like and really want to remember uh yeah so download the files and then what's next that's what's next how fast does Dan talk most people think I talk too fast and I probably do uh some people people have said I talk too slow and they want to speed me up guess what you can there's a cog down in the bottom corner there you can set me to whatever speed you like okay slow down fast and whatever you like there you go can you do it with the free version you totally can pretty much all of this course you can do with the free version of figma and we will look at some of the paid features because it's an advanced course and you want to know what you might be missing out if you're on the free account but most of it's to do with like larger teams and it's not so much features missing it's more to do with collaboration but I'll take you through those ones so that you get a sense for them um but yeah you can go through most of this course with the free version and the tiny bits that are paid it's worth knowing even if you do have the free version about you know what can be done if you do end up in a position where you're looking at the paid version I'm not sure what this is hmm what else okay lastly is level one and level two if you look in the contents you will see that some of the bigger topics the chunkier parts of figma where there's a lot to go through I've broken up into two parts level one level two uh why mainly because I was going mad trying to put it together because there's a lot to those things like Auto layouts one of them for instance and there's a lot to it and it's really important to learn in this course but doing it all at once even preparing it I was just like man I need to go do something else and that's what I've done I've kind of got the really good chunky best bits in level one and then the more not more obscure excuse the wrong way I said to break it so that the more detailed we got we're going to carry it on later in the course we're going to take two goes at a couple of those big topics level one level two does that make sense because I was going mad and I know that you'll get bored as well okay because they're just really long we want to kind of I don't know mix it up a little bit do a bit of Auto layout learn loads of good advanced stuff take a break do some other stuff come back to Auto layout and really like get super advanced all right that is it getting started let's get started let's do something hello everyone welcome to the course proper uh this video here is kind of like a catch-up video it is some fundamentals that you probably already know okay uh just to make sure everyone's on the same level okay I need to make sure that everyone knows what a basic creation of an auto layout what it's good for components that sort of stuff we'll make these two pages here they're not super special so if you are reasonably Advanced you can skip this one if you're in the middle or not super confident and just want to make sure you're all good I want a refresher this is the video for you I'll make sure also I'll throw in some good shortcuts throughout this video as well to make sure it's valuable for everyone but if you're like man this is kind of stuff I already know that's okay Skip Along we get more and more advanced on the course I just need to make sure everyone's okay you okay the short version is auto layouts are great because you can do stuff like this you can move it around it's adjustable it's flexible okay I can decide that it's going to be on this different size uh frame here the larger iPhone and I can turn things on and off so that's why Auto layouts are good components are really good because I might decide later on that this guy here I'm going to zoom in okay here's a component we make them in this video but I might decide actually in the inside here he is I don't know got this going on I don't know what this is but because it's a component okay he's got a hairdo looks like my hair ball at the top okay can you see this one adjusts as well so let's revise what an auto layout does why and how to make components plus I'll throw in some interesting things about icons icon sizes how to scale them right and we get the beginning of our project started would you get on with it Dan okay all right let's get started I'm going to use the new design file there's lots of different ways of starting a design file you choose the one you like the most I'm going to rename this one instead of Untitled I'm just going to double click the title I'm going to call this one event app V 1.0 hit enter now first shortcut is going to be the F key for frame okay there it is there's the icon and I'm going to put in a phone now my advice is to pick whatever phone you are using to do the testing on okay if you've got a really old iPhone use that if you've got the newest one use that you can test on your phone using the figma app okay you can download that from the Android or the App Store again it's great to be able to mock up on that because it matches in the future well it's always going to be the future when you're watching this okay it might be iPhone 27 use that okay I'm gonna use the iPhone 14 and what I'd like to do is use another size frame as well it's gonna get the F key again I'm going to use the larger size plus okay so the iPhone 14 plus why because I guess this course here is showing you how to build components Auto layouts constraints variables all those sorts of things is so that we can build units that we can use in our designs that are quite flexible and resilient to different sizes okay and changes and being used by other people and you know that's that's the goal here in this kind of advanced course is doing things that aren't just slap Dash is the wrong word for it but like just kind of like getting stuff done and then moving on and we want to make stuff that is really responsive used on different devices can be used by different team members but without breaking it and by you using it in the future saving yourself time okay first thing we need to do is line them up okay so they need to line up at the tops I'm not sure why shift one shows you everything on your document just a couple little shortcuts to kind of flex our muscles we probably know them already okay next one is we're going to bring in some icons so we're going to use another shortcut that we know very well probably maybe a command shift K on a PC it's Ctrl shift K brings in icons or brings in images at least in your exercise files there is a folder called icon so let's bring all these guys in let's click open now when you're putting in multiple images okay you can click once and you get like the size to which the SVG has been assigned okay sometimes they're huge you can't even see them they're so big have you ever done that okay it's like this gigantic uh SVG or illustrator file you brought in okay uh you can click and drag okay but you end up with these squidgy sizes you can all shift get them in right but like it's not what we want what I want to do is I'm going to undo to get rid of them all hit that same shortcut command shift key control shift K on a PC bring them all in and it's just easier to go place all and they get kind of stuck in the middle of your document first up let's see that they're all inside frames there you go okay and I would like to say you I'm going to move them all over here to the edges just to get them off the iPhone frame for the moment because I want to do a couple of things first thing I want to do is make them into components because everything normally ends up being a component I get that asked that question like what should we component most things doesn't hurt to make get a component will help you later on especially if it's going to be used more than once like these icons and by more than once not like necessarily on the same page or even in the same document maybe it's going to be used in another uh you know a completely new figma file okay you know it's going to be used for future projects it should be a component because they all lead back to that original one and when you make an update they come along for the right everything be a component all right and the next thing I want to do is I want to make them I've got them all selected here I want to actually just say make multiple components not just one giant one okay I want to be make multiple components all separate okay that they all are there nice let's get into an appropriate size now scaling them is easy right if you've got them all selected hold shift and you grab the corner and they scale down that works most of the time but in my opinion it's better to use the scale tool to do all your scaling so it's the K key on your keyboard okay or you can just pick it here okay use that one because it will scale things like the stroke and effects at the same time if you've ever downloaded somebody else's icons and they're not scaling quite right and The Strokes are staying the same and the drop Shadows are doing weird stuff just use the scale tool the other nice thing about the scale tool is over here you can pick scales you can say I want it to be you know you're working on a design that's four times the size or it's half the size but I tend to use it for though is I can type it in over here I can see all right I want you to have uh a good icon size what is a good icon size you can pick any icon size you like but 32 or 48 is generally a really good icon size depends what you're using it for where they need to go they can get bigger they can get smaller it's really common though you use multiples of eight we'll cover that later on in the course why that's so useful okay so I'm making them all a height of 32 and you might have done this already might have clicked off and got oh I can't handle this they need to be laid out Dan okay I'm going to undo that it doesn't matter you don't have to do it but I just leave them there because I'm going to select them all and I'm going to hit shift a okay for my auto layout that's the shortcut for auto layout is shift a it's the same on Mac and PC figma seems to be moving a lot to that shift key to be a shortcut because it's the same for mac and PC and Linux or whatever you're using figure on and there we go we've got an auto layout so we can do that cool responsive thing at the bottom you saw so I've gotten components inside of them we've got our Auto layout you've done Auto layouts before probably okay the basics are you see the little icon there that's the frame for my auto layout I'm over here thinking where's all my options it's because I'm still on scale hit V key okay and everything will pop back up k for scale gives me some very specific stuff and then I'm going to hit V to go back to my move tool actually it just typed in there I'm going to hit cross go away all right so Auto layouts normally default to the right one we can go left and right we can play with a spacing okay we've all done this before click and drag the little icon to play with the spacing let's move it over here so you can see it okay you can do it on the document okay so you can click on it and I'm going to zoom a little bit you can see I can drag it on this excellent easy we can rearrange these by clicking just one of them okay or diving inside of it you can watch this click it once double click it to go inside and you can drag these around because I want this to be the first I want the heart to be next and instead you can drag them you can use your arrow keys so you've got one selected just use your left and right or your up and down depending on which way you've got this going okay and I want the ticket so double clicked it left Arrow I want that one there what I want to do for this one is actually I want to turn the ticketing uh the ticket option off okay for the not logged in person because they don't have tickets yet and it's taking up valuable space in our lower nav speaking of lower nav let's call it nav hyphen lower we'll do proper naming later on in the course okay but it's going to be my lower nav I put nav first so that they're ordered nicely so you can have nav upper and they have lower and they have side okay and what I want to do is double click this guy that's them and I want to turn the eyeball off on them I can delete them okay I can delete them and watch this actually double click delete them and he's gone completely I don't want that actually I want to bring it back later on when the person's logged in I want it to magically appear That's the nice thing about Auto layout right is the spacing is cool but it's this kind of reef flowing okay this responsiveness that makes it super useful so I want just those three for the moment next thing I want to do is hold spacebar let's get this down here and just dump it in the bottom corner okay and drag this over here and you can mess around in here Auto layouts okay I'm going to use the center one you can play around with your spacing Okay so we've got our Auto layout I'm going to duplicate it onto the larger phone size holding down my option key on a Mac ALT key on a PC and just click and drag it over you need a duplicate grab the square in the corner okay if you don't grab the square sometimes you can grab the padding and that can be a bit frustrating okay so grab the square and I can resize it look for the other larger size and everything kind of sits in there nicely it's not particularly resilient yet okay but good enough to get started the trouble with our Auto layout at the moment is that if I then say okay great then said I could turn on the ticket for this one okay this is the one with a logged in user whoops wrong one so iPhone plus and here I want this one turn it on it's good okay and I can double click it and I can adjust it and that might be enough okay but we're here for the advanced stuff we needed to automatically Reflow I want to be responsive resilient let's do that in the next video hi everyone uh 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 okay 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 okay you just set this to Auto instead of a fixed and space between like 98 that I've got okay all you do is with it selected over here under Auto layout go to the three little dots and let's change it the spacing mode from pact which means that squeezing together as tight lightly as they can given the size of the icon and the fixed Dimension that I gave them in between okay what you can say is like don't be packed b 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 it's doing exactly what I want it to do I just need a 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 gonna be zoomed in close enough so that it can see you know it's got enough room for 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 okay you can do one side at a time that's fine okay 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 object minor 48 you drag in yours where you want but the cool thing about it once I've set my margin these is just Auto you can see they just resize to fit and it means now if I add it over here oh uh drag it across holding down older 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 and figment in okay so I've still got the exact same um 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 yeah I could do that it's when you have to turn on and off different parts okay and get things to Reflow so the moment down here watch this this is the old one with the fixed spacing okay if I turn on my eyeball push this turn it on it gets wrecked because of my fixed spacing okay it tries to force all of that to happen and it's just not enough room whereas if it's Auto okay I can say where it is I can see you turn the eyeball on my ticket sold okay 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 is not use the long way okay the spacing mode packed space between is fine okay you can do it a quicker way and just replace the number in here okay the horizontal space between items okay the space between our icons just double click it 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 which this if I go undo you can click it once and you see it says one one three open Auto okay we used our shortcut member 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 all right next thing I want to do is I want to style the frame this is totally nothing to do with the auto 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 okay and it goes around all of it it's more realistic for a phone especially when you're trying to do margins and padding you can see it kind of was too close to the bottom but with a round of 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 okay 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 okay 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 don't know 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 okay uh let's look at one of them you can look at either of them both of them okay 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 that's what I want to test on and they have a really good documentation Okay Google Android call their design system called material okay 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 okay 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 and go what the hell is a navigation drawer what's a navigation Braille something crazy 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 is can you see there there's actually a figma design kit for this you can open it and start copying and pasting bits out too good okay have a read through it's good to get your language correct so you know you're using you know a burger menu and not a nav sandwich because nobody calls it that except Dan okay and you can go through and find out all sorts of stuff about spacing okay how far from things should be okay 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 so Apple's version you can look at maybe a framework that you're using okay 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 okay and quotes 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 okay often it's more padding at the bottom than the top kind of think uh think framed photograph or framed painting on a wall they're kind of like chin at the bottom there is more than the top gives it kind of a nice footing foundation and now case keeps it away from the edge of the frame the other thing I want to do is I want my you start 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 designy stuff so I'm going to make the iPhone a particular color okay so FFF is the white uh F7 is what I like and with these colors here if you just open one I know that the color I want is F7 F7 F7 okay 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 okay 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 zero down and I want it to be blurry and I want it to be I don't know uh let's have a look shift one to see everything it's probably a bit strong okay so I'm gonna say you're down to 15. there we go I want just that little subtle hint that look I'm separate from this all right so now I want to copy this Frame uh details to this one okay so I'm going to select the frame title let's go command option C so it's kind of like copy okay but with that extra key on a PC it's similar it's Ctrl alt see to copy it and then over here it's those same two keys and V okay and it brings through my background color brings through all the radiuses now there are shortcuts we like man I'm not going to remember all these Dan um 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 control key on a PC and hit the forward slash let's have a look at your keyboard okay it's the forward slash the 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 specifically if it's not a shortcut you use all the time so it's command on a Mac control on a PC and forward slash you can get any shortcut you like Place properties I did not need it on that all right so we have run into a little problem okay 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 hello everyone uh let's talk about when you should make components when you shouldn't and some of the quirky things to do with components when you're making them all right let's start by making this into a component because we these are two separate Auto layouts and you can see them over here the little icon is not our lovely waffle shape or these diamonds okay so we're going to convert it and the first thing is going to happen it's going to be kind of weird watch this I've got it selected okay I'm going to use my shortcut which is command option K on a Mac Control Alt K on a PC okay and click that and it's going to convert it into our component great what happened over here okay it's spat out all of these internal components okay so these are where inside my auto layout and it went hey you can't be inside of here so they spat them out and left okay instances of those components inside let's have a look so let's undo it and have a little breakdown just so you get an idea what's happening so inside of here are these these are my main components these rule all the other components on all the other options and it is best practice not to just leave them on page one a lot of people do and they can work the trouble is is that we can't have these main components that control all of these inside another main component so when you make it use your shortcut member command option K on a Mac control option sorry Control Alt key on a PC it goes you can't be in here and spits them out over here and we've got these components going on over here okay and they're not even inside of this Frame okay they're just kind of hanging out underneath it so what we can do is that's fine like totally fine collaps these up I'm gonna grab them all and turn the eyeball on on this one okay because we turned it off before grab them all and with them selected I'm going to just move them over here let's zoom in on them a little bit if you've got them selected member you can hit shift two and it will like jump to what you've got selected and we're going to use this tidy up just because tidy up is awesome did you notice before when it's up here I couldn't do tidy up because the icon doesn't fit so you've got to zoom in here it is you just got to be in a zoom level where this thing fits and just do them nicely like that great so that might happen to you and you might not even noticing you'll end up with weird stuff kind of hiding under other layers and it's a bit of a problem but hey we worked it out and the other thing is that we're not going to leave this here either okay because on the first frame you can okay I don't imagine I'm gonna put this into another component but I might do so it's just good practice to drag it off over here holding down my option key on a Mac okay Alt key on a PC click hold and drag and just move it over here and what I've got is actually let's just drag the hole don't drag that let's drag the actual icon itself okay and so I'm going to keep my main component over here and let's keep an instance on my first artboard there we go he's now a component this one here needs to get switched out they all need to be the instances and because we've got the setup Suite oh we should be able to just go you look at that oh good you can see here this one is set up to Auto so is this one all controlled nicely by our main component over here we got it now the question of when to make components is there's no like specific rule when you're at your kind of initial design stage and you're just kind of like messing things around you don't need components it's not until you get that second frame and especially for things like uh buttons and any icons they should always be components because you're going to reuse them but like me you'll end up doing stuff where you kind of like make uh you know make a little card here and you end up duplicating it instead of making components and then there is nothing controlling them all so you've got to go through and redo everything or at least adjust every single one so you end up bumping into when you need components last thing about components is that when you're storing your main components off to the side okay often could be on another page okay when you've got a slightly large document I keep them on the same page when the design is quite small there's a lot of messing around I want to go back to the main components a lot so I just pop them over the side here but when you've got them over the side it's really important to put them inside of a kind of a placeholder frame so the F key for frame tool and I'm just going to put them on this I'm probably going to make it a different color just so I can see the contrast of the white why are they inside there mainly so let's bring this out here so it's not inside of a parent frame it's just hanging out by himself the main component there's nothing over here that you can set the constraints the constraints are let's click on this one because it's inside of my phone frame it says I can set the constraints to the top or the left in my case probably the bottom left okay because I want it to stick down to the bottom of this Frame means when I adjust this one okay adjust the parent frame you see it sticks to the bottom perfect but I want to do that for the main one so it sets the default so every time I drag one out I have to change it but over here look I can't do that ah but when it's inside we'll go do that drag the name when it's inside this can you see the constraints appear because it's inside of a parent frame in just like a placeholder I'm not using it for anything else other than to say that is it so that when I drag new ones out okay it's got the default of bottom and left there you go main components can't be inside other main components and it's handy to have them all inside of a placeholder frame even if it's on another page just so that you can set things like your constraints oh one last tip about it as well is that you can't delete things in components so if I go into here and before remember we deleted something it went away from in here before I hit my delete button okay the nice thing about a component is can you see the eyeball just turned off let's move this over so you can see so I went delete on my keyboard goodbye it just turned the eyeball on and off okay so that's the cool thing about components is that you can't delete stuff if you want to delete it you've got to go back to the main component and then delete it from here so making our elements that we're building a little bit more resilient and making sure when other people are using them okay we're giving them to other members of staff that are not wrecking it and completely removing bits they're just turning the eyeball on and off there we go that became a little longer than I thought that we're just going to turn that into a component there we go I hope you learned something next video hello let's make this it is just a helper spacer guide and it is an answer to a question I get a lot like how far apart should things be what spacing should they be what size should they be what's really common it's these and what does this do it's nothing it's just a visual cue so when we're designing something we're like how big should it be you can look at this and go it should be about 24 actually 32. how far apart should it be ah let's use six let's use 16 plus it'll give me a reason to show you a really cool plug-in okay that'll help do all this kind of documentation for us it's good for this little spaces here but also when you get on further and start making things like design specs for your developer and maybe uh design system all right boxes and plugins spaces between boxes let's do it alright so let's make a grid I'm going to do it over here a little spacing grid I'm going to use R for the rectangle tool hold down my shift key on my keyboard to get the heightened width the same and I want my first one is going to be eight it's a good kind of like bass level if they are linked they should both become eight okay the width and the height and I hit enter on my keyboard excellent I'm going to pick a really high contrast color and what I'd like to do is just have multiples of eight as we go up okay Zoom a little bit and what we can do is hold down the option key Alt key on a PC to duplicate and I'm just going to drag it out a size and I'm going to use my math over here because I am not good at math and to say plus eight here we go 16. okay I can do that math but let's do another one let's go plus eight and I'm just going to keep going up to a size that becomes too big let's do that I'm going to do this in speed mode all right that's probably enough um in terms of spacing okay and things away from the edges of other stuff I feel like that is a big enough once we get it to 48 it's pretty massive you can keep going up to you I like to see the spacing between things as well so this is good for like units of things how big should your icon be how big should that image box be how far away from the edge it should be another way is the spacing in between can be quite visually helpful when you're making it and there's some common sizes for that too so I've got my first box how far away is the smallest distance the smallest is zero so we don't need zero we can all imagine zero let's look at the first one is four okay so four pixels across how do I know it's four okay it's if I zoom in can you see the grid there I can see it's four you can also double check so with this selected hold down the option key on the Mac Alt key on a PC and you can just kind of like hover over stuff you can see look I am four pixels away so four six is the next one that's the next really common size not divisible by eight I know this but it's a really common spacing between stuff there you go six the next one when we get more pixels away okay so eight away from something is it's easier probably just to drag it next to it so completely next to it to say X and Y please move plus four pixels along the X that's how you can get your spacing done okay so there's some small ones four six eight and then basically we go in either whole or half divisions of eight so I'm gonna go 12 for the next one so 12. next one's going to be 16 which is 2 8. and my last one I don't have a last one I probably need a 20 in between them so I'm gonna go this one uh it's gonna be plus eight plus eight and I'm going to make it 20. it's another spacing that I use now again these aren't the rules rules but often these are really good sizes for things and these are really good spaces in between things now that's handy um but it's hard to know well you can actually click on and say oh yeah that's 48 and then go off and do stuff and look at spacing and go okay how far away should that be from the top about that hold down your option key on a Mac Oh canopy think okay that's 12 and then go back over there but it'd be nice if they're all labeled you can write them out that is boring and tedious let's look at our first um plugin for the course so plugins can be found in this little icon here under resources again we're going to go to plugins and the one that we're going to look at is design dock for this case now there are lots of competitors to this particular app find the one you like and design doc might not be working in a little while basically when I make these courses it's about the time that whoever decided to make this plugin decides to not update it anymore so again this is more of a for instance than an actual um go and use this particular one so I'm gonna find it by searching for design dock one word I'm going to run it this thing opens up it's pretty sweet watch this if I click on this one let's move it over here and say I want give me the height above it look boom this one here I want the height above it boom you can't see it can you here you go and it just makes it nice and big and easy so I can not have to go and measure this here we go we can use this on future projects once we've made it what I also want to do is click on this and this I'm holding shift to select two things and actually I want show me the outer spacing oh very well designed Act plugin okay I'm going to do that for all of them be back in a sec all right so that is a sweet app um quick little shortcut command option P Control Alt p is to open up the last plugin if you're using it over and over and some of them close down after you've used them that's a good shortcut I'll make sure that's in the shortcut sheet okay with this app here it's great it's made this can you see it's kind of made an overlaying thing I want them all mixed together and I probably want them all in their own frame at the moment they're in a group that's the little dotted line there so I'm going to select off grab my f frame tool draw a box around it all and say you have a fill of this dark color and I'm going to have to play with a layer order and grab a few of my rectangles and some of the container not all of it it's a container you go above all of that I've got all my rectangles here we'll do layer Madness layer on uh later on in the course okay for the moment though we'll go caveman Style just drag them into the right place they didn't quite work there we go all right this is going to be my measurements awesome so handy plugin both for what we're doing just here and later on when you start doing specifications for the developer either a Handover document or maybe a design system so this will be what we'll use as a visual guide as we're going through this course um yeah to help with our spacing and knowing how big things should be all right on to the next video hi everyone let's talk just a tiny bit more about what spacing should be I've given you some generic stuff in the last one where did I get that magic from how do you get better at it if you are already you know quite proficient at your spacing you can move on but if you want a little bit of I don't know help to make sure things are consistent and easy to work with with your developer when you hand off your app not causing problems or at least being mindful of the developer and what they're going to be working with watch this video so there are lots of places that your app or website are going to end up and what will end up happening is your engineer your developer whoever you're using to make it it might be you it's highly likely to be built on top of what's called a framework your developer she's not going to be going through and putting all the naughts and zeros okay they're going to be building on top of things that are built on top of things that are built on top of things so if you're a iOS Developer okay the developer is going to be using the pre-made or at least guidelines from Apple if it's Android it's going to be this material that's what they call their design system and they give you lots of helpful things about how things should be spaced apart if you're going to web it might be bootstrap it might be Tailwind so talk to your developer figure out where it's going what they're building it on and then have a little read around it can be confusing but we need to get started in these sorts of things so that you can actually I don't know begin your understanding of maybe a little bit of CSS a little bit of code so that you don't throw your developer a spacing of seven because seven is tricky because you can't divide it in half okay you can't have a half a pixel you can divide eight in half you can have four pixels let's have a little look at why eight is good as well so let's look at material for Android okay I'm in the material.io they're on their version three in the future you might be at version four or five check it out okay I'm under foundations I'm looking at layouts uh understanding layout and it's just really nice to go through and say space between columns is a default of 24 DP okay which is essentially pixels sure for device independent pixels they use this because lots of different phones have different like pixel densities just consider it pixels if you understand that and when you're designing in figma DP equals PX so they're using spacing of 24 to make sure when you're building out your little spacer block and you're going to Android first make your Gap 24 that's the default it's happily divisible by eight not by chance or at least it's a really common spacing for the moment let's have a look at iOS have a read through what they do I think they're using 20 for their margins on their sides they have some different defaults to a lot of other ones and the thing with iOS is there is both uh phone there is TV there is gadgets okay there is watches so have a little look whatever you're designing for there will be documentation online if you're going out to web so you're building a website or web app find out is it WordPress is WordPress using bootstrap bootstrap is a framework that helps developers work fast okay and what they'll end up doing is let's have a little look I found this okay the gutters is what they call it okay the space between stuff and the default gutters are 1.5 rim and you can see there they said 24 pixels the same as material so if I use 24 as my spacing the developer is going to like it because it's kind of consistent with bootstrap and it's consistent with Android depending on where you're going now there are a hundred different Frameworks Tailwinds people are using this a lot okay to help with their styling you can see in here I found under Gap okay bootstrap calls a gutter Tailwind causes Gap it's all useful to know as a UI designer you can see here what a developer will type in is they won't actually type in the number they'll just hopefully be close to one of these so they'll put in spacing when they're coding to say Gap is zero which is zero Gap is one which is 0.25 over varim a ream by default is 16. so 0.25 of 16 is 4 pixels so remember that little spacing we had before that's the minimum one here and it's a good rule to not go three you know the divisions become tricky and your developer is going to have to go and override a lot of the framework defaults you can do it but your developer probably just ignore it and use some of the defaults unless you force them okay let's have a look so 16 6 8 10 oh there's a ten you might decide that in your design that you need a tin where was it we don't have a 10. we've got 4 6 8 12. there's no real hard and fast rules on what these can be but if you design four Frameworks or understand them a little bit especially if you know where it's going if you know the developer uses Tailwind great type out all of these so the big takeaways is multiples of eight are good but really you should check out how it's getting made and copy that it'll make the transition from figma to the actual design and development a lot smoother and you don't have to but I've got a web Essentials as well which covers a lot of the kind of things that we look at here like what is a rim what is a DP what is bootstrap what does flexbox there's all sorts of good stuff that you can learn that will inform Your Design when you're in figma but kind of outside of the scope of this course but a little bit of HTML and CSS and framework knowledge makes you a better ux designer in my opinion alright was that confusing a little Meandering anyway let's get on to some more hard skills in figma higher hey just a little like sneaking in butting into my own video to see how you're doing how are you doing uh if you're enjoying the video as well give it a like subscribe to the channel okay follow me for more uh the other thing is is that we do a regular kind of monthly competition okay and the way to enter the competition is to comment below the video and the question for this one is I want to know from you okay what has been so far up until this point what has been the Revelation what has been the ah that how that works or oh my goodness I wish I knew that before okay let me know in the comments and you'll be entered into the competition the competition changes per month okay but we go through look for those answers and you get randomly picked okay so do that um also remember that this is just the short part of the video okay if you got to this point you're like man can't wait to do the rest of it this is the first 30 videos of 160 video course so if you're like I want to go further stop the video go check out the link in the description okay for the full course figma Advanced and come pick up where you left off here and do the full 160 video so there you go um enough butting in I'm going to kind of like sneak back out okay and let you get on with the course but you should come join me for the advanced course don't forget to comment all right bye hello let's talk constraints we covered it a little bit in the essentials course let's look at making sure that when we go and resize for different phones it doesn't break what we want to do is be able to have something that is resilient robust and responsive okay all the R's so that when we do change it comes along for the ride you're my friend need to be Android Mini ah look how quick and easy that is so that you don't break it your teammates don't break it and it looks the same across all your devices okay so it's easy uh what we need to do is we need to select on our lower nav we should probably do it to our main component so that if we duplicate it later on we're all kind of doing it to this one and if you can't see constraints there they are okay remember they need to be inside a parent frame mine's just like a placeholder just so that I can change it okay it doesn't do anything but I'm going to say actually don't be left and bottom let's be stuck to the bottom which is good but I wanted to go not left but left and right okay I want it to stretch out I don't want it to scale in this case because I want to scale the contents I just wanted to stretch to the edges now we can do one of two things because this is actually not one of my instances so I'm going to delete him and I'm going to drag this one out holding my option key and now he should be defaulting to left right bottom you're like that didn't seem very useful okay because we just dragged it out it's when you move on from here so when you go okay I needed two of these now or I need another size so I'm going to make my Android size so I'm going to duplicate this whole thing out okay this is going to be called Android okay and I'm going to say actually it needs to be the size of so I've got the name selected it's got a frame let's go to iPhone it's going to Android small okay one of the smallest devices that we're going to design for in this course and you see what happened ah look at that if you don't have it on I should have done that I should have it before and after I think we were stuck to top and yeah top and left if we don't do that and we say hey go resize to it Android small not very useful it's kind of disappeared off the frame so let's get it back and I'm going to switch it back to that smaller size here we go quite the responsive little component now now remember a couple of notes if yours is not kind of resizing how you'd want it's probably that your auto is not set up as the spacing okay so you can select it and make sure it's Auto otherwise it might not be doing exactly what you want and remember constraints can only be found if it's inside a parent frame okay by parent I mean that there's this outside one in that this child okay is inside the parent without it okay that goes away now we're applying constraints to uh component you can apply them to anything regular old rectangle constraints as long as inside of a parent you could be our Auto layout it can be text it can be anything you already knew that the other thing interesting about constraints is that they call them constraints here okay in figma but if you've heard the word flexbox before basically those are the attributes we're adding to this they're doing the same thing if you've never heard of flexbox it's one of those things to go have a look at it's how it's implemented on the web side so either you're custom doing it how can your own CSS or if you're using webflow they call it Flex layouts it's the same thing components flexbox Flex layouts it's all to do with how children interact with their parent okay and you can do a couple of different options in there easy one last thing is that when you're resizing it we just typed it in and it kind of redid it all if you just drag it it works too okay just means you've got a lot of goodness and flexibility because that's what we're trying to do make things that can't be broken they can be used on lots of different situations go constraints all right on to the next video hello I'm going to put all the auto layout shortcuts in one video I've kind of smeared them across all the videos so far put them all in one place so you can come back to them later on bookmark this video if you want to to make it Auto Loud easy select them all shift a it's an auto layout need to break up an auto layout it's kind of the same it's shift a plus option on a Mac or on a PC hit all those and it goes backwards it's just a frame not an auto layout to add things to an auto frame you can click once double click click the item that's in the order frame copy and paste it people like to hit the command D or Ctrl D for duplication doesn't matter you can add by dragging where did that star come from it has made it what's this I click hold drag and it just appears in my lovely Auto layout that doesn't work if you're trying to drag into the instance let's undo this does not want to go in here it needs to go into the main one okay even if you want it in here but off over here remember you can't really delete it okay just turns the eyeball off so the main one rules everything even if you put more than you need so that you can go all right I need you on I need you off let's turn the star back on on this one you might have to squeeze a bit too much into your component to make it work for you the thing that won't go inside our Auto layout is this it's a main component okay it's the main component for my ticket icon I can't put them in look just won't go if it's an instance of it look at this it'll go in there fine okay why is that not because it's an auto layout is because this is actually a main component itself you can't put main components inside of other components don't like it you can put main components inside of this which is just an auto layout not a component he'll go in there happy that makes sense can't put main components inside each other there you go let's do a little bit of shorthand okay for the padding so I've got my component instance selected I've got a whole bunch of padding going on I'm going to hit zero tab zero tab zero tab zero tab okay to get rid of it all click off click back on and I've just got these two options here which you normally face with you can say actually I want it to be I don't know 48 and it'll do both sides I can tab across and then I can say top and bottom separated by a comma so I can say actually I want it to be 64 at the top and then a comma and B8 at the bottom and hit enter on my keyboard okay it assumes top comma bottom there we go your fancy Coda look at that using commas you can copy and paste parts of an auto layout not all of it okay so with this selected I want to put it on this other instance I can use the shortcut that we've used before when we copied the frame okay remember it's command option C to copy Control Alt C to copy on a PC okay those same two keys but V look at that he's down there somewhere there it is and it pasted my padding and in this case I've got an absolute fixed height on this so it's kind of not working so I'm going to say you my friend aren't a fixed height you can hug the contents please they look the same and last one we've already done you can click on those and use your arrows left and right to move it around all right those are our Auto layout shortcuts so far they'll be in your shortcut sheet that you can download and we'll keep practicing them throughout the course next video hello hey welcome to the first class project a nice simple one I want you to get up to where we are in the project already okay I want three frames and I want you to be able to do this ah that one's not working quick then okay everyone's bottom and left and right okay so I wanted to respond all the icons to move I want it to stick to the bottom even though I've shown you what to do okay so I want three different versions make sure they worked in if you haven't done a class with me before okay we do class projects just to kind of keep you up to speed and so you're not just watching you're actually doing of course is up to you you don't have to do them I'm not the boss of you but the doing part is what really makes it stick so if you are Keen uh the class projects is listed in the exercise files okay plus project 01 I want you to create three different phone sizes uh the lower nav I want it to be responsive to all those sizes so we're going to be looking at these kind of main topics Auto Loud the auto spacing between the items okay and those constraints that's the last thing that I messed up make sure your nav is a component in this case the deliverables what I'd love you to do is to be able to take a screencast what I want you to do is make a video of you doing this Frame going like this and it all responding still no responding then I ended up uh no excuses okay I want it to do this okay so video the screencast doing that that is it now recording your screen can be tricky for some people other people will be okay with it if you've not done it before Max have a built-in thing called screen capture PCS have something similar I'm pretty sure if you want to there's a way kind of built into figma okay go to up here go to your plugins and find one called Vimeo record you do have to log into a Vimeo account and set one up if you don't have one it's free it's really good and it means that after a little bit of like confirm your email address and all that sort of stuff would you like Vimeo to record your screen yes please okay you can run it and you can actually just record your screen I've turned my camera off my mic off because all I want to do is screen recording and once you're done you can upload it to Vimeo and then you get a link and grab that link and that's what you can submit for your class project now if all of that is way too hard I will allow a screenshot make sure you've got something selected so we can kind of see what you're doing that Autos there and the constraints of rides that'll pass but hopefully you'll be able to do the screen recording all right and that is it get up to where we are already you might be already done it you're like yeah just do the screen recording if you've just been watching come on Now's the Time go back do these things see if you can do it you're like oh yeah I understand that prove it let's do it but that's up to you for now though let's get on to the next video actually you go and do that and then I'll see in the next video all right see you in a sec good morning everyone it's a new day and today we're going to start with some Advanced workflow tricks in particular this video is all about file handling seems boring but it's one of those shortcuts that will over the course of your work day save you loads of time and I'm going to use them throughout the course I'll introduce them all here so they're a nice little group so that we know what we're doing and I'll try and do them all the way through the course so that you like me become a file handling figma shortcut master all right let's get started all right the first one's easy just make sure in figure you've got a couple of tabs open even if they're just Untitled documents that's fine and hit command on a Mac control in a PC and just hit one two three four so one gets you back to home base okay and two three four just means you can toggle between two different apps copying and pasting if you like me you end up with like all the tabs full it works mostly in a browser as well so the same shortcut I'm in Chrome uh command or control on a PC one two three except one doesn't go back to home base it'll go to whatever tab that is and like Chrome you can have multiple tabs if I go out to five there that is just a regular old website so it's not specifically for figma just all the tabs let's control let's command on a Mac control on a PC one easy all right next file Mastery is you can actually pin these ones here so this is the main one that I'm working with event at one so instead of being all through everything you can right click it and say actually just pin this tab please becomes a nice small version you can have all the other junk over here knowing that that's your good one you can also re-shuffle these so say Untitled the one you're actually working on so you want to move it over here just click and drag I get same in a browser right click it pin it drag it around easy side note I do it all the time in Chrome I have some documents that I always reference all the time so my like junk draw of to-do lists all the different emails that I have to check and my calendar is just always open then gives me space to do my other stuff like figma and searching the internet all right now the next one all right next one is these little dots up here have all your recent files that can be handy rather than going back to this and then being in the community and needing to go to the right place just go there all your recent files so if you're like me this can also get unusable because you've got loads of Untitled Stan to make it work hover above anything you use all the time and see this little star here you can add to favorites can you see them appearing over here so the things you're working on all the time and the things you want to leave behind and be junk okay or get swallowed up by the flow but these ones here are going to be in my favorites file okay and remember on the desktop version you've got little home one which is what how do you get to it quickly that's right command one or control one on the browser version can still go to command one but it just goes to the first Tab and all of my files are kind of hidden in the F there same same all the favorites are ready to go next one is if you are working on really big files or you're working with a really old crappy laptop um there's this one here view this one called resource use okay and it'll tell you how many layers you have uh it'll tell you how much kind of like gigabytes it's using basically your two gigabytes to use in this file okay in figma and if you get close to the end of that you can kind of see if things start running so I guess check it out to see if you're at nearly maximum the other thing that can happen as well is that things can be stressful on the application and it'll show you in this last bar here like if I paste a big document or paste the big file can you see it kind of went up there I'll get rid of it because it's doing stuff sometimes that can get maxed out as well depending on what you're doing and often it can be a plug-in that is just poorly or just really system demanding you might find that why is it all broken have that open and you can see all right it's trying to do something is it super helpful kinda is kind enough if it does start maxing out though what you can do is like big images like this are just too big for figma and if you have hundreds of them okay you can just you can run out of resources so you need to make them smaller not just scale them down they need to be smaller before they come in and if that's not appropriate just have multiple documents for one file if your app or website is getting massive in the design you might have to actually have two separate files and kind of divide them up so it's not trying to process everything the other thing that might happen is you might be using somebody else's Library okay so let's go to our assets let's look at our libraries if we've I'll turn on one of our libraries and it will potentially our one's only really small okay so it's not doing much but you can have somebody else's library on that has thousands it might be a community one that somebody's made this gigantic thing that seemed really good but that's what's slowing your machine down it might be that you have to pick out the stuff you need or make your own kind of like version of the library just to tidy it up it can be also just if somebody's made components and variables and they haven't made them very smartly they're just like copies and copies and copies and copies and copies and you're trying to use those either through a library or just copy and pasting them in I'm going to show you in this course how to tidy those up and make them nice but you might be working with somebody else's file just keep an eye on this you can get rid of it click it once double click it actually again this one is in desktop and browser and the same two gigabyte limit is kind of in both of them it's kind of a browser thing and essentially that's what this desktop version of figma is it's just that browser loading without all the Chrome bits another one small one look at this you can resize this did you know that I didn't know that for a long time it's really handy especially when you get into really long naming you can just go that's better and alternatively you can make it smaller why is it handy I thought it was any when I discovered it all right next tip actually the last tip uh quick actions we've done this before it is command forward slash okay or control forward slash the Leaning forward slash okay and uh you can type in anything like there's so many shortcuts in this course and learn and figma and you're like uh what was that thing the resource use thing he was talking about look at that res and I can go all right let's turn that on okay so they have actually made another shortcut for it for like International keyboards it's shift p it is not should be it's command P okay and it'll come up again you can type in resource and there's that one again okay and it works for any shortcut so what I might do is switch to command P just so myself I get better at using command P because command forward slash I always does anybody end up doing that command backslash or control backslash is turn the UI on and off so which is a good chip there you go but I do that all the time and then hit this one because that the one I actually want let's use command P or control P two shortcuts to do the same thing you will notice that happening more and more in figma because they went with just like uh you know a USA query keyboard at the beginning and now they're trying to make shortcuts they're a little bit more Universal to different languages keyboards so you'll find like why is there two because there's two all right that's my file handling Wizardry on to the next video yes you read the intro right Advanced copying and pasting and selecting stuff I'm going to try and make it exciting but it's Advanced and it's good you're going to need to know it so there you go let's get going I can feel you there you're like I'm gonna skip this video better get good quick all right it's going to get good there's some useful stuff so we know that if we grab something from this Frame and copy it and we want it on this one we can hit paste and it puts it exactly where it founded in this one which is not actually aligned to the bottom you're like okay that's right well what shortcut has Dan got what we can do is copy it like before I'm gonna click on the thing we want to stick it over Okay click on it and you can hit command shift V or Ctrl shift V and look at that it puts it over the top not where it is in the frame but where you select like if I click on this and hit that same shortcut command shift V Ctrl shift V it just sticks it over the top of the thing you have selected which is almost good look it's still the other and then replace it just kind of puts it on top so I'm going to undo that I still can't work out why that's good but there you go you can replace over the top of a selection what's better though is if I copy it and I do a slightly different shortcut which is command shift not V but r or control shift r boom it actually puts it and replaces the thing you have selected you've got this and you need to replace these gems okay I'm going to copy it and then I'm going to select it and go commission V and I'm going to go command shift R there you go it replaced it the thing I had selected not because normally you go copy you click on the frame and it goes exactly where you want it that's kind of good and mostly helpful you can do it in a lot of goes as well watch this I'm going to undo bring back our lovely Comic Sans I'm going to copy this I'm going to you and you well it do too it will do two command shift R Ctrl shift R wherever it is on the frame it hasn't just stuck it over the top it's replaced it that'll be in your shortcut sheet for sure and most of you will know the shortcut I just draw a rectangle at the top for example okay and I'm going to select all of these frames holding shift and hit paste just a regular old Paste can you see it puts it on every single artboard this one now oh sorry frame this doesn't fit across but that's okay great way of getting nav across lots of different uh frames at once that's multi-paste you don't do anything you just select multiple frames and hit paste and it sticks it where it got it on all of them another interesting one is if I copy this and what tends to happen is like most uh programs if I go to this one and hit paste it puts it exactly where it got it or if you have nothing selected it just pastes it where it got it from unit with this duplicate over the top is this handy you can actually right click it and whenever you right clicked your cursor is this special option that says paste here okay so say you wanted because otherwise if I'm up here and I hit paste can you see I want it over here not down there go away and it's overlapped I can just say right click paste here it goes to wherever your cursor is I'm trying to sex that one kind of good though right it was worth the 30 seconds anyway okay it's time to scrape the bottom of the barrel uh next one is Select inverse so let's say that I want to leave the nav on this page get rid of everything else so select all okay it's command a it selects everything the cool thing about command a is that if you're inside of a frame it selects everything inside of that frame if you have nothing selected and go command a or control a it selects everything in your document you can hit delete okay but if you're inside of here select all you can delete everything inside that frame or do whatever you need to it copy it paste it do the paste here maybe but now there is a select inverse okay so I'm here I want to select everything but this I do this all the time I want to clear out everything in here or change the color of everything in the frame but not this so you select the thing you don't want hit a command shift a or Ctrl shift a on a PC and it selects everything in Reverse except this look so he's Left Behind except weirdly in figma at the moment that shortcut selects everything in every frame which makes it kind of unusable because often where I need it is when I'm in here and I'm like in this group here and I'm inside of it and I want to leave this one alone because I've changed the color of it I just want to select everything else because there's lots of different things in here come on Chef day but it grabs everything on every frame oh there is I'm hoping that gets fixed in figma check it it might be fixed now there is a plug-in for that uh what's this there is one called select inverse for Real uh let's do it uh so I'm inside this group here okay I've got this selected and it will select well let's run that plug-in who remains with a shortcut to run previous plugin is that's right nobody remembers command option p on a Mac or Control Alt P it's handy when you are a bit of a plug-in lover and in this one it's pretty cool because if I go my command option P okay it just runs the last plugin that I used there you go to find it first run it and then you can use that shortcut and all that all that plugin does is exactly that so let's go again go into my group select this one and because I've run the plugin already command option P control option P hit delete look it selected everything but that not just everything in the document hopefully that becomes just the regular default feature in figma all right so select inverse uh things using a plug-in is the bottom of the barrel for my Advanced selecting and uh copy and pasting let's finish with a good one that you might know already shift one to go see everything I want to actually grab all the navs on the 100 Art board so sorry 100 frames that I have now I can never remember the shortcut for this one so we're going to use the shortcut shortcuts remember it is command or control forward slash but we're going to start using the command or control P because that seems just easier okay I'm going to type in same there you go have something selected like our nav we're going to say select all the same properties there you go it's a great way of selecting everything and deleting it moving it finding it all changing the color obviously ours is a component so we could do it up the top there but there you go select same properties same one here just to practice that shortcut again command or control p and because it's already at the top there I don't have I just have that enter on my keyboard select that Commander control p and you can see there I've got those last few ones that I've used no typing required all right how did it go was that super Advanced copy and pasting in selection hopefully one of them were good and we'll try and use them all again in the course somewhere on to the next video alright welcome to all the fun and crazy things you can do with fields in figma it is pretty cool so pretty much any field you want of I've just got a frame here any of these fields can be operated by the keyboard so let's say I want to add rounder corners and you're not sure just clicking it once and use your up Arrow okay can you see just adding it let's move it over so the editor doesn't have to zoom as much okay uh here we go and you can make it go faster by holding shift using up and down it'll go multiples of eight okay so we're at 20 now go up one it goes eight why eight you know why eight now everyone loves eight it's a good nudge amount so without it goes in ones holding shift goes in eights any old field okay rotation tap it around until you like it works with say color as well okay this fill here I've got my cursor selected in here I use my up Arrow can you see it's only moving very slightly okay up the brightness scale that's what it's doing if I hold shift okay it goes in bigger chunks actually it's going in there not brightness it's going in the Hue you see moving along that's not that useful Dan the opacity is better let's say the stroke here you're not sure the size I've clicked in one up and down jumping in eighths is probably not that useful in this case but anything you want to click you can use up and down hold shift to make it go faster I like it for font sizes okay so we're selecting here clicking this one and just use your up and down until you find the size that you want when I go up an eighths because you want to stick to an eight point grid oh handy handy now a lot of the things you can do as well is you can scrub them okay anything that has a little icon next to it see all of these okay this one here my kerning or letter spacing here we go or just drag it okay I don't have any line height but you get the idea same with these ones here instead of trying to tick it you can actually just drag them same with the rotation okay any of the fields that have an icon click out hold it drag it and it will kind of scrub through it let's add a stroke and see the little stroke icon here we go scrubbing now when we are moving things around okay using the left and right arrow not using any of this I'm just clicking on it using my arrow up down left right okay this is called nudging okay and you can nudge it in big chunks by holding shift okay you probably know that already what big chunks is it using it's probably using eight if you're not using the a point grid because you're using something else you can actually go and change it in your preferences so I'm going to go a little F I'm going to go to preferences there it is there and down here there's an A nudge amount click on that and the big nudge which is holding shift is eight you might decide actually your small nudge is eight and your big nudge is 16 you probably won't but you might go back to this this was the default in figma for a long time and you might not use the eight point Grid or eight point spacing so go back to 10. I'm going to leave mine in eight so I can do my nudging now Eight's good as well maybe four because a half of eight and sometimes you do need that up to you but now you know it's there and lastly I think we've covered this already you can do maths in these things so if you need it to be divided by it's backslash oh sorry forward slash two okay divided by two you can add plus let's say you want no no plus eight pixels clearly you can do minus eight pixels you can use times which is a little hash no no 50. there we go any of these fields 100 you want it to be half okay divide by two all right that is all the cool crazy things you can do with fields and figma does adding the words cool and crazy make it all seem more exciting you probably like me are excited for these tips and tricks in figma all right let's get on to some more of them all right let's learn all the tips and tricks about working with frames shortcuts and the like okay first of all let's click on this one and use a shortcut let's use shift two to kind of zoom in on it want to move to the next frame just tap n on your keyboard look at that just kind of like Cycles through all of the available frames nice uh shift in kind of goes backwards so forwards just tapping in backwards shift in super useful Some people prefer the home and end button on your keyboard look down your keyboard do you have home in the end some keyboards don't or you have to hold down some special function keys why is it better or worse it does the exact same job except one zooms and the other one doesn't so let's use end to move to the next frame can you see it didn't Zoom it into the middle of the screen same with the next one end next one it's not zooming in whereas the N key like fills the next frame as fast as you know as big as it can be whereas end keeps the same zoom level okay decide which one you like the best either in or end home is going backwards and it just doesn't Zoom which one do I use I mainly use in because when I'm using my MacBook Pro uh it's really hard to get to the home and end keys but when it's plugged in here when I'm doing my tutorials with a fancy keyboard clickity clack if you'd like the clock I do too I have got my home and in key so I can do it here now the sweet trick is I want to go to this one here Android just double click the icon okay and it just moves to it kind of zooms across nicely so you know you are kind of hits it in the middle of the screen when I go back to measurements oh nice another little trick for frames is at the moment I dragged out the size of this Frame and just dumped everything into it what you can do is say new measurements actually just squish down to wrap just around the things that are inside of this can be handy when you're working on like a drawing inside of a frame or you've deleted some pits out you just want it to kind of like wrap around it nicely you can squeegee it down that way there is a shortcut you hold down oh you can see it there hold down all the shortcuts and then hit ah I will never remember that one just click the button alright the next one's handy for using frames I'm going to bring in an image just cause it'll hopefully Express this shortcut better and command shift K C control shift K on a PC your exercise files has a folder called images in it grab image one and I'm just gonna hold shift and drag out a size okay and let's say we're going to do some horizontal scrolling which we will do in this course and so we need things to kind of like go off the side of the page what ends up happening if we end up duplicating these can you see it actually escaped okay I wanted to kind of be off the page but hidden inside of here and that can be tricky things just start jumping outside of frames how do I fix that hold the spacebar key down while you're dragging so I'm going to copy and paste this I've got two of them which is if I started dragging across it wants to jump out you can kind of see it over there in the layers you can see it will move across okay and you can see it over here on my artboard but if you hold the spacebar while you're dragging across look you can go all over here and it's still out there we go same for things like if I want an image to look like it's kind of like you know frosted down the bottom and it's kind of like almost off the screen holding shift you're kind of like I just want to just nope just dip hold spacebar look it can be anywhere you like it can be all the way over here it's still in that frame or spacebar and the last one it's here on my list I'm going to show you because this is the advanced course I don't know why it's here though I'm going to use my shortcut command P okay for my quick actions and I'm going to type in the thing that I because I never know what it is there you go show frame outlines there you go can you see the teeny tiny frame in there let's have a look uh there we go showed the frame outlines command P again I can just click enter there you go it turns the frame outlines on it's there somebody somewhere will need it I have never needed it let me know in the comments if you are that person so frame outlines not that helpful just general outlines is pretty good shortcut it's not part of the frames but hey we're here command one don't hit command one shift one to see everything then you can hold shift and hit o for outlines so hold shift hit o it's the same on Mac and PC okay you can toggle to see the outlines of stuff that is actually quite handy if you're an illustrator user which a lot of you are command Y which is the one that works in illustrator Works in here as well so you can be a shift o person or a command y person doesn't matter it is showing the outlines of vector stuff all right that's all I got for the moment for sweet frame tricks and tips let's get on with the course if you've got a trick or tip for frames uh let me know in the comments I'm always looking for more to add to my repertoire and add to Future courses and if you're watching have a look at the comments see if there's other good ones in there but for now let's get on to the next video alright let's learn how to zoom in and out what but hold on it's Advanced I'm doing air quotes Advanced zooming tips and tricks stuff you might not know buckle up for excitement now we all know if you hold down command and hit Plus or Control Plus on a PC you zoom in same key but hit minus zoom out that's the same in all the Adobe products what I didn't realize until recently is you can just hit plus and minus on your keyboard and it zooms in and out there you go I'm like institutionalized with Adobe shortcuts but just plus and minus Works a more exciting tip is let's say I've got this selected and I'm down here and I zoom in using that same sweet shortcut plus it just zooms into the middle of my screen not to the thing I had selected okay you can change that as your preference okay under your little figma options let's go down to preferences and this is off by default I like it on works like Adobe Illustrator where if you've got something selected and you hit plus it zooms into the thing you've got selected you might hate that so you can turn it off shift one to see everything then go on working on this thing here and then plus plus plus plus and it zooms in on it there you go is that advanced zooming maybe not now the last little tip and trick is for people using mice they have a scroll wheel I do this all the time when I've got a mouse with a scroll wheel which is most of the time when I'm plugged into a big screen is the scroll wheel uh goes up and down okay by default if you hold shift it goes left and right if you hold command down on a Mac controlling the PC it goes in and out good old scroll wheel if you don't have a scroll wheel that won't work there you go scroll up and down shift left and right command or control to zoom in or out all right that's it for Advanced Air quotes zooming techniques all right let's get on to the next video hi there you might be wondering why is his background UI all dark and Moody and cool like when yours is like this you've got light mode enabled that's the default normally let me show you how to toggle between the two and some of the things that happens to the defaults when you change it alright so how did I get my dark and Moody background uh we're going to go and change it to the light theme command P control p and let's just say light you go use light mode bam everything's light kind of the background doesn't change once you've changed it if I make a new document it kind of uses all the light stuff can you see light uh UI but also a light background color okay and the background color doesn't update it's kind of like set once and it's done so if I go and change this command p and go dark mode you can see the background color stayed in the light mode you can change it yourself right with nothing selected just go and pick a dark color but once you've changed it every new document will remember and be dark mode and have a dark background and why is there a light mode in dark mode other than the cool Factor dark mode is cool by the way it's for when you're in a poorly lit room or it's night time and you're working in the dark the UI in light mode command P light is actually quite bright especially if the background comes along for the ride it's actually quite a bright light in the room not that it hurts your eyes because your eyes adjust but it's a it's a maybe a distraction from the work for me I don't worry about it in figma I pick dark mode because it looks cool but when I'm using something like Premiere Pro or photoshop or Lightroom when I'm doing like lots of color grading and correction and stuff then I don't want to be distracted by the UI you can get it to follow whatever your computer is doing so like my Mac here has an option where you can set it to Auto so at night time it goes dark and daytime it starts light I just force mine the UI of my uh Mac to be light but you can get it to follow that you can find find it somewhere there it is so hit the F go to preferences go to theme and you can click system theme and it will update depending on what your computer says I don't know if that works on a PC hang on got a PC right here in front of me wait dip I knew it I knew if I started that PC it would say something like updates underway please wait all right let's please wait all right the wait is over and yes you too can do system theme on a PC was that worth it Dan no it was not anyway I don't have a PC I have a little hate for PC but if I'm honest they are just as good for half the price enough let's go on to the next video hello you hey it is time for another class project I'm going to get you to make an event card that has a date box that sticks to the corner let me show you so we're gonna I want you to make this okay make a rectangle and put well a frame okay and put a little date box in the corner that sticks in the corner okay let's even get that working it's skills that we've learned already through the course but I just want to two things I want you to practice because sometimes you like just do it once and kind of drops out of your head but also we're going to use it to move on in this course to build up grids so we're not just looking at features we're actually making something so make something ish like this the rounded Corners are optional so you know where we're heading eventually is we're going to make something that's just a little bit more responsive like this okay uh in upcoming videos so we need the core of it made and a bit of practicing if you're not able to do it don't worry in the next video I'll do a completed video okay where I actually do it just in case you do get lost what you want to just compare your method from My Method uh the only other thing to remember for this class project is make sure it's a component okay so that we've got instances of it over here that we're using and we're keeping our main component off our frame anything else deliverables same as the last one uh make a video if you can if not screenshot okay and I just want you to drag The Edge showing that it's responsive okay and upload the link to your video often you can upload the video itself so have it on something like Vimeo or YouTube those are the best places and then just link it and then post the link in the assignment slash project section all right have fun making it if you get stuck I'll see in the next video alright this is the completed version of the class project so in case you got stuck in you weren't sure how to do it you can watch this I'll show you how to do the thing stuck in the top right corner real quick that's pretty easy and then I'll go on and actually just I don't know do the rest of it okay like how I would do it to a professional level like make sure it's a component I'm going to turn this thing into an auto layout because I'm going to pretend I did it on purpose really I did it and I discovered how awesome it was later on but we'll do that make sure it reflows sticks to the corner I'll show you how to push it out so that it's I don't know 16 by 16. this is a few little tips and tricks in here but you don't have to watch the video because you can see it's a little bit long but for those who want uh right along it might be interesting at least to compare to how you did it to how I did it it's always good to see sometimes all right let's jump in all right let's start on this one here click on the frame name we're going to use shift one actually shift two to zoom in if you're like me at the beginning you weren't sure there's a command one or command two or shift one you're like ah I always get it wrong the way I remember it is like shift one two three is I'm shifting my view whereas command I'm commanding you to change tabs one two does that help anyway let's do it just real quick the basics so that you know you've got it and then I'll go through and design my whole little card things or at the beginning and you can watch if you want if you need the experience or you want to see how I did it or maybe you got stuck somewhere so let's do the basics let's go f key because it's better than a rectangle more options for a frame okay I'm going to draw out our size I'm going to give it a color so you can see what I'm doing uh bikini color so this is green greenish aqua to you there you go okay and inside of it is going to be another frame so I'm going to hit the F key again and with it selected and kind of drawing over the top of it it ends up going inside you can see frame one which is not a good name for it let's call this one card hyphen event and then this one's going to be my date okay I'm going to give this one a fill of white just so you can see it and all I want to do is say date my little frame guy is constrained to the left note to the right to the top yes so when I select this now it Jiggles around comes to the right awesome all right dismissed unless you want to see it all there's some tips and tricks but as you can see from the time I'll kind of work my way through I'd hang around if I was you but you don't have to all right let's get into a bit more detail this needs to be component because I'm going to use it loads of times so remember that sweet shortcut you remember command option K that's right on a Mac control option K on a PC he is now our main component the main components should hang out over there we should have instances here let's just have a couple because it's interesting but we need to do most of our editing in the main component because we want to flow through a couple of things is we want to have we're going to click hold and drag the little icon there to the right hold shift and it jumps up and eats how much do we want 16 24 24 let's use 24. make sure it's a squircle okay I'm gonna hit the little options here hit the little dots because squirkles look better than just rounded Corners okay iOS do this thing where they smooth the corner it's called Corner smoothing I'm going to zoom in we're going to use my scroll wheel so I'm going to hold command down or control on a PC and zoom in and out the wrong way first there you go and look can you see the edges there changing do you like it do you even care there you go Ikea it's kind of do the same for this so let's go U H it's going to be good with the Corner smoothing all right text that are inside it so I'm going to grab my type tool and if you kind of Click Inside Stuff often it'll go inside you can see it went inside that date frame kind of works so I'm going to say 17 size wise let's use that little shortcut where you click on it and use up or down okay what do you want mine about 10 10 is pretty small for an amp but this is like more of a suggestion and not a full like the accessibility and kind of date will be in the actual listing this is like a little card trying to cram in too much information I'm gonna have two bits of text this one's going to say ma nope Capital Ma I'm going to select it all hit command B to make it go bold Ctrl B on a PC just instantly goes bold which is cool I'm going to hit escape to get out of it hold shift to click both of them I'm going to hold down the option key on my Mac Oh Canada PC I'm going to hit H to line them up horizontally so that same keep as V we'll align them vertically so that we'll just click those okay I don't remember what those shortcuts are because they don't make sense but this what makes sense look option or alt on a PC H for horizontal alignment okay so I'm going to do these and what I'd like to do is mine ended up inside my frame which is good you can drag it out if you need to okay and drag it over this way okay I would like mine inside so drag yours inside this date frame because what I want to do is I want this Frame at the moment I got a fixed or is it you are a fixed width and a height 32 by 32 great size but I want it to expand if there are longer um you know some of the digits aren't going to fit perfectly in here so I want to turn this into an auto layout remember shift a so that it's perfectly in the middle can you see there it's defaulted to hug contents if it hasn't for like fixed width okay you can say actually just make it hug everything on the inside so that when later on and somebody goes I know what's a short one it's probably just as long okay I wanted to oh I wanted to expand and contract okay and it allows me a bit of control here to select it say actually I can play with the spacing if I want to the padding I'm gonna make one four it's a bit more responsive so let's go shift one okay see it all it's all appearing there nicely I want mine spaced out a bit better from the edge so plus plus I have delete on the way okay I want mine to kind of go in this top corner here but I want it to be I want to be minus how much let's use our little grid system okay how I'm kind of seeing both of them I'm like spacing wise what do we think um 12 16 let's do 16. 16 feels like a good Gap from the edges okay so I'm going to say you are going to be minus 16 to go across and then plus 16 down and I know it's perfect look at us being perfect and hopefully it's still responsive it is yep picking the right side the constraints are set perfectly remember the constraints aren't done with the parent it's done with the child on the inside that's inside of a frame yes but work on this guy look you have constraints at top and right make sense and now the nice thing uh shift one is I can have these like on a smaller device uh kind of full width but on these larger ones my plan is to have like two of them kind of stacked up on a really big wide phone okay uh and have grids like this d and this is going to work for our desktop view as well but one of the problems here now is kind of consistency with spacing we can go through and kind of go you like it's kind of a pain you're like you I want it to be what plus eight no plus 16 okay and you can do that for everything but a grid system is going to help us make this a whole lot faster and allow us to be a bit more consistent across lots of things rather than just dragging it and try not to forget to use 16 instead of 17. so that is the segue to the next video and while we're in the section called grids all right now you might have done it differently that's okay doesn't matter as long as it's kind of sticking in that corner okay and you might design it a bit different in terms of looks you might not use an auto layout was that necessary probably not I felt like we kind of needed it meh anyway why could it be good actually this could be good later on we might use it on a desktop version and we might use it this way um look at this I can't change the auto layout Direction in an instance of it okay I've got to do it up here you and Lane I could say you can go this way look at that oh that is a I should have lived with that that is a very good use case for for um uh Auto layout here you go let's pretend I did that on purpose all right that is the end of the video long one I hope you picked up some tips or confirmed some of your knowledge or you figured out how to do it a better way let me know in the comments if you did it a different way if you're watching this video have a look at the comments it might be a genius way that Dan didn't think of all right that is it I'll stop talking about myself in the third person let's get on to the next video hello hey uh before we get deeper into grids let's talk about the difference between grids and constraints and auto layouts because they can be confusing about when to use each of them which is good for what it's confusing because they all share a similar sort of purpose it's about responsiveness and if I'm honest I've recorded this video about 10 times already trying to make it concise and not me waffling on for I don't know 15 minutes it's meant to be recapped and come on recap okay let's start with auto layouts Auto layout we already know okay we can grab four different things and we can say shift a for an auto layout and it gives us some kind of responsiveness and it's more to do with the content internally in our Auto layout as opposed to constraints and grids that respond to the frame size okay so if I've got a different desktop size or a different phone model the responsiveness that happens there are grids and constraints Auto layouts are more to do with what responds inside of my little group here okay so I can go in and say actually this is uh you know instead of settings it's account you see it reflows it's responsive not to the outside frame just to its inside bits I can grab you and go U and go you and responsiveness excellent okay the constraints though which we've done if I select on this and say actually I want you to be constraints of the left and no sorry the right and the top it means that when I go and resize this desktop okay maybe for a tablet view can you see it comes along for the ride so it's responsive but it's more to do with the frame size so you often use these two together okay I can resize it and I can go in here and say actually you don't log out I want sign out in the auto layout adjusts so grids why do we have them they are visually useful okay they just help you get consistent margins consistent spacing between pages on multiple Pages they have some other useful things if I got this you'll see it snaps to it which is great okay I can have consistent spacing between them all on different pages I've already said that and where it becomes super useful is it actually ties in with constraints okay over here we said you constrained to the right and the top what we can do with a grid is we can say you I want to be constrained to the left and the right but it's not doing the entire frame it's actually just doing the grid itself why is that cool is that when you have a different size okay we have a different size page okay let's say it's a smaller Page look what happens oh look at that okay so grids tied with constraints means for a more consistent reflowing and responsive design to say how put those three different things in their own little box and can you see how they kind of like complement each other hopefully so when do you use each of them so Auto layouts I got kind of like three levels or four levels and for your initial Scrappy design we've got no idea what you're doing here you're just kind of getting things on the page to get everything laid out you don't need any of these you don't need Auto layout or constraints or grids unless you want to okay but often at that stage there's so much flux and flow you're just dragging things around and trying to get things in order so concept stage none of these are that useful when do they become useful kind of at different times the grid I find is useful basically once you've got that concept stage done use grids because it allows you to be consistent across your different designs it's one of those things to get that's kind of easy to get right you know you know what kind of grid size you're going to use how many columns let's do that on all pages awesome Auto layout is another one that you can use early in your design okay because you want to you're still adjusting things okay you're removing things and moving them around so you're still at a reasonable concept stage but it's a lot easier having an auto layout to Reflow these things than it is to be manually like turning them off and deleting them getting the uh you know the spacing perfect between them all so often I'll use Auto layouts early in my design process after the concept maybe after client approval or maybe I'm just happy with my say wireframe or High Fidelity and I want to go a bit further so grids early Auto layouts early where I start worrying about constraints okay is later on when I need to build out different sizes so often I'll just work on one phone size whatever the most typical generic sizes to start with same with the desktop but when I get closer to the end of my project where I actually have to figure out what am I going to do for tablet what am I going to do for a big screen for a little screen for a pro Max phone or a tiny little Android one that's when constraints become a lot more useful so that's for me and my different sizes but also if you're going out to other people so as soon as you have to give them to someone else you should probably decide how these things constraint so that they adjust the way that you imagine them wow so that was a big waffly mess but that was the big waffle mess I could come up with I hope it did help a little bit so my parting words are that auto layouts constraints and grids don't have to be used at all especially at the beginning where they become useful is when you've got more than one page multiple pages and you want consistency because you've got a reasonably established design and they're absolutely essential when you're working with other team members or preparing things for yourself to be used later on in future projects all right I should probably started with that all right that is the end of the video let's go on to doing some stuff dan stop talking hi there in this video we'll make a column grid just one big one with margins on the side we'll make a second grid because in this case an eight point grid so we can get some good layout within our cards not just the parent frame I'll show you how to copy and paste grids from one frame to another I'll show you how to create a style edit that style and a couple of shortcuts let's get into it all right let's make a grid let's click on the first phone uh phone frame and I'm going to say layout grid plus and I'm going to use the columns so hit on the little icon there switch it to columns okay I'm going to have one column layout for my small phone okay and I'm going to have a margin of a really small kind of tight layout uses 16 pixels like it's pretty close to the edges and if you've got loads to squeeze on you might have to do that okay and but I'm going to use 24 gives it a bit more breathing room around the edges and I have the luxury because I don't have so much to cram in cool now you can copy and paste these to different phones if you've got lots of different ones you can just copy and paste this across okay so in my case I'm going to click on the frame what you want to do is find your layout grid and then you want to click in this random area here I don't know not there there it just kind of allows you to select stuff you can do that with lots of things you can select in these weird areas here and you can copy and paste them once you've selected them okay so I'm going to go yep I'm going to go copy and I can click on as many phones as I like and just hit paste so let's just command C command V or control C control V just your regular copy and paste that's a good way of getting across lots of documents but problem with that is it's probably easy just use a style then so let's undo that I'm going to click back on my first one and I'm going to hit the little uh four dots there say make a style from this grid I'm going to add one okay and I'm going to call this one one column okay and I might put the margin in here as well so I know what it is at a glance because I might have to have in different pages might have to have different margins all right let's create a style if you you need to update a style okay you can either click off in the background so you see all of your Styles or click on the phone you'll see your style kind of there you can break the style so it's not connected or you can adjust it we can adjust it by just clicking on it there it is there and you can edit it by clicking on this little guy see edit Styles okay and it halfway gets there you're like great I can change the name but I want to change say the margin okay from 24 to 32 you actually can click on this here there's a like on there you can get into like the depths of it all change your margin and your gutter all right so that's creating an editing our grid the shortcut for turning it on and off is shift G have I done that already I'm not sure shift G okay because it's great when you're laying it out but when you want to design stuff the big red thing is not that useful the other thing to make sure you're doing when you've added your grids is to set the constraints okay uh it depends if you want your you know I'm going to want mine to snap the side and snap over here same for these two actually I'll delete that one because they're just instances of itself and I'm going to make sure that uh both of these selected are not just left but a left and right so that when they adjust okay they come along for the ride otherwise they don't let's make one more style we're going to use instead of the columns we're going to make a grid okay we're going to do it on this card here because we had you know we were trying to push things over like 16 pixels and down 16 pixels and let's say that I want uh kind of a bottom of my card down here how do I make sure it's kind of defaulting to multiples of eight and we can do that with a grid so I'm going to click on the actual we could do it to the instance but if we do it to the main component it goes through all of them I can say actually I want a layout grid on you I'm going to leave it as the Grid it's defaulted to eight points we can change it by clicking on the icon here and it just means now when I'm laying things out with my frame I know that it will snap can you see it snaps to the different eight points okay consistency Dan I love it what I might do is and the edge of this like there's still some responsiveness not everything is going to be a point because all phones and desktops are different but let's get my main component laid out nicely okay I've just zoomed in a little bit so I can actually see you know I'm on the eight points okay it doesn't snap when you're doing the outside of the frame it snaps with things on the inside like that frame that I did that you can't see let's give it a color okay but the edges here let's just tidy It Up by saying the bottom is where is it eight points the bottom part of this is going to be eight points as well oh okay let's turn into a style so I'm selecting the outside and I'm going to say let's make you a style of grid and this is our eight point grid let's create our style all right so we've got a couple of different styles one thing you might notice that I just noticed as well is that is not adjusting why is that not adjusting constraint stand okay so I'm going to stick it to the edge there but I wanted to actually expand and contract depending on the parent frame so I'm going to say we know constraints left and right that's going to help us and it's going to be stuck to the bottom nice remember the shortcut shift G on and off all right next thing I want to do is when we're resizing these for the different ones you can see uh it's not how do I get it to snap to like eight point I can see the grid inside of it but the outside frame doesn't I can zoom in and go all right here we go let's just get this to snap to that eight point grid perfect ish let's add our third set of grids which is rows we've done columns we've done grid let's look at adding rows hi everyone in this video we'll go from having one column down the middle as a grid super helpful two having rows as well looks like where's Waldo or where's Wally depending on where you're from but these little stripy guys are super helpful for getting consistent layout using our lovely eight point grid alright first up I think I was messing around with my layout there didn't quite get it to the edge of the column okay and I'm going to make sure that this one's stuck on this side and what I also want to do is grids are good I don't use them very often I show you because lots of people do so what I'm going to do for this event card here is I'm actually going to turn my I'm going to take off my grid I've got it as a style that I can use later on and apply it's going to turn it off for the moment I'm going to show you why I like rose better they're not really better they're just visually less confusing for me at least I'll use my f key for a frame draw out it's gonna be my top navigation I'm just going to drag it to the top and the sides while I'm here my mind says make it top them uh sorry me kit left and right so that it resizes with the frame I'm going to give it a fill color I'm going to give it any old color for the moment okay and now that it's left and right constraints it's going to resize perfect but how high did I make it I just made it random height that looked okay okay and it was 55 but I want to be consistent I want to use eight point grid there's enough flexibility in there to get the size I want I'm going to be able to be consistent across devices and different projects so let's turn on our rows so I'm going to click on the outside frame at the moment there's a style applied to it okay so I can't add another one so I'm going to say actually let's break this because I want to keep the column okay but I want to add another one not a grid okay but I want to add rows rows are strange not strange but at the moment they are stretching so I've got five of them shift two five of them okay let's close this down shift two to see the thing I've got selected and there's five of them and it kind of stretches to fit and that works for columns but not so much for rows because rows I can scroll up and down the screen as long as I like it's not a fixed size so what I'm going to do is I'm going to click on it and I'm going to edit these rows and I'm going to say you're not stretchy you're going to just stick to the top and I want you to be a height of eight with a gutter of eight as well and it's kind of working they're up there you just need lots more of them how many more just put in a giant number 100 as long as it covers your whole um frame you can put in 200. it doesn't really matter just kind of goes off into Infinity you can see how that is for me I've got my constraints for my column left and right okay and now I've got my rows and now it allows me kind of like the grid but less messy okay so I can just go U it snaps to it so I can say 48. it's perfect it's close enough to that random 50 something I picked and now with these items I can start laying these out and snapping them to the top same with the bottom of it okay if I decide that the bottom of this needs to be how high it's going to snap to my eight point grid what's the spacing I want between them let's say it is 16 points I need my Vint card as a white thing inside of it let's change that from White okay frame to I'm just going to use a darker color so that down here it's more more visually uh viewable it's not a word Dan but it means that can you see I can I'm holding shift to make sure it goes up and down I actually need to just drag it around and I know it's 16 between the two if you want to match the outside I can drag it one more to get my 24. there we go rows are better than grids in my opinion this one's not lighting up so it's going to delete this guy and go you there we go 24. nice remember to check select on the actual thing hold down the option counter Mac alt canopies and then kind of hover above the component above it and look at that it's 24 perfect all right shift one to see everything let's click on this shift two and it looks like where's Waldo or where's Wally where I'm from kind of stripy red and white but that's only handy when you are laying things out when you're trying to design they're in the way what's the shortcut to make sure it goes away it's right shift G so that's using rows and columns you can see my top one is not enough I'm going to you you so that's rows and columns in figure in grids if you want to use them all right on to the next video hey everyone let's talk about editing an existing grid style okay at the moment we have a style okay I've got this Frame selected I've got this style here called one column but I want all the rows part of it as well so instead of breaking the link and making it a new one but I should have done in the last video is with it selected here I can actually go I don't want to break the link I actually want to go and edit it so I'm going to click on this little icon here and I'm going to say this one here I'd like to adjust okay so instead of one column I'd like it to be one column with a row of eight points okay and I want to add to it here instead of breaking it and adding another grid layout I'm going to go into here into my style and edit in this so not that one I want to go to rows and I would like the to be top how many should be in here how many you know it loads okay and I want it to set it to the top and not be stretchy I want the height to be eight and I want the gutter to be eight if you mess around with the offset it's just the offset of the top you might want say 20 pixels all the way around as a margin and it messes with your eight point grid so you can actually just offset it the 20 make your margins 20 and then still run an eight point grid within there that's totally fine I'm happy that I'm using a all the way around so we go I've updated that one so what I want to do this one now is I actually can get rid of these and say let's apply that style of one column and all the rows nice all right that was a short one updating styles in figma hi everyone let's add columns to this Frame here not the overall frame because we've got this weird use case where we just need four columns just for this little box here we'll add one little column layout grid then we'll take it a bit further okay and we'll work on this one shift two where we've got a fixed width navigation okay maybe it's the admin part of our website this has to be this size but the rest of it needs to be stretchy and responsive it's easy to do and allows grids to be a bit more unique for our specific requirements right let's go so we can add columns or any sort of layout grid inside of frame so I'm going to grab my frame tool I'm going to draw out like a features set of boxes here but I want it to have four columns so instead of trying to do it to the overall frame which is my phone I'm just going to do it to this Frame I'm going to say add layout grid and I want it to be columns and I want it to be say four which is way different from my one okay but it's only unique for this like little features cards that I'm going to do in here little boxes that you can click to go to the different I don't know subcategories of gigs okay and the gutters are going to match other stuff 24 Maybe 16. and it means now when I draw grab my f tool and I draw boxes inside of it okay I can get it to snap to the rows but also I can get it to snap to those new columns that are inside of it and I can say can you be left and right let's give it a fill color where are you you're invisible okay fill color of not white it means that these will adjust okay so you can have columns not just in the parent frame but inside child frames for like special occasions like this um let's do that other one you saw at the beginning with the fix left nav so let's jump out of Mobile land now and let's hit the F key and let's go to desktop and I'm going to pick generic desktop size and I'm going to put it down here okay what we want to do is we don't want the generic 12 column grid okay 12 columns is a really good grid for desktops okay and I'm going to do the same thing gutter is going to be 24 I'm going to have a margin of 32 maybe a bit more 40. problem is is I need this fixed left nav so what I want to do is shift 2 to zoom in let's use the F key to design my navigation okay so I'm going to it's going to be a fixed and size okay how wide is it going to be it could be using the eight point grid you can type in anything you like okay because it's a fixed width it's not going to change depending on the different computers that are going to be viewing it this stuff needs a change this doesn't needs to be a fixed size to fit everything we need in here so what do you do with this so what I'm going to do is give this a fill color pick anything as long as it's greenish and what I'm going to do is copy and paste that style or we could delete it but I'm going to select it here let me run the little Edge bit there go copy okay I'll delete it off this and what I'm going to do is I'm going to grab the uh f for frame and I'm going to drag out a box that goes in here can you see what we're going to do I'm just going to apply it to here so you need to get out of the mode of applying grids just to the background you can add it to individual frames so let's hit paste and what I want to make sure is that it is doing constraining left and right this one is not going to constrain I wanted this to be a fix so it's going to stick left and what I might do is do top and bottom so it stretches same with this one top and bottom now we've got a fixed left nav and stretch your cons on this side all right that is layout grids within child frames not just the overall parent all right we've got our grid fix done now let's get on to something else hello it's class project time I want you to create a little brand okay we're not going to spend it's not a branding class but let's have something unique for all of us that when we're moving along we're building something that we can use in our portfolio and then when we share it we're not all doing Limerick techno okay how do we get a bit of variety and we use in your class projects there'll be a link to this randomprojectgenerator.com I made this with the team at bring your laptop so that you can get uh like a generated brief okay so go to it go to the figma advanced okay and in here type in your village your town your city it doesn't matter okay and then you should be presented with Limerick and then a music genre and just use the one that it gives you it'll help push your ability to work on projects that may be you know uh Jazz isn't my favorite I don't mind Jess but having some restrictions here I guess will help me Define what the app looks like instead of just doing the same old things in my portfolio so use this as your name and this is the logo so we'll use a logo Mark okay and you don't have to spend too much time on it or you can so you can I just use an icon for my bird okay a free icon I'll show you in the next video an interesting widget to get free icons you get bonus points if you spend some time and making your logo but actually designing it yourself that would be super awesome if you can give yourself some time to design in this case a fish logo for Limerick Jazz so we've got our brief we've got our name okay and I want you to make a logo okay either a free stock icon or designer your own and then I want you to pick some colors okay there are kind of like three basic colors you're going to need primary secondary and a neutral color you might have an extra Third Kind of accent color here sorry fourth it's up to you I ended up with this my primary my secondary is going to be my neutral color I've got this one it's not my accent color this is my interface color you don't have to have this one I just like having it like the background here is the interface color we saw earlier it's so that I can put white stuff over the top and it stands off a bit more but that's optional for you so there are plenty of places to go find color swatches okay a few colors that work together I've put a link to Adobe color which I use a lot and if you want to get more in depth on color I've left two links here for the kind of older material system okay design system and the newer M3 version there might be an M4 out now go check those out if you do want to dive into a bit more it's a lot more detail and I'm going to do in this video but the minimum is pick three colors how did I get my three colors I just went to and I made a mood board shift one okay and I had loads of stuff and I was like I was looking around and I just started picking it with the eyedropper tool I went like this uh for the rectangle tool fold shift so it's a square then I hit the I key on my keyboard and wind oh I like that no I can't remember where I got them from and I doubt I got them I don't think I got them all from the same place and then I think I changed them but a mood board is a good way to maybe I got it from this I sometimes I just pull them straight out of an image because there's just a really cool image with some cool colors and you're like oh there you go that's how I got my ones all right so you need your logo you need your colors and deliverables is three screenshots of your brief okay you can either screenshot it or there's a downloader's PNG okay and then I want to see your color choices in the logo on your nav okay so if you arrange them nicely here you could take a screenshot of all of this okay and that would be perfect if your name gets long say you end up with like classical music and it's really long you can use an acronym okay so it was Limerick classical music I'm happy for that as well choose a font up to you we'll talk about fonts later on or at least we'll get into typography a lot more advanced later in the course we'll get into color more advanced as well but for the moment pick some colors make a little logo or just use a free stock icon like I did upload it and I'll see in the next video hey everyone uh in this video I'm going to show you how to make a placeholder logo and we're going to use or I've used our icon from this plugin here called icon Scout now it can't be a registered trademark because it's a free icon from the internet so anybody can use it but it'll do great for our kind of portfolio piece here also getting some of these icons can be a little tricky so I will show you just some you might have run into some troubles in the last video I want to show you to take something like the seemingly simple bird that actually has quite a bit of grouping and masking going on I'm going to show you how to just like smush it down into like a really simple Vector that might be a little easier to use plus we'll give the bird a mohawk we'll also make our top nav our component as well as putting our logo in there as well which will also be a component all right let's get going all right so the icon that I use or at least the plugin that I used it's called icon Scout we can hold shift I to open up this like resources panel here and it will just default to whatever the last one you had selected okay so that's shift I both Mac and PC and you can see their icon Scout Now icon Scout might not be the most popular when you're looking okay I use icon duck sometimes as well there are lots of different icon plugins the way that I pick is generally I just look to see used by how many people okay when something's been used by only a few people I feel like it's not as good as the one being used by load so it's not a great measure but anyway I'm going to use icon Scout and then and there we go okay now with icon Scout and most of them there is an option for free and premium so I'm going to go to free and I typed in bird and ice cold forever and eventually found my guy somewhere down somewhere I can't remember but I found it there he is hello the cool thing about these is like let's just pick another random one let's pick this guy he looks cool um so let's have a look at him so there's the um Creator or readers thank you very much and often it's part of a pack okay so if you're looking for other animals or other icons in similar sort of styles you can often go to the pack and have a look and say oh yep uh the little Crown in this particular app means they're paid so they're giving away some free stuff but if you want the whole uh fairy tale pack you get to go pro and decide if that's worth it for you way easier than drawing all of these and one thing I'm going to do is let's go into it and this one here has an SVG and a PNG okay I'm going to insert the SVG okay and let's pick another one let's go to bird again bird certain free it's not well I just use this guy he's free and so let's do this one again so I'm going to show you the difference between these two I looked at these earlier and they're kind of different when you haven't done a lot of drawing in figma they can be a little tricky this one here is easier look so I've got these two bird and bird okay frames inside of this one is just two there's a vector drawing okay and then there's a DOT for that side that's pretty easy to understand and start manipulating you decide actually I don't want the eye click on it I can turn the eyeball off there you go goodbye I if I want to double click on it and grab the head and say he needs duck Mohawk perfect and in this case you can see it's getting clipped out of the top so I'm going to click on my frame okay and I'm going to say don't clip the contents and what I might do with the frame is can you see here this option here says resize to fit resize my frame so it can fit all the bits inside this one's pretty easy this one's trickier and let's have a little look inside let's zoom in shift two okay and inside of this Frame called bird is a path group okay inside of this group is another group and inside of this group is a bunch of different vectors that are easy enough to understand there is a mask going on here okay they can get really complicated depending on who drew them okay so what we can do just to like I find it's easy just to go select on it the parent frame right click it and say let's flatten this command e anybody do that from hands up from Photoshop just to smush all the layers together it's still Vector which is cool it's just a tidier vector there's not so many group upon groups and problem groups it's up to you it'll depend on your figma experience my one's got a black border now so I'm going to do is double click it to go inside my Vector I'm going to click on the outside part I can shift-click all the corners or I can just hit delete and delete again I don't know I'm gonna click more good by parent frame and now I'm going to click done I've just got this more simple thing that I understand a bit more up to you command option P will open up the last plugin that you've used on a PC it's Control Alt P we'll open it up the last thing I want you to do is shift one let's look at what we're doing here shift two okay is hold command or control scroll wheel okay and let's have a look at this I'm going to turn it into a component okay so my component is over here whereas you there it is there okay it's my main component I'm going to get it to fit the frame and instead of just calling it logo let's call it logo mark and my one is called Limerick techno all right so I have your component outside of your first frame put it over here in a kind of a beginnings of a top nav make sure our Grid's on so shift G okay and just make sure that this Frame here for my background is you know snapping to my 16 point grid find something that works for you find a logo size that works for you and position wise or that looks good okay shift G turn them off this whole thing should be a component so command option K control option K it's called frame two let's call this one nav hyphen top okay and we should keep the original over here and put an instance back over this way there we go last thing I'm going to do before I go is my zoomings backwards so I use my scroll wheel like I mentioned earlier I'll command down or control on a PC you can use a scroll wheel to go in and out mine's operating backwards Everyone likes their scroll wheel to do something different I'm used to mine going the other way so I'm going to go figma preferences or we can go here and go to preferences and please hold invert Zoom Direction that's what I want because I prefer to do it this way it's just it means when I all I've done is toggled the way the zoom goes you understand right so now when I scroll my wheel it zooms in instead it was zooming out which didn't feel right anyway all right that's how I got my logo anything you really need to do is just make sure that your logo and your nav are two separate components all right next video hi everyone in this video we'll look at the difference between plugins kind of traditional figma plugins and these new Fancy newish Fancy Widgets why do we have two of them I'll show you the difference and I will show you a couple of my favorites oh look at this one automatic color styling nice all right the general broad differences is that plugins do more widgets are quite simple creatures plugins tend to do loads and loads of things potentially the other thing is that you can only have one plug-in open at the moment and widgets you can have Lots open at one time because they're lightweight plugins generally appear in like this little icon one icon Scout appears in its own little window and produces stuff for your canvas and then when you're finished with it you close it whereas widgets live on your canvas okay and you can have loads of them open so let's open up this one here all this one does well sometimes they end up in strange places so mine's ended up tied into this and and it is stuck in there this brings up a good point widgets in you and they are developed by lots of different people all with different abilities and some of them are updated all the time to keep up and some of them aren't so I'm going to show you a couple here but sometimes they just don't work this one does normally but very often I end up getting them smushed in here and I can't actually find them option click the little uh thing there he is he's hidden in there so if I hold option on a Mac alt on a PC and click the little Chevron it spills down everything there you are so I can say actually just come out of there and come over here for me sometimes with plugins and widgets you have to close down figma and open it back up before they work properly not all the time but I've run into that problem a lot so this one here just allows you to pick a date the date you've done something it works for fig Jam as well as figma okay and it is cool it's on an angle you can pick different angles you can pick different dates okay it might be your date to be completed the date was finished the day you're going to deliver it but the cool thing about it is it gets a sweet little icon there okay it's my little widget but I can have more than one shift I to open up the resources and there it is there we're gonna use this one in the next video color levels generator it's awesome okay and it lives on the canvas and while plugins generally produce something that's kind of dead on the canvas it's just produced and it's finished these are Dynamic I can change the date and it adjusts and this one here I can change the colors and it adjusts its Dynamic it's doing something lightweight but it's doing something I can save these styles to my style Library it's all very cool so that's why we have plugins and widgets I wish they just smush them together because I feel like the terms do the same thing but now we all know you can have multiple widgets on the canvas at once plugins just one open at a time but generally they can do more more processing power widget it's lightweight simple things and lastly before we go shortcut who remembers to open the last plugin that you used if you haven't already you will find a plugin that you know and love and you use all the time this will become a handy shortcut I promise that's right it is command option p on a Mac Control Alt p on uh PC there you go there's no such one for the plugin oh one last thing about plugins you can actually copy and paste them so you've got two of them I've got two of the same plugin now I need two of these do I need two of them not really probably need loads of these ones though all right there you go plugins versus widgets in figma hi everyone uh let's create some color variants from our primary secondary and neutral colors just so we've got some variants of these colors for different situations throughout our app design we're going to use this widget here called color levels generator it's handy it creates Styles I'll show you how to kind of Tidy Up Your Styles sometimes as this thing produces a little too many and we'll talk briefly about what these numbers all mean all right let's make some color variants okay shift I I'm going to be using a widget called color levels generator this is one that I like but you got to remember in the future it might not be supported anymore it might not be working anymore figma might have changed there might be a better one out there so this is just a for instance okay so I'm using Color levels generator and and I'm going to put it over here out of the way the way this one works is I'm going to grab my primary color okay I'm going to paste it in here I'm going to you see that it made all my color variants look at that 500 is their main color that's the one I've typed in and then there's less and then there's more rather than you like we did the essentials course we just kind of like lowered the brightness and raised it up okay and this one I'm going to add a color name this is going to be my primary color the cool thing about it is that it's used a really good naming convention okay this would be really typical in web design okay for both uh font colors and font weights they use these kind of styles 500 is the middle and you have like a thousand would be a really light font and 900 would be your black font what we can do is auto can also hit save Styles that's the cool thing about widgets is these things are actually doing stuff and you can see over here all my Styles maybe if you've got this selected they might not be there so click off in the background or hit escape on your keyboard look primary color and I've got all my colors there now this is probably way too much detail than I need what I tend to do is do this can you see I cut out all the middle ones so oh let's go back so I don't want 50 it's too light 100 is the lightest I want I don't want 200 I don't want 400 I don't want 600 I don't want 800. you can like there's no rule for it but I find that is a good enough spread for me I'm going to do the three other colors you can just duplicate these like you duplicate anything I hold down my option key on a Mac ALT key on a PC to drag it out and I'm going to add my other colors I'll get the editor to speed this up and while speeding it up I added my Styles unfortunately and I called them primary it's the kind of overrode my color styles so I forgot to change the name so I'm going to go undo undo undo and just make sure you change the name because it overrode my original primary numbers in my style so undo all right this is my secondary color okay save Styles Escape is my primary did I save them there you go now we're going to speed up and do the last one good speeding then okay like the other ones I'm going to get rid of you you you you you you and you so I've just got odd numbering in here same with this one my secondary you Speedy speed now so these are my color styles when you're using them let's say I've got my let's actually just grab a f tool for the frame tool drag it out and when you're over here okay my fill colors I'm going to hit my fill Styles and it can get a bit long depending on how many you've got in here sometimes it's nice to just type in 500. 500 is that middle style that's the kind of like full uh full color you see here there's my primary color remember 500 is the one that I picked and everything lower is a little bit brighter everything above it is a bit darker so with you I can just type in 500 here and it will just give me my you know just cut it down to a more manageable level last things I want to do is I want to add my interface color and I'm not going to do it through this I don't want all the different variations I just want to edit as a style and this one's going to be called interface you might not have this and what you'll notice is if I click off in the background I've got you but all these guys are in a group now I'm happy with that and just a reminder you can reorder these depending how you know which one you've put in okay so you can say all right secondary first well just in case you got it wrong primary secondary and I'm gonna have neutral at the bottom I can't make the interface go down the bottom there because it's a separate color groups at the bottom single colors up the top anything else uh one thing is is this particular one doesn't work very well if you don't have the hash in front of it kind of just if I type in say uh if if if kind of just doesn't know what to do so it defaults to what it was before so make sure the hash goes in and do you need these you don't you can delete them so just click on the frame go away go away go away all right so we've got some of our colors but we've also got color variants now as well gonna be handy to build out our app all right on to the next video you made it to the end man there's a long video I hope you enjoyed it if you're like oh man that was great you know what you should do you should give me a like And subscribe to the channel those sorts of things help me uh more importantly though remember this is only the first chunk okay so you've done like the First 30-ish videos okay here um there is another 130 after this a total of 160 videos for the figma advanced course so if you're like man that was really interesting there is so much more interesting stuff to cover um so if that's you I check out the link in the description and sign up there is an Essentials course as well for figma if you are depending on where you are in your mid Journey um but yeah like subscribe join me for the full course hi apply for making it to the end of this it's got to be one of the longer YouTube videos you've ever watched right which is good I don't know there you go uh awkward goodbye bye

Channel: Bring Your Own Laptop

Views: 17,239

Keywords: Figma Advanced Tutorial, figma tutorial, figma tutorial for beginners, ui design, user experience design, web design figma, ux design, figma masterclass, figma tutorial 2023, figma tutorial web design 2023, figma web design 2023, adobe figma, adobe figma 2023, figma advanced tutorial 2023, free figma course, free figma tutorial, free figma course 2023, free figma tutorial 2023, learn ux design figma, ux design 2023, ui design 2023, learn figma 2023, figma web design, byol

Id: 31wzhvz0vsw

Length: 132min 44sec (7964 seconds)

Published: Thu Jul 13 2023