Skip to main content

Tips, Tricks, Preferences, and Weirdness in Figma

Lesson 34 from: Figma UI UX Design Essentials

Daniel Walter Scott

Tips, Tricks, Preferences, and Weirdness in Figma

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

34. Tips, Tricks, Preferences, and Weirdness in Figma

<b>In this lesson we will cover some exciting tips, tricks and weirdness in Figma. Included are keyboard shortcuts to boost productivity.</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

Tips, Tricks, Preferences, and Weirdness in Figma

OK. It's time for a little interlude of exciting tips and tricks and preferences and weirdness. It's kind of the name of this video. We're gonna do it. We just, we're gonna go back to our low fire because we've got more stuff to do tips and tricks with. Ok. So I feel like you're at a point now where actually some workflow stuff will help you will actually not freak you out but actually help you out. So let's go through a few of them. Now, in terms of all the shortcuts, you can kind of find them by hovering above some of them. Lots of them are hidden though. So here is a little question mark down here. I hope it's still here. OK? Um If you click on this like help and resources, we've all been conditioned by early software that built in help and resources is like useless, it should be avoided, but figments really good. Let's click in here and I'm going to go to the shortcuts one. OK? They've got great stuff. Ok? But the shortcut one is really useful, nicely laid out. So the essentials, t...

here we go. Ok? I'm not going to run through them all. I just want to show you just have a little look through and go. Ok. There's that one, OK? There's that one view. OK. All these ones how to access the layers panel, jumping from assets design prototype. We've been doing that a bit going between here and here you might go. Ok. That's me. That's alter option nine. Ok. So just work through some really good ones. I'll cover the main ones throughout this course, but there are some nice ones in there. So let's go uh option nine on mine and option eight design, prototype, design, prototype. OK. It's a little helpful thing down there. Let me go back to the design. Another really useful shortcut is the shortcut that rules them all. OK? Hold down command on a MAC control on a PC and hit your forward slash. Look at two slashes, one of them goes forward and one of them goes backwards. So the forward slash brings up this and you're like, oh, what is that? Basically, it's gonna look through everything fig A can do if you can type it and spell it. OK. So remember before I was changing the color where I wanted to select all the same fill. So if I selected that, I kind of did that flippantly when we were doing commenting, right? Be like, where is that again? What you do is I don't go fine. I know where most of them are. OK? But this is I'm doing this for your benefit because this is a really awkward way of doing it. It's all about the shortcuts, at least for me anyway. So I can click on this and go command forward slash and I can say select, I've just typed in sele, I don't even just spell very well. I can see select all the same fill then go and change the color. I find that super useful. OK? Instead of having to figure out where is it? Is it under edit? Was it under edit? Select is an interview? OK. So just type it out. If I want this all to be uppercase, I'm just gonna go command forward slash and I'm gonna go upper. There you go. Upper case boom. I don't have to do anything. I don't have to go find it. It's in there. It's over here somewhere as well, but I use that command forward slash all of the time. All right. Another handy thing which we haven't really covered is right clicking. OK? So if you go into here, right clicking will actually show you stuff relative to what you've got selected. You can see this will change depending on what you've got selected. OK? And there's just helpful bits and pieces that relate to what you're doing. Bring forward instead of all the way front, you can see the shortcut, but you just click it here, you can move it to another page. So right clicking stuff will give you lots of interesting things related to the object you've clicked. Ok. Right. Clicking, you know, right. Clicking. Hey, it's on my list here. Preferences. Uh, there's only a couple that I would change up to you. Ok. So I'm gonna go to, I have no idea. Preferences are, so we're gonna use our command forward slash and type in preferences. Of course, it's not the one in there. Oh, jeez. Ok. Where are your preferences? I bet you they're under edit. No, they're under file. Please hold dear. They are down the bottom here. There's not many in this program. OK? So uh the one that I change is keep tool selected after use, I turn that on, it's off by default. OK? It just means that whenever I grab my rectangle tool before and I dragged it, it went back to the selection tool and I had to go back to my rectangle tool to pick a tool and it stay around up to you. The only other thing I go and mess with in here is under preferences and the nudge amount. OK? So small nudge just means a nudge. Is this when I grab that rectangle, let's say I'm working on this. I'm going to use my sweet shortcut shift two, shift two is we did shift one, everything that is on this entire frame or page. Sorry. And if I've got something selected, shift two zooms right into it. OK? Then back out a little bit because it's a bit too intimate anyway, while we were here nudging. So I've got these two in a group nudging just means it's going to go one pixel at a time and that's probably fine. OK. Unless I'm dealing with my eight, remember we did our app design and we're dealing with eight our eight point grid. You remember that grid? OK? And we did eight points. OK? When we were doing app design. So it could be really nice and go into here and say preferences nudge amount. Actually, the big nudge is not 10, it's eight. That's useful because it means that I can get it to here and be nudging in points of eight only useful when you're developing apps. All right. A little bit. Not super exciting that one. But let's have a look at, we've got these groups. I know that that is inside of there. OK? And I know I can double click them to get inside a nice shortcut. OK? Is to be holding down the command key on a mac control key A PC and just click on it once and you see it just dive straight in rather than having to go click, double click. OK? And when you've got lots of things kind of groups, let's say that you decide to group this using normal old group, then I'm gonna group it with that. You have groups with groups with groups. OK? You have to double click, double click. OK? You can just hold down the command key. So they have been trying to figure out all of this. I can grab this line by just holding down command and clicking. Once I've got it straight in there. It's control on a PC. Let's undo all of that. I totally wrecked it. OK. Those are my shortcuts that I use. There's a few more I'll introduce in the class, but really that command forward slash and then just typing things in. But it's even got the ones that I've used last, which is nice and this little help thing down here and ticking in the shortcuts is kind of, I'm teaching you how to fish. That's what I'm trying to do. That's what I'm trying to say. Instead of teaching each individual one, let's also cover a few weird things in fig a just so they might be catching you out already or maybe in the future, let's say if you do have a frame. Is this weird? No, this is just a regular, this is a group. You can go up here and say actually I want all the extra stuff for a frame. OK? If you have got groups everywhere and you want to move to using frame features, you can just switch it over here. Things that are weird is if your name appears above a frame, OK? It's called frame one. If I end up putting it up here where am I going to put it? I'm gonna put it just outside everything. Can I get it there? Let's get it above everything. Here you go. So if you end up with names everywhere, it's because this frame, even though it looks like it's in home page, it's not, it's hanging out by himself. You gotta make sure he goes in there. All right. So that is it for my tips, tricks, preferences and a little bit of weirdness there at the end. Um All right, I'll see you in the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES