2.2 Using the Figma UI
In this lesson, we’ll take a closer look at the Figma user interface and tool collection. We’ll learn what each panel, button, and workspace area does. It's an essential first step in learning how to use Figma, so let’s get started.
1.Introduction2 lessons, 06:09
2.Getting Started With Figma6 lessons, 44:41
3.How to Use Figma as a Designer3 lessons, 50:38
4.How to Use Figma as a Developer2 lessons, 08:11
2.2 Using the Figma UI
Welcome back to the course. In this lesson, we're gonna have a closer look at Figma's UI or user interface, and we're gonna learn exactly what each button and panel is doing. So let's begin. We start here in the home screen. This is where you usually land the first time you open up Figma. And the purpose of the screen is to give you access to all of your teams, all of your projects, and also some options like searching for files and seeing your recent files. Get access to plugins and also see your drafts. And drafts are basically files that don't belong to any project. Now, when you click on a team. For example, that's gonna show you all the projects that belong to that team. Like, for example, here in websites. And then, when you click on a project, you'll find a list of all the files that belong to that project, and it can view files as a grid or as a list. On the right side, you have a small sidebar with information regarding your project, team, and so on. Now, let's open up a file and this is where you'll spend the majority of your time in Figma. So, let's pay a little bit more attention to this part. Let's start with the top. Here, we have the main, let's call it navbar. And at the very center, we can find the file name and the project it belongs to. And if you click on this little arrow next to the file name, you have some options like showing the version history, exploring, duplicate, rename, delete, and so on. And you can also move files to different projects. On the right side, we can see the people that are currently viewing this file. This is how we can share a specific file, either by inviting someone to view it or generating a link and sending that link to other people. Here, you can open up the presentation for the prototype, and this is where we can find some zoom controls. You can zoom in, zoom out, and also turn on and off zoom features for the ccanvas. Now on the left side of the nav-bar, we have the Main Menu button which by default opens up in, in search. So it's really easy if you wanna search for a specific operation like for example, show grids. You can search for grid and it's gonna give you all the options that contain that keyword. But also it gives you access to a more traditional menu that you would find in a desktop app. Here you can select between the various tools, so this is for Move or Scale tool. This is where you can create frames, or create slices. This gives you access to the basic tools like rectangle, line, ellipse, polygon, and so on. This is the pen tool or pencil tool. We'll talk more about these in a future lesson. This is the text tool. This is the hand tool that you can click and drag to move your canvas around. And this is the comments' functionality that you can use to give feedback on a specific file. We'll also talk more about this in a future lesson. Now on the left side, we have a sidebar that by default, will show you the layers and if you start drawing shapes or adding any kind of elements on the canvas, the layers panel will be populated automatically. And you can select various elements either by clicking on the corresponding layer here or selecting it in the canvas and that entry will also be selected in the Layers panel. From here you have the option to lock a specific layer, so we can no longer select it. And you can also choose to hide or show that layer. Double-clicking a layer here, will enter edit mode and you can rename that layer. And if you right-click, you get all the fun options for working with the various elements. You'll see we'll be using some of these options as we go through this course. Now, the next page is for assets and this is where you will find all your components and all your libraries, more about these in my dedicated lesson. This is the page switcher basically, you can create new pages you can double-click to rename them. And you can also right-click to delete, rename, or duplicate a specific page. Now, on the right side, we can find the inspector panel. This is where you'll be altering most of the properties for selected objects. So right now, I don't have anything selected. So it's giving me options for my canvas, from here I can change the canvas background. I can change its opacity or I can hide it altogether. However, if I select, for example, this rectangle, this part will change. It's gonna give me controls for changing the properties of this element. It's gonna give me alignment controls, positioning controls x,y. I can change the width and height from here as well, rotation and also border radius. Here, I have some properties for the layer, like the blend mode, And also the capacity. And I can choose to toggle the visibility from here as well, and then I have options for the fill color. And I can add multiple fills. And when it comes to fill colors, I can choose between solid, linear, radial, and so on. We'll talk more about these in the next lesson. Then, we also have options for Stroke, Effects, and Export. So that's it for the UI. Now, just before we wrap this lesson, I wanna show you how to see the keyboard shortcuts. Because Figma has a lot of keyboard shortcuts that are super helpful, and it's gonna save you a lot of time when designing in here. So to see all the keyboard shortcuts, of course, you can browse through the various menus and you can see that most of these actions have an associated keyboard shortcut. But to see them all, you can go right here, Help and Resources, keyboard shortcuts or press Ctrl+Shift+?. And that's gonna give you a list of all the keyboard shortcuts inside Figma. You can see the action here and the associated keyboard shortcut. You will see that some of these are highlighted in blue, that means you have use them before. So for example, if I'm gonna use the frame tool or F, I'm gonna press F. You can see that now that keyboard shortcut is highlighted, so that means I have used it. So have a look at these, they're really gonna help you a lot, all right? So now, that you know how to get around the Figma UI, it's time to learn about the most basic tools. And we'll start with that in the next lesson, where you'll learn about working with frames, shapes, and text. So I'll see you there.