Hello, my name is Justin, and in these lessons you will learn how to get set up in Figma's editor. We'll explore the editor interface, talk about best practices for setting up pages, and learn how to collaborate with others on a file. In this lesson, I'll walk you through the essential elements of the editor interface, including the navigation bar, the layers panel, properties panel, and the canvas. By the end of the lesson, you'll have a good understanding of what's available and where to find things. So we're looking at the editor now. I'm working in the Mac desktop application, but this will look the same if you're working in a browser or even Windows. And you're going to be spending most of your time here as you're designing with Figma. So let's look at our top bar. We have a home button that will take you to your file browser, the community button which will take you to your community resources. And then we have the tab for our file that we're working with right now. And every time you open up a file or start a new file, it will appear in the tabs up here. Over to the right, you have access to a list of recently closed files, which can be very handy. Now the navigation bar is right below that. And here we have our toolbar where we have our main menu and you'll see file, edit, view, and a lot of options that are almost exactly the same as the actual application bar up here. Next to that, we have our move tools. And in our move tools, we have the move tool and scale. And you'll see in these options, the keyboard shortcut to access these tools. The move tool is what you're going to be using a lot. It really is just to simply move things around. And scale is what you will use to proportionately scale anything that you select, including text. Next we have our region tools where you can create frames, sections, or slices. Now frames, you're going to use a lot. That is one of the basic elements that you use to build your design. You nest things in there. For example, down here, our home page is a frame. And I have nested frames inside of it, headers, sections of the page is how I'm organizing this. So they can act like an artboard would in other applications, or even sections of the page, or even at the component level. Examples are how you would just create an area of your canvas for reference, whether it be for flows or other things. For example, I could take the section tool and create a section for this flow. And maybe I would have several other flows. And if I wanted to, if I was collaborating with somebody that I wanted to, and I wanted to point to a specific flow, that we could easily find it just through these sections. And slice is a tool where you can just draw on top of anything really and export that as an asset. For example, if I just wanted to get a little slice of that lamp, for example, you see slice over here. And if I go over here to click export, I could grab just that. You'd see it in the preview. Let's move on. Our shape tools gives us a rectangle, line, arrow, ellipse, polygon, star. This is similar to a lot of other design applications. You have our keyboard shortcuts to make things a little bit faster, but it's very simple. These are the building blocks for much of your design. You can create sections of a page. You can create the components, buttons, cards, many things. So moving on, we have our shape tools. And these are really vector drawing tools. You have the pen tool and the pencil tool. The pen tool is something you may use to do some custom work with your shapes. You can draw something and it will be like a path. And you could edit that the pencil is something where you actually just draw it. That's more for if you have a tablet, like a Wacom tablet. I haven't seen that used a whole lot, but they're there if you need it. And we have the text tool, which would be for creating a block of text like this. And you could manipulate that text over here in the properties panel, which we will get to in a minute. We have our resources here where you can access components, plugins, and widgets. Widgets are interactive things that aren't really part of the design that you could drop in for collaboration, like a timer for an exercise or a voting poll. Your hand tool helps you move around the canvas. You might find that you bounce back and forth between the move tool and the hand tool a lot if you are in another tool like the hand tool and you click on the space bar, you get your hand tool very quickly. Your comments tool simply allows you to click and leave a comment. In the middle, we have the project name. In the middle, we have our file name and our project name. And you have some options here. You can rename your file or do some other things like duplicated or move it around. And off to the right, we have a newer feature for the paid plan for starting a conversation. This is an audio feature if you want to use this to talk live to people you're collaborating with. And next to that, you have your avatar. And if you are collaborating with other designers, you will see their avatars here as well. And you can spotlight each other to see where you are working. You have your share button where you can add collaborators to your design and give them permissions. And you have the present button, which will open up the prototype that you have made. And you have your present button, which will open up your prototype or presentation in a new tab. Next to that, you have your zoom options. Now off to the left is the layers panel. You have your layers. You have your assets, would be components that you're using. And you have pages to the right. You have your properties panel. And this is where you can really tweak your elements on the page size, position for text. You can choose your fonts here. These options change based on what you've selected. A lot of them are the same, such as applying fill, strokes, effects, and exporting certain things. And in the middle, of course, you have your canvas. You can change the color of the canvas here. You can zoom in and out of the canvas with a trackpad or mouse or go to these view and zoom options. You can hide the UI if you go command backslash. And you can copy and paste things pretty easily on the canvas. You can drop an image into it or paste an image into it. And you can see that if you zoom way out, there is a lot of working space here for the canvas. So there is a walkthrough of the Figma editor interface. In our next lesson, you'll learn about using pages in Figma, how to set them up and using them to organize your design file. Thanks for watching.
