Skip to main content

Drawing Tips And Tricks In Figma

Lesson 48 from: Figma UI UX Design Essentials

Daniel Walter Scott

Drawing Tips And Tricks In Figma

Lesson 48 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

48. Drawing Tips And Tricks In Figma

<b>In this lesson we will show you some drawing tips and tricks in Figma. You will learn the basics of how to use the pen and pencil tool to draw.</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

Drawing Tips And Tricks In Figma

All right. Uh This is what we make in this video and you're like turning it off, skipping, don't skip it. Uh We do some simple stuff and figment is not a full time drawing tool. It does uh it does simple things. Great. OK? And you're gonna use it probably a lot for building U I and icons. So I'm gonna go through not every feature but all the kind of useful stuff when you are A U I designer and you do need to make switches and icons and bits and pieces. I'm gonna go through those tips and tricks right now. That's so bad. All right, let's not do that one. All right. Now I get started. All right to get started. I'm just going to kind of use the checkout page because it's empty. You can use anything you like shift to zoom in on the thing you have selected. OK? Um I'm going to, I'm just gonna like briefly give the pencil tool because I don't really like it. It's an error. OK? You can change basic settings over here. If you hold shift, you can draw kind of like straight sticks. OK? I don't u...

se it. You might love it. There's not much to it. Ah, the pencil tool is one, the pen tool is, it's a weird one. If you've never used it, this is not the video to learn it. I'm just going to give you the real basics. Um, but it is a really, is a U I designer or a UX designer. It's really handy to learn the pen tool. But go off, you know, I've got an illustrator course that spends a lot of time with the pen tool that might be right for you. But the super basics are if you click once you get a corner, so I'm going to give you you, you not doing anything, just really wants to snap and go straight, which is cool and this is my house or an arrow, whatever you want to do when you get back to the beginning here, watch this. If I get to the back of the beginning, I can close it up and then over here, I can give it a fill. OK? So that's the basics of straight lines with a pen tool. Space bar, drag K four. Let's say I need a Moon cos it's an easy example. Remember clicking once, gives you a corner and if you want a curve, you click, hold and drag, click once for a corner, click, hold and drag for a curve, click once for a corner. That's a kind of a, I don't know the basic rules of this. Now, the one thing. So I've got those two and because we've been drawing an object editing mode, they're not two separate shapes. Can you see I'm still inside of here, I'm trapped in object editing mode. This is a common, I get caught in this all the time because I'm used to other programs. So this vector is together. So what I'm gonna do is select you cut, who remembers how to get out of this? There's the official way done. The other way is just double click the background when the selection tool. So I'm out now, I can hit paste. OK? So I've got them separate. I've got my house and my moon when you are drawing and you're trying to do like a bit of symmetry and symmetrical. If you zoom right in, OK. If I zoom right in, you can start to see the pixels. It's a little hard to see on screen. OK? Probably in the recording. But can you see and it will try and snap to them so you can do some stuff like this. OK? Where it is actually, you know, following uh really snapping to these uh pixels here drawing a house because who else? Well loves sided house. I'm using my arrow key just to move it across one. So I selected it once I'm in object editing mode, selected it, move it across once who else um was driving them nuts. This one here remember Mobile. Um our original one just kind of ignored it there, but I'm like you are the wrong width and the way it was designed I couldn't change it. So, hey, we can do it now with our sweet pencil to get it to stop looking like an arrow. I need to have drawn it with a, a door. So my pen tool, I'm going to go inside of this thing by actually back to the selection tool, double click it to go inside pen tool. I need probably back to my selection tool. I need these two guys to come up here. Here we go. Beautiful then better, slightly better. OK. So zooming into pixels can I don't know, give you a bit of consistency. Another thing to do with this is the stroke. So um you get out of the way you come over here. So the stroke we looked at earlier with it, selected the stroke, you can go to this kind of advanced stroke option. Click on that. OK? And we had a look at the end points, OK? We don't have any end points because it's complete shape. Remember they're rounded and stubby ends. The one I'm looking for now is actually this one first. So center can you see over here? The blue line is kind of, you know the line I drew and then my stroke which is one pixel is straddling it. OK? But you can go from inside and outside. This is going to make a bigger difference to this. Can you see the difference in the house? Now? It's the same kind of original stroke. What you might find is you'll download a bunch of icons and they'll be the same height and width be like, why does this one seem smaller? And this one seem bigger? It's just the way that this is being processed. Does the stroke run around the inside or the outside? And the other thing is the edges here, you might have a bunch of uh icons that don't have these really sharp edges. So back into advance there, this is this, this is a metering here. You can or mitering. Sorry, metering. Ok. That's a little sharp one by default, you can slice them off. Ok. Little stubby ends or you can round them, which is quite nice. Hm. Fancy. It's not fancy as that one's a bit longer than that one. I'm giving up. You get the idea. Another couple of things is there's dash lines, ok? They're in here. Stroke style solid. Let's go. Dashed. There you go. That's where that is and undo that um other things that are useful are I haven't covered yet. There is a star. Oh, click it once I want to click, hold and drag and let go. That doesn't seem to work. I got to click once and then click. Ok. If you run into the same problem, you too OK. I can drag out a star if I want it to be a perfectly um uh height and width is constrained. Hold shift. I get a star. I go back to my selection tool. Now I can play with things like over here is the star number. So I can do more of like a, like a little star bursty thing. And these two here you can play around with, OK. They're pretty self explanatory. OK. This one here and Randy corners same with a triangle. You can make a triangle. What polygon here, man, I keep doing it. Polygon, draw it out and then go like this. Look over here to all of your shapes. Can you see this one here count? OK. So it said polygon room not triangle. So you can have four is not a poly. Well, is it, I don't know, makes it square, but let's go five. OK? And we'll go to six. OK. You get the idea octagon, let's do it round the corners and then here, oh The count is there as well. It's a bit of a weird one. There you go. You do get a rectangle square. Other thing that I need to show you is kind of the rotation. Now with the selected tool. OK? You can actually just hover here and rotate things. OK? If you rotate them. So I'm just hovering outside here, hold shift and rotate it. It will block it into kind of like larger units, you can type it in over here. Ok. I think it was, what was it going up in something like 15, yeah, 15 degree increments. Ok. So you could decide that actually I just want to rotate this one, you know, 100 and 80 you just type it in. Also know that there is a bunch of options under here under um the little f under object. And can you see rotate, we've already kind of looked at these flip horizontal, flip vertical. There's a bunch of stuff in here and last but not least is something called outline mode. OK? So it even uses if you know if you've heard of outline view, OK? Uh From Adobe Illustrator. It's the same in here. It's even the same shortcut. Go try it if you know the shortcut, OK? It's command Y on a Mac control, Y on a PC and it was in there. If you want the long way, if it's new to you, it's just this option in here. Slick back here. You object. Where is it actually? No, it's under view and there it is their outlines. What is it? It's viewing your document. If I zoom right out what's zoom to everything, it's right. Shift one, everything on my whole page. You see it breaks it down to this kind of really simplistic view. This is really handy when, especially when stuff is clipped off. Look at this guy, I was using this off camera when I was um what is it command Y or control Y when I was just trying to get these to line up? And I was like, is that going to the edge there? I just went command Y or control Y on a PC. OK. And just so I'm like, so I can start working on these and actually see them, you can work exactly how you were doing it before. Like it's just kind of an outline view. Hence the name, outline view really good when you are drawing, get things to line up, see through things like an X ray. And let's turn it back on command Y on a Mac control, Y on a PC. The one thing that I always get stuck in is you're in here and you don't realize it and you're trying to do something over here and you're stuck in site editing mode. I mentioned a couple of times because I just feel like why can't I move this because you've zoomed in over here and you don't know what you're doing and you're like, yeah, du stuck in object editing mode done. We'll just double check the background with the selection tool. Alright. That is my like tips and tricks for drawing in fig A without getting too deep into it. We do do drawing in here. It's not, it's like best feature, but it does all the good stuff, all the basic stuff perfectly. Thank you fig Ma Thank you for watching and I'll see you in another video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

Ratings and Reviews

Mahyar Hassid
 

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

Student Work

RELATED ARTICLES

RELATED ARTICLES