Create a new Figma file - Figma Tutorial

- [Instructor] Let's create our first design file here in Figma. Now, what you see out here might be different than what I see. I see a bunch of buttons up here that say, New this, FigJam, slide deck, design file. We are working with or going to be working with design files, 'cause this is where we're going to design and prototype. Now if you look over on the left here, you're going to see drafts. This is where all of your drafts are saved. So in other words, if you haven't assigned or associated with a team and shared it and done a collaboration and all that kind of stuff, it's going to be for you to see. So if you click on the plus here you can see we have all their different types of files. We've got design file, FigJam, slide deck, and importing a file. Now if you don't see these buttons, you might also see a button up here that says something like new or something like that. There's a lot of ways to get started. Come over here and click on the plus and click on Design file. What it's going to do is it's going to open up a file for you and say, all right, let's get started. So let's do this, let's take a look at what we have here and then let's go, and I want to talk to you about how to start from templates and things like that. If you look over here on the left, you're going to see that we've got this panel out here. Your files are right here. Let me close this. Your files are right here. This shows you your pages and the layers of the content within your file, your design file. You're also going to see assets. Assets are what we started with. These are like library content and different things from community, et cetera. We'll get to some of this. Let's go back over to File. Now you're going to see up here that this is actually saved in drafts. And if you come right here, you're going to see it says Untitled. If you click the arrow to the right, you can do things like see version history, you know, duplicate it, rename it, all kinds of stuff. I'm going to rename it. So if you come here and double click on the name, you might be able to single click, let's call this Restaurant, wow, Restaurant app, and then press enter a return, and you've just renamed the design file itself. Now out here, this is where all your design content's going to show up. These are going to be like your pages, your art boards, whatever you want to call them. We'll talk about those later, those are called frames. Over here you're going to see a panel which shows you your design content. So in other words, if you click on something like a rectangle, it's going to show you the color and the fill and all that kind of stuff here. These are your options, your properties, and we're going to see Prototype, a way to prototype or connect things together, so that you can test it out and try it out. Alright, go back over to design. You're also going to see U, this is B right here. So if there are multiple people out here, you can actually do some different things. We're not going to talk about that right now, whoops. Up here you can preview what things look like. This is going to present it sort of. You've got an arrow to the right here where you can preview and present, a couple different things, we'll talk about those much later on. You can share. And one of the big things you're going to find is down here, this is your toolbar. So in the newer version of Figma, you're going to see the toolbar is just kind of sitting out here. You've got two main modes for your toolbar. You've got your designer view, which is all your tools you're going to use to create. And you've got developer tools, so like dev mode. If you were to click on this button right here, it's going to say, "Oh, you need to upgrade in order to do that." Now, if you switch to dev mode, that means that you've, you know, you already got that access in your account. I'm going to go back over to design mode. And if you don't see that dialogue, what you can do is just click back on the button there to close it. These are all the tools, you're going to make like select stuff, make frames, create shapes, draw stuff, add text, comment, and even do some different actions. You may actually see a special button down here, which shows you AI content. So generated content, I don't see that right now because it's still in beta. Alright, come to the upper left. Over here you're going to see that we've got the Figma button right here. Click on the arrow to the right and you're going to see, we can go back to the files, that's your file browser. You've got some actions we can work on. All your menus are right here, so you've got a lot of things you can do right here. If you want to open this in desktop or go to help, you can do it right here as well. Alright, let's go back over to the files. Now that you're back in your file browser, you're actually going to see that there is your file right there. And if you were to go to drafts right here, this is called recents. If you were to go to drafts, you would actually see your draft right here. This little icon's telling you it's a design file, which means you can do like a web design, an app design, whatever. If you star the file, you're going to see it's going to show up right down here and it's also going to show you what kind of file it is. So it's right there, the draft. So see a little preview. Alright, you've just set up your first design file. We've got one little preference I want to set in the next video and then we're going to start jumping in. We're going to do a few more things to set up the file so we can create our app design.