Skip to main content

Creating Our Design File & Introducing Frames In Figma

Lesson 8 from: Figma UI UX Design Essentials

Daniel Walter Scott

Creating Our Design File & Introducing Frames In Figma

Lesson 8 from: Figma UI UX Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

8. Creating Our Design File & Introducing Frames In Figma

<b>In this lesson we will create our first design file. We will also introduce you to frames in Figma and the many uses of them.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

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

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

Creating Our Design File & Introducing Frames In Figma

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

RELATED ARTICLES

RELATED ARTICLES