Creating our design file & introducing frames in Figma

So let's make our first design file, so can be a little confusing for this first screen, yours is going to look different from mine, because they change this quite often. If you have nothing like mine you might go up to the top left hand here, and click on the little drop down. If you're somewhere else you might have to, click on the 'Home' button first, and then this little drop down, and what you're looking to do is to click on your 'Name', mine would be a bit blurry here, because it's got my email addresses as well, but click on your 'Name', not Community, click here, and you should get to something resembling my screen. 

What we want to do is a new design file, that only appeared the other day. So what I've normally done in the past, is I go to-- we're going to create drafts, and hit this little '+', it's kind of next to it. So either way we're making a new design file, and there we go. If you're brand new, I've kind of reset my Figma, so all these little pop-ups, you can show stuff, I'm here to show you, so I'm going to cancel that. You end up with this big nothing screen. 

We've got our design file, now we need to introduce frames, frames of these guys here, this little icon here, third one in, click on it, and you can draw out any size frame. Think of a frame as a page, so if we're drawing an app, we're going to draw something kind of like, oh, go back to this tool here, draw out something that looks okay. You can have multiple frames, all sorts of different sizes, desktop one, tablet one. 

So frames have many uses, but at this early stage of the course, think of them as a page or an artboard, if you're from Adobe land. What we need to do is delete them because those are random sizes, click anywhere on the inside of them, hit 'Delete', click them, delete them. So go to your 'Frame' tool, and actually let's be a little bit more specific with our sizes. Over here you'll have some pre-made sizes, you are going to be in the future, so you might be at iPhone 52, I'm going to use iPhone 8, it's a nice generic size for both Android and Apple, some of these big ones get a bit big and strange sized. 

Now the goal here is to pick a size that is generic, we're not going to design every different iPhone, in different size, we're going to design something close enough, to the general purpose phone, and our developer will build something that is a bit more responsive, and we'll adjust for the kind of small changes in different pixels. So pick a phone size that is quite generic, it's easiest just to Google, like, "most common phone size," and you will get something, or "most common desktop size," and you will get something in here, and pick it. 

If you're designing a watch, if you're doing kind of just regular old, old school paper, the wood stuff, there's all sorts of things in here, so yours will be different. Now I'm going to start with phone, and I'm going to start with iPhone 8, even though it's really old, I don't know why it's still in here, here it is, but it's a good generic size, 375 pixels, I like. You can adjust it afterwards, here's your frame, and you can see, actually the new size is not even listed there. I'm going to use 400 and just type over the top, I'm going to undo that because iPhone 8 is perfect for what I need, and again, if you're watching in the future, and there's no, like iPhone 8, you can type in this, 375, 667, to get the same dimensions, but hey, go with whatever is common for you right now. 

The other thing I tend to do is, I try and, at the meeting, figure out what kind of phone my client has, because they're going to be potentially testing it on their phone. So I want to make sure, like if they've got some sort of phone, I might use that just so that the mock-up works really great on their phone. So we're going to end up with naming loads of these frames, because iPhone 8, 1, 2, 3, 4, 5, 6, 7, 8 is not going to help us. So we're going to double click on the word up here, or you can double click over here in your 'Layers' panel. If you can't see the Layers you might be on Assets, double click it, either one, and let's call this one, remember our task flow we've got, we're going to have our Marketing page, we'll call it the Home page, Home page/Marketing page. 

We want another one, so you can go back to your 'Frame' tool, click on 'iPhone 8' again, you'll get another one, and just keep going the way through. We're not going to do huge amounts of shortcuts in this course, but we're going to have to learn a few. The first one's going to be space bar, so hold down space bar, it's pretty common in lots of design programs, right? Click, hold, and drag, and I'm going to name it in this one. So remember, our task flow is Marketing page, then Product Details. 

Another shortcut that we use quite a lot, is you can just copy and paste these frames, so just click the name, 'Command C' on a Mac, or 'Ctrl C' on a PC, then 'V', so 'Command 'V'. We've got another one, 'Ctrl V' on a PC, up to you, I say no shortcuts, and then I start with lots of shortcuts. Let's put in our four pages, so our task flow said, we did the Product Details, what else was there? So Check Out, and copy paste, spacebar, click and drag, we're going to do our Confirmation.

So in the same document, there's no reason why you can't then go, actually, now, I want my Desktop version, so I'm going to click on 'Frame', I'm going to say 'Tablet', and I'm going to say, we're going to be designing for the iPad Pro 12, because that's the one I own, and over here, Landscape, Portrait, hit space bar across, Landscape, Portrait, you can remove them. I'm going to click the name, you drag the name, spacebar around, drag the name around, you might say copy paste, paste, and do the same thing. 

We're going to have Home page, Product Details, same with like the Desktop versions, I'm just going fast here, because we're going to delete them, so you don't need to, maybe practice playing around with it. If you, see this one's iPad Pro at the moment, you can click on this frame and say, actually, now you are a normal kind of standard Desktop, that's a really good Desktop size, really common and generic. Now zooming in and out, 'Command' on a Mac, 'Ctrl' on a PC, and it's the plus and minus keys. 

There's a million different ways of doing lots of things here in Figma, I'm going to give you one way that I think is probably, the easiest at your level, or just the generic best way. If you do find another way, and you're horrified, I'm not using the hold option, hold the 'Command' key down, and use my scroll wheel, that's what I can do, to zoom in and out, you can do that, that's fine. What I want you to do is, for this course, is I'm going to select all of these, and I'm just using this tool, it defaults to it every time. So you don't really need to pick it that much, I'm just going to delete it, this is where I want you to be, at the end of this. 

If you end up in the middle of nowhere, I zoomed in into the middle of nowhere, I'm going to zoom out, use my spacebar, get it right in the middle, and then zoom in. So this is what I want you to get to, I want just four boring old frames, and I want you to name them all. 

The last thing I want to show you, kind of kicking off this, getting used to Figma, is naming your file. Just so you know, you're going to end up with lots of untitled documents, it just happens, I don't know, this program loves untitled documents. So we're going to be really specific, and actually name them. if we click off in the background here, can you see, it appears up there, if you've got something selected, it goes away, have nothing selected, click in no man's land, and you can click up here, and you can say, give it a name, and you've already got your brief, right? 

So mine is Scott, yours is going to be something different, but we're all going to call ours "Ecom v1" So you pick your, the name of your company, and put Ecom v1, our e-commerce is version 1. So the v1, just something, A, B, C, 1,2,3, it doesn't matter. As long as you're not like a Final person, Final 01, Final Revisited, Final final. If you're laughing, it's, you know what I'm talking about, I'm talking to you, give it some version numbers. There are some sweet features later on, for like versioning within the document but that's later on. 

Another thing is, if you have got a bunch of Untitled, you can, let's go back to, I want to explore this little house, or go back to, yeah, go back to the little house. Remember, make sure you're at your little Name here, and not Community, and what you'll notice is, look, there he is down there, Ecom v1. If you've got lots of Untitled already, I've cleaned mine out, you can right click them and go to 'Rename', and just do it there or open them up, and do what we just did, back to this tab, back to 'Home'. Keep practicing that, home base into our work, kind of like a browser. 

All right, that is our basic setup, these are frames, the whole thing is called a design file. Frames have other sneaky settings that we'll talk about later in the course, but for the moment consider them pages or artboards, but they call them frames, onwards to the next video.