hey everyone welcome back and in this module we're going to go a little bit deeper into the interface of figma specifically within the file there's a lot to talk about here and I'll be sure to cover where the general tools are the core tools that we'll use every day and also where some features are that you might find useful as you continue to design and learn figma with that let's go ahead and jump in all right so we're here in figma and the first thing that I want to call attention to is that I'm still using the desktop app for Mac now with that I have access to the tab bar up here at the top that will show all of my open files of figma the reason I want to call attention to this is because if you were to rightclick on any one of these open tabs there's actually a few shortcuts in here that could be useful the first one is to copy a link directly to that file now there are a few other ways in which we can copy a link but I found this one to be the most convenient because it doesn't require you to always open that file or go to that file for example if this file were open but maybe just not active you could always rightclick and copy a link right there within the top bar it's a really handy thing to know now below that we have the ability to move this file into a new window if you want multiple figma windows open at once again if you're using the desktop app this one would apply and below that we have the ability to open this file in split view which allows us to have two files side by side this is a fairly new feature and I got to say I think it's one of my favorites especially if you have a really big display I don't I wish I did but it's a nice thing to have now looking at the file there's a lot here there are several different interface elements and I think maybe it would make sense to start over here on the left hand side as we've seen this sidebar in the previous module at the top as we know we have the file name and if we want to change that we can simply just click into it make our adjustments and tap enter once we're finished below that we have the project for where this file is stored and new at the top right we have this little button which lets us minimize the UI the keyboard shortcut for that is shift forward slash and if we tap this WOW we've got way more access to the canvas all of the sudden what I actually like about this mode is sometimes it's just not that important to see all of your layers right you just want to focus on the design but you still need to design you need to see those properties which we'll talk about here in a moment what I love about this is if I click on a design here this sidebar the one on the left is still minimized but the one on the right is shown so I can make my edits click off of it and now I'm back to that almost full canvas view if we want to further hide the UI we can always tap on command period which will hide everything except for just the canvas we can always bring this back using command period and we can bring back our full UI by tapping shift forward slash or by clicking that icon once again in the left sidebar honestly I think these minimal views are nice when you're presenting or when you just need to do some very quick deep focused work work I've actually been using them pretty often now on the left hand side here we of course have all of our pages and we've already talked about those briefly and we'll talk about them more soon but below those we have access to our layer panel our layers show everything that's on the canvas or everything that we have selected on the canvas as an example if I click into this Apple pay screen here our frame is selected in the layer list and if I expand it we can see all of the layers that make up that design now one shortcut is sometimes you're working in figma and huh these are all just expanded out right and it feels a little bit overwhelming at least if for me a great shortcut is if you want to collapse all of these layers at once you can tap on the parent level here or just click off of all of the layers together and then if you tap option L you can collapse all of the layers I believe that one is alt L if you're on Windows it's a super useful shortcut that I find myself using all the time as I work all right now on the right hand side is our properties panel and in here we have access to both the design side and the prototyping side on the design side we have our position controls our layout controls our appearance controls and our effects things like fill and stroke and shadows are all here we also have one of my favorite features in figma which is selection colors and if I expand this figma will actually show all of the colors that are present within my selection as you can imagine this can be really useful for adjusting all of the colors that might appear at once to another color we'll talk more in the future about what these labels mean and the difference between ones that are circle and ones that are square like this essentially we're just looking at different variables in Styles here and that's important to know and will be important to know later on and finally at the bottom here we can add both a layout grid and we can choose to export this design whenever you export inigma you have the ability to export as a PNG a JPEG an SVG or a PDF and actually one of my favorite little keyboard shortcuts to know is sometimes it's just helpful to share a quick preview of a design into slack or CH or whichever tool you're using to collaborate outside of figma and instead of going in and exporting the screen every time and dragging it into slack or another tool one thing I have found helpful is if I click on the frame here and if I right click and choose copy paste as I can actually copy this design as a PNG and the shortcut for that is shift command C now that'll copy as a PNG and just to show you if I were to move over here and paste that right in we have an image of our design that we copied a moment ago I can now bring this to other tools and just to quickly share or get feedback on something I'm exploring I always forget about this shortcut but whenever I remember it or whenever I know it's there it's such a lifesaver and so I want to make sure to share that off the top now we also have access to the Prototype tab over here and we'll use this more in the future and a shortcut to switch back and forth is shift e as we tap shift e we can bounce back and forth between the design Tab and the Prototype tab it just makes going back and forth there there a bit easier at the Top If I'd like to view my design here in the Prototype view I can click the play button which will open it up in a new tab or if I'd like I can go back to the design and I can view this right in a little preview window which will open that up on the canvas I think this is especially useful because if I ever make changes to the design here such as oh I don't know let's move uh this item here down below so for now I'll go ahead and just detach this which we'll talk more about soon I can move this down and we can see that that is reflected right here within the UI of the Prototype it's really useful because you can see and interact with those interactions and we'll explore all of that in a future module also one thing to share just to maybe get excited about which is fairly new is if I click into the overflow menu here we also now have access to responsive prototypes so we'll be covering all of that and what it means soon now to continue on here we have the toolbar down here at the bottom of figma our default tool in figma is known as the move tool and it's essentially the cursor it's the thing that helps you click on the design or navigate around the canvas one thing to share with you is it can sometimes be tough to select things within figma as an example if I wanted to zoom in on this text here and maybe adjust it to be something else you might have to double click and double click and double click and double click and double click and double click to finally grab that piece of text and I don't know about you that's a lot of clicking throughout the day and so there are two shortcuts to help us with this as we navigate the tool the first one is if you're on a Mac hold the command key and hover over the item that you want to select with that command key held if you doubleclick you'll directly select the item that's on the canvas and underneath your mouse now the other option is if I hold the control key here on Mac and if I rightclick figma will show me all of the layers that are directly underneath my mouse and as I hover over all of these I can see oh yeah I'd like to select this bottom text layer here with that it's selected on the canvas and I can just tap return to actually edit that text all right now looking beyond the move tool we also have access to What's called the scale tool in figma now the scale tool can be really helpful if you would like to take an entire design or perhaps even just an icon and scale it up or down while keeping everything generally the same in terms of proportions and visuals here's what I mean if I don't select the scale tool just yet but instead I have my move tool selected and if I click on my frame here if I hold the shift key I can choose to keep my proportions locked in this will just help me keep that phone frame exactly as it is in terms of the height and the width and so if I hold the shift key and drag from the top right we can see that it is a bit responsive but actually instead of resizing the entire design I'm actually just making the container a little bit smaller or larger and that might not be what I want in this moment so if I undo that by tapping command n z and instead if I go down here and click the little carrot that's next to the move tool you'll see an option for the scale tool now the scale tool is great because on the right hand side I can scale this selection based on a particular width or a height that I'm looking for additionally I can also scale this design by a numerical value over here on the right such as 1.2 or two but in this case without changing any of these values over here I'm just going to hold the shift key and change my design again and now you'll see that the entire design is getting smaller or larger based on what we would like to do as you can imagine if you're working with icons this can be so useful as you can keep the icon stroke proportionally the same as you're moving it up or down or changing the size that you need as you're working with INF figma I use this one all the time for particular pieces of UI that I just need to make a little bit smaller or perhaps that I need to double in size which actually is a thing that comes up more often than you would think so again the scale tool is down here now next up in figma we have access to the frame tool and we'll talk much more about frames soon but with that frame tool selected on the right hand side figma shows me a number of pre-selected frame sizes for what seems or appears to be the most popular device sizes today at the top here we have different phone screens such as the latest iPhone 14 or 15 Pro and as I scroll down we can see tablet sizes desktop sizes or even those for a watch or social media post it's actually kind of a useful thing to know now that said you never have to create a frame based on these values over here you can always create a frame that's at the best size for you and your design but if you'd like a way to get started a little bit faster by tapping that frame tool and then by navigating to the right we can insert the right design at the right time on the canvas and here we're looking at the iPhone 15 Pro screen size we'll talk much more about frames and how they work soon but now that it frame is on the canvas I can take a piece of UI and bring it right into that design and just like that I've created my very first design here in figma now continuing further down below we have access to the shade tool and in here we have things like rectangles and ellipses and polygons and stars and even of course the ability to insert an image or a video one thing I did want to note is for that lines and arrows there's actually a pretty useful shortcut that I wish I would have known sooner and to show you I'll grab the arrow tool here now with the arrow tool selected I can draw an arrow at any rotation that feels right for the work that I'm doing sometimes though it's just nice to be able to place an arrow at either 0° or 90° or 45° but getting that exactly right can be a bit tricky as I'm seeing over here on the right so if you hold the shift key as you rotate the arrow you'll notice figma pins it directly whether it's Zer 45 or 90 and as I rotate this Arrow around I have all of those quadrants to work with it's a useful thing and it goes a long way when you need it additionally if you did want to change the size of your arrow but you wanted to make sure to not interrupt the rotation of it you can hold the shift key and now we can move that Arrow left or right to make it a little bit smaller or a little bit larger all right next up in figma is our text tool and we can insert text in a number of ways whether it's just clicking on the canvas or by clicking the text tool and drawing a specific text box size now any text here as you can imagine would bump up against the edge and go to the next line as an example if I paste some text inside here I can see that that text is constrained by the right edge of this text box and if I make it smaller it jumps to the next line and if I make it larger well it has a little bit more room we'll talk much more about text all throughout the modules but one thing I wanted to call out here is with this text box selected we can always change how this text appears or how it was essentially inserted on the canvas on the right hand side we have our layout controls here and because we inserted a manual text box well this third option here was selected which is a fixed size in both the height and the width of this box but if I'd like I can always choose Auto height which just means this text box will grow in height as more text is added and finally if I'd like I can always Select Auto width which will simply just grow this text area in with as more text is added all right now a few more shortcuts to share as we wrap up this module the first one is by tapping shift one figma's canvas will Zoom to fit meaning I can see everything that's on the canvas on this page but if I were to select a design here and I tap shift two this will Zoom me into the selection that way I can be taken right into the design that I'm focused on and as you may have noticed earlier I can Traverse up and down the layer panel over here using a combination of keyboard shortcuts if I'd like to drill down into the layer list I can just tap return or the enter key and if I'd like to work my way up well I can just tap shift enter which will take me up the layer list that can be so helpful in combination with that previous shortcut that we talked about which is option L to collapse all of the layers of your selection all right so much more to talk about but we're just getting into the basics of the interface and also talking about where everything is located based on some of the new UI aesthetic that came with figma this year if you have any questions about where things are or how to locate them or work with them please feel free to reach out and also don't forget about this little actions menu down here at the bottom this can be really useful because any command that we can find in figma is located within this actions menu I use it all the time for things like select all and this can be used for things like select all text layers or all widgets or everything with the same text Properties or fill it's actually a very fast way to select a number of different things on the canvas that may be related to one another oh and there's one more thing I have to share Before I Let You Go which is the ability to scrub and perform math in the input Fields themselves so here's an example I have this bottom sheet here and let's say I'd like it to be 16 pixels off the left side and 16 pixels off the right side well I could shrink this down right and if I hold the option key I can see okay relatively it's about 14 so I need a couple more and maybe I go over here to my width and subtract a couple but now I realign it to the center only to realize ah I have eight so I need to do it all again right that can be a bit complex or a bit tedious I should say now if I undo all of this and let's say I focus on just this sheet again well I know I'd like it to be 16 off the left and 16 off the right and so in the section that is in this case titled Auto layout we find our width controls here if I click inside here I can change my width to 354 minus 32 which is taking into consideration the 16 on the left and the 16 on the right and and now with that I can go ahead and Center this up hold the option key and we'll see those measurements there now it looks like I have a little bit of work to do here including maybe adding some constraints and auto layout all of which we'll talk about soon but it can be a really fast way to change the dimensions of your design based on what you need Additionally you can also scrub on these fields which is just such a satisfying thing to be able to do I can make this design a little bit larger or a little bit smaller based on the design that I'm trying to achieve just by scrubbing on those fields we can scrub on our width and our height Fields as well as our X and Y positioning Fields okay so that was a quick look at some of the interface elements here with INF figma there's a lot more that we'll cover both intentionally and naturally as we work through all of the features available in the tool as always if you have any questions feel free to reach out and I'm looking forward to seeing you in the next module