Create a new file - Figma Tutorial

- [Narrator] Whether you're looking to create an app design or a web design or graphic design or a presentation or whatever you're going to use Figma for. You start by creating a file. So in this video, you'll create a brand new file in Figma. There are a few ways to do this. If you look over here at drafts, when you're in the file browser. You can see this plus right here. That means you can create a new file. Now it's a little different from coming up over here to the upper right. If you click on the plus new, don't do it yet, you're going to create a brand new blank file, you can then start adding your stuff to. Now, I'm going to click on and why don't you do the same. Click on the plus here called new file. Now this is a draft that you have access to currently. So something you're going to be working on. It could be outside of a team, and we haven't talked about teams yet. But, click on the plus and you'll see that there are tons of different templates and presets to start with. You can start with a blank canvas, which means essentially you go in and create the different screens or page sizes you want. You can start with a phone and there are several different sizes here. You can start with desktop, maybe if you're doing a presentation or you're doing a website design that kind of thing. You can also start with blank presets, which is pretty much the same thing. Blank canvas just means you don't have any screens or pages or anything like that, you create your own. And then down here for teams, there are actually some things you can use to start a file from. And down here we have for individuals. So if you're going to wire frame something and in other words, you want to start designing something just to get the idea of how it works. You can use what's called a Lo-Fi Wireframe Kit. These are all kind of like templates you start from. Okay, we're just going to create a blank preset. So click on blank presets here. And we're going to start with blank canvas. Now, when you get in here and you start working and you know what you want to do, you may just start with a size over here and it'll start with at least one frame. And we haven't talked about frames yet. That's why we're starting with a blank canvas. Now, it's going to create the file you're working on down here in drafts. If you want to, if you're part of a team which we're not there yet, you could say make it part of this team. Click on blank canvas right here, and then click create file. Now it's going to take a second but it's going to load it right here in your browser. And what's crazy is it's automatically done. It saves it. It saves it to the cloud. You don't have to do any saving of any kind, cause it's auto saving everything in the background for you. Next thing we want to do is we want to name this. So if you come up top where it says untitled. We can do this here or we can go back out to our file browser to see the file and change it there. And I'll show you that in a minute. Come down here to rename. And you can call it something like restaurant app or something like that. And I always misspell restaurant. There's even a spell check here, which is good. So restaurant app. And I'm going to press return or enter. And you can say, you just change it. It's now saved in drafts. And it's called restaurant app. Now just a quick lay of the land down here. You're going to see that we've got our layers and assets sidebar over here on the left. And we've got our properties sidebar over here on the right. So you've got design, which is a space for you to design in. Like add your pictures and your text and all that. You've got prototype, which means you're going to go in and start making it interactive. Like you tap a button, you can go to the next screen. And you've got to inspect, which means you can see the code and copy it. if you want to use that somewhere else. All right. Click back on design. As we go through we're going to learn more about things like zooming. You're going to see right up here. We can zoom in, get things closer. We can look at a pixel preview, do different things like that. And we'll, I guess, as we go through it we're going to learn some of that. So, up here is your toolbar. These are all the tools you're going to work with typically. Over here, if you click on the quick actions in the upper left corner, you're going to see that you've got your menus. So file new, edit copy, all that good stuff out here. You're going to see a ton of different stuff you can work with. What I typically do is if I'm working on a file now I want to go back to look at my file browser. Click back to files here and you're taken back to the file browser. You can then see it in the list here for drafts. And if you double click on it, you open it up again. And you're ready to start adding your content.