OK. So let's make our first uh design file. So it can be a little confusing for this first screen. Yours is gonna 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 there's a little drop down. And what you're looking to do is to click on your name might 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. Um So what I've normally done in the past is I go to, we're gonna create a drafts. OK? And it's this little plus, it's kind of next to it. OK? So either way we're making a new design file. Ok? And there we go. All right. If you're brand new, I've kind of reset my fig. So all these little pop ups y...

ou can show stuff. I'm here to show you. So I'm gonna cancel that you end up with this big nothing screen. So we've got our design file, ok? Now we need to introduce frames. Frames. Are these guys here, this little icon here. Third one in, click on it. OK? And you can draw out any size frame, think of a frame as a page. OK? So if we're drawing an app, we're gonna draw something kind of like, oh go back to this to here, draw out something that looks like an app. You can have multiple frames, OK? All sorts of different sizes, desktop, one tablet, one. So frames have many uses. OK? But at this early stage of the course, think of them as a page or an art board if you're from Adobe Land and what we need to do is delete them because those are random sizes, click anywhere in the inside of them, hit delete, click them, delete them. All right. So go to your frame tool and actually let's be a little bit more uh specific with our sizes. OK? Over here you'll have some premade sizes. OK? You are gonna be in the future. So you might be at iphone 52. OK? I'm gonna use iphone eight. It's a nice generic size for both uh 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. OK? We're not gonna design every different iphone in different size. We're gonna design something close enough to the general purpose phone and our developer will build something that is a bit more responsive and will, will adjust for the kind of small changes in the different pixels. So pick a phone size that is quite generic. It's easiest just to Google like most common phone size. Um you know, and you will get something or most common desktop size. Ok? 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. Ok. There's all sorts of things in here. So yours will be different. Now, I'm gonna start with a phone and I'm gonna start with iphone eight even though it's really old. I don't know why it's still in here. Hey, it is, but it's a good generic size 375 pixels. I like you can adjust afterwards. Here's your frame and you can say actually the new size is not even listed there. I'm gonna use 400 just type over the top. I'm gonna undo that because iphone eight is perfect for what I need. And again, if you're watching in the future and there's no like iphone eight, you can type in this uh 375667 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 gonna be potentially testing it on their phone. Ok. So I wanna make sure like if they've got some sort of phone, I might use that just so that it, the mockup works really great on their phone. So we're gonna end up with naming loads of these frames. Cos iphone 812345678 is not gonna help us. So we're gonna 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. OK? Double click it either one and let's call this one. Remember our task flow, OK? We've got, we're gonna have our marketing page, we'll call it the homepage, homepage slash um marketing page. We want another one so you can go back to your frame tool, click on iphone eight again, you'll get another one and just keep going the way through. We're not gonna do huge amounts of shortcuts in this course, but we're gonna have to learn a few. The first one's gonna be space bar. So hold down space bar. It's pretty common. Lots of design programs, right? And click, hold and drag. OK? And I'm gonna name it on 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 control C on a PC. Then V so command V we've got another one, control V on a PC. OK? Up to you, I say no shortcuts and I start with lots of shortcuts. Uh Let's put it in our four pages. So our task said we gonna do that product details. What else was there? So check out. OK. And uh copy paste, space bar, click and drag. We are going to do our confirmation. Cool. So in the same document, there's no reason why you can't then go. Actually now I want my desktop version. OK? So I'm gonna click on frame. I'm gonna say tablet and I'm gonna say we're gonna be designing for the ipad Pro tw cos that's the one I own. OK? And over here landscape portrait, that's space bar across landscape portrait. You can remove them. OK? I'm gonna click the name. You drag the name space bar around, drag the name around. OK? You might say copy paste, paste and do the same thing. We gonna have homepage product details, same with like uh the desktop versions. I'm going fast here because we're gonna delete them. So you don't need to maybe practice playing around with it. OK? Um If you see this one's ipad Pro at the moment, OK? You can click on this frame and say actually now you are um a normal kind of standard desktop. That's a really good desktop size. OK. Um Really common and generic now, zooming in and out command on a mac control on a PC. And is it the plus and minus keys? Ok. There's a million different ways of doing lots of things here. I think I'm gonna give you one way that I think is probably the easiest at your level or just the generic best way if you do find it another way. And you're horrified, I'm not using the whole 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. But what I want you to do is for this course is I'm gonna 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 gonna 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. OK? I'm gonna zoom out, use my space but I get it right in the middle and then zoom in. OK? So this is what I want you to get to. I want just four boring old frames. OK? And I want you to name them all. And the last thing I wanna show you kind of kicking off this getting used to fig A is naming your file just so, you know, you're gonna end up with lots of untitled documents. It just happens. I don't know, this program loves have documents. Um So we're gonna 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. Ok? 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 our Ecom the OK? So you pick your the name of your company and put Ecom V 10 Ecommerce version one. So the V one just something ABC 123. It doesn't matter as long as you're not like a final person. Final one, 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 wanna explore this little house or go back to Yeah, go back to the little house. Remember make sure you at your little name here and not community. OK? And what you'll notice is look there, he is down there. Uh econ one, if you've got lots of uh untitled already, OK. I've planned 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. Alright. That is our basic setup. These are frames, the whole thing's 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 up boards, but they call them frames onwards to the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf

Exercise_Files_-_Figma_Essentials.zip

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

2,000+ classes ranging from fundamentals to advanced techniques.

Creating Our Design File & Introducing Frames In Figma

Creating Our Design File & Introducing Frames In Figma

Lesson Info

8. Creating Our Design File & Introducing Frames In Figma

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma