Beyond the Basics: Figma

2.2 Keyboard Shortcuts

Using keyboard shortcuts is a quick way of executing tasks, and Figma has some great ones I wanna show you. Now, I'm on a Mac, so I'll be using the keyboard shortcuts for a Mac OS. But if you're on a different OS, then you can simply go to the Menu > Help and Account > Shortcuts. And you'll see all the available shortcuts you can use, and it's a big list. You can see them right here, and with time, of course, and patience and practice, you can learn each and everyone of them. Now, let's begin. The first ones I wanna show you are the opacity control keyboards. So let's say you select a layer and you wanna change its opacity, right? You can do it here, change it to 50%, or you can use a keyboard shortcut. And the keyboard shortcut is numbers from 0 to 9, so 0, if you press 0, it sets the opacity to 100%. If you press 1, it sets the opacity to 10%, and you can see the change happening right here. 2 is 20%, 3 is 30%, 4, 5, 6, 7, 8, 9 is 90% and then 0 is 100%. Now, it can also do values in between 10, 20, 30 and so on, just by quickly typing. So if you want 34%, you do 34. Like this, 3, 4 in rapid succession and it will change the opacity to 34%. What about maybe 49? Well, you would do 49. What I also love about Figma is the notification. So when you use a keyboard shortcuts in most cases it's gonna give you a little notification here at the bottom. So now if I press 5, it tells me opacity's set to 50%, which is really, really cool. I love that. Now, let's see about other shortcuts. And here I wanna show you some alignment shortcuts. And for alignment, you can use the following. You can use Cmd+Ctrl+left and right arrow keys for aligning left and right. So if I select a layer and I press Cmd+Ctrl+left and right arrow keys, it's gonna align that element to the left or right depending on what I have selected. So Ctrl+Cmd+left it's gonna align it to the left of the frame because I only have one element selected. Ctrl+Cmd+right is gonna align it to the right. This also works for up and down. So Cmd+Ctrl+Up, down, left, right, I can do this all day long. Now, if I have more than one element selected, then the alignment will be made relative to those particular elements. So Cmd+Ctrl+right will align these two elements, or excuse me, left, it will align them to the left. Right will align it to the right, top, bottom. And again, I can do this all day. It works with any number of elements. And it's really easy to align these. Now, if you want to align all of these in respect to the frame, well, we can simply group them. And then you would use that group to align to whatever direction you want in a relation to the art board. Also, you can choose to align the horizontal centers of elements. So the shortcut is Cmd+Ctrl+Option+left and right. So for example, if I select this, Cmd+Ctrl+Alt+left and right. It aligns the element right in the center of my art board. So let's do that again, Cmd+Ctrl+right, or Cmd+Ctrl+left, it works both way. And with Cmd+Ctrl+Alt+up and down it aligns the vertical center. And again, this works on any number of elements. So if I select these three, and I do Cmd+Ctrl+Alt+top or bottom, it's gonna align them in the middle. And if I do it left or right it's gonna align them in the middle horizontally. So that's really, really cool. So let's say you have everything scattered, like this. Maybe you have one here, one here, one here. You select all of them, and just by doing this. So two keyboard shortcuts in rapid succession, I have everything aligned properly right in the center, which is fantastic. Two more keyboard shortcuts I wanna show you, and those are, one of them is for text. So I have a piece of text here, hello, and I wanna change the font size of that text. I can do Cmd+Shift+.. So Cmd+Shift+., and that will increase the font size. Or I can do Cmd+Shift+, to decrease the font size. And you can see the font size changing right here, so Cmd+Shift+., Cmd+Shift+,. It's a really, really fast way of working with font sizes. And finally, the last one i wanna show you is for collapsing layers. So let's say that you have a bunch of layers here, and you have multiple frames, and you have various groups, group these up, right? So you have all of these and everything is opened. And at some point you just want to get bird's eye view on how many frames you have. Well, you can use the command or the shortcut Option+L. So Option+L will collapse all of these. And not just the frames, but every single group. So you saw how they were expanded. Well, I just pressed Cmd+L, and everything is now collapsed, really useful shortcut. I remember when I was using Photoshop [COUGH] I really wanted a command like this, because when you were doing website design with Photoshop, man, you had a whole bunch of layers and groups and stuff. And sometimes it was just so overwhelming, you just needed a bird's eye view of the top structure, the top-level structure. And you just couldn't do it, then I moved to Sketch, and I had that functionality in the form of a plug-in I think. But now I have Figma, it's here, just press Option+L, it collapses all of the layers, and that is great. Now, before we wrap up, just one quick mention. You can customize these shortcuts, but only in Mac, and only if you're using the Mac app. So if you're doing it in browser, if you're using Figma in browser, you cannot customize these shortcuts. But if you're using Mac OS and you're using the Mac app, you can go into system preferences on your keyboard and you can assign new values there.. But personally if I'm using Figma I don't use the desktop version, I use the browser version. So I think if you're going to be using Figma full time, it's a great idea to invest a lot of time learning these shortcuts. Because in turn, in the long run, they're gonna save you a bunch of time. Now, these are some of the most useful keyboard shortcuts in Figma. There are a lot more, you saw how to access the full list of shortcuts, so go ahead and check that out. But for now we're gonna wrap things up here. In the next lesson, we're gonna talk about something called layer constraints. These are rules that basically dictate how elements behave when you resize their parent. So that's coming up in the next lesson.