Skip to main content

Masking & Cropping Images In Figma

Lesson 56 from: Figma UI UX Design Essentials

Daniel Walter Scott

Masking & Cropping Images In Figma

Lesson 56 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

56. Masking & Cropping Images In Figma

<b>In this lesson we are going to look at masking and cropping images in Figma.</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

Masking & Cropping Images In Figma

Hi, everyone. As you can see by this messy outboard, we're going to look at masking slash cropping. OK. This way we're going to mask it in text inside of shapes. There's a couple of different ways that F I MA can do it for you. Let me show you the ways. All right. First up, I use the word mask and crop interchangeably here in fig A because they mean the same thing to fig A fig A calls it crop, you might call it masking. Same, same here. So the first thing to notice is the difference between cropping and using fill. OK? So these images that we brought in the last video, nothing to them, just dump them in here. And by default, if we go to the fill and go to images, this is the option fill, we're going to look at crop in a second but fill does a kind of cropping. So this might be enough for you. OK? If I have nothing selected, I've got my selection tool, I can just grab the outsides of these and you know, that might be enough of a crop for you. OK? The problem is I can't kind of move it u...

p and down. I kind of can, it's a bit responsive, but that might be enough. OK. So we're going to switch now to crop. What does this mean? Basically, it kind of shows you the extras. OK. So now I can work on the ah like crop edge interchangeably from the image edge. Now grabbing the image edge, you need to hold down shift otherwise you get a bit squidgy. Now it's not clear. It took me a while to like when I first got this, I was like, oh yeah, it makes sense. How do I double click, double click. I was trying to like adjust the image. You just need to like magically figment needs to add, they might do already some sort of handles out here to know that you can click and drag it. That's my advice anyway, but you can click, hold and drag it, hold shift, you can rotate it out here as well. Can you see? So that's cropping. Now, there's a couple of ways of doing cropping. Let me kind of break them down because yeah, you're gonna stumble across all of them. There's kind of three ways to mask. So a way that often happens is you will do it with a shape, I call this the two shape mask method. I made up these names. You're not gonna be able to find these anyway. So I'm gonna grab the polygon tool, draw out hold shift. Now, most programs you'd have the shape on top, you'd select the background image and I got both of them selected. OK? And you'd hit this option. See that there, he's new, he's not there, he's there. When you've got two things selected, that is the make mask button. Boom, not what I want. OK. So you have to be, the image has to be on front who moves the shortcut to bring things to the front. You can right click it. Yep. Or you can use that square bracket. It's the kind of second square bracket. Here you go. So they're both there. You're just hiding underneath. So image on top, select both of these in mask. Hey, so that's one way of doing it and it's really good. You can still get in there. I can double click. It's kinda different. It's two separate objects over here in the layers panel, there's a mask group, there's my image and there's my shape. That's why I call it the two shape mask. OK? You need two, you need an image and some sort of shape to mask it. OK? And you can still adjust them separately. There you go. Click over here, click at my image. So that's my two shape method. The other way of doing it is my kind of shape first mask, another name that I made up. So you draw the shape, OK? And kind of like we did before, OK, we click on this. We've done this a little bit. Click on the fur. We don't want it to be gray. No, look at that gray. We're gonna go to images, click on there, pick uh pick one of my images. OK. And we've mastered into there kind of, but we're using that fill one. You can switch it out now and go to crop and you're like this. How is it different from this? It's mainly to do with over here that see this big kind of construction here. That's my two shape method. This one here is my shape first. So we do the shape and we just added a fill to it and it's just Tidier over here. OK? And it's just works slightly differently. They do the same thing. Watch this if I double click on it, actually, I don't want to double click on it. I wanna go over here. OK. Open up my little image thing and you can see, I can see the edge, OK? Of both my shape. And remember the magical you just meant to know, grab the edges in here, hold shift. You get to the same place. Can you see? But 12 shapes probably the easier way to kind of get your head around. This way is every shape can have a fill. OK. And if you change that fill from fill, uh there's two fills excellent OK. Uh to crop, then you can adjust them separately, rotate them, that type of thing. The third way is the way we did at the beginning. And that is what I call the vanilla crop. I'm giving these names. It, it's probably not helpful but the vanilla crop is bring in image, let's do it together. We did at the beginning there, gonna bring in this one, drag it out, hold, shift. OK. And instead of drawing the shape first like we did here and then fill it, we've already got it. We've got a shape that's a rectangle. It's got to fill, it's set to fill, we set it to crop and then we can adjust the shape and the image. OK? So three ways of doing this similar sort of thing, you get me two shapes start with the shape, start with just the image and switch it to crop. These two require you changing the fill to crop. This one here is more like a traditional kind of mask where you've got something masking the thing underneath. But in this case, the thing's on top. Weird fig weird. Another thing is using uh those techniques you can do it with text. OK? So my text Roboto. How did I get to Roboto? Oh, well, Roboto. It is OK. Uh Font size upgrades, command shift and uh the full stop key. Did I do that earlier? I'm pretty sure I did. OK. Command shift on a MAC control shift on a PC. And you can do this either way. I'm gonna have two of them. You can either do it the two shape method. So I can say you now is the image on top or on bottom. Let's do it with another one. Let's do it. This guy OK. Image on top on bottom. That's right image on top using square bracket. Select both of them do the same thing. Mask boom. I can still get in there. Double click. It got my shape mate. The inside one, I can still edit the text. It's probably easier to do it over here. OK? Is the text still editable? Turns out it's not, I assumed it would be way up there. Then in that original video, I was like you can't change the text. You totally can. Uh So I've come back from the future and I'm gonna show you how thank you, Victoria Barra, who's reviewing the course and said you can totally change the text then. So there we go. We all learn something. Uh So like I did before this kind of two part method where there's an image and the text to make sure the image is on the top. So selecting it and I'm gonna use my uh square bracket, OK? To bring it to the front, select both of them and then click on the mask icon. OK? We've got this now to edit the text you need to be on this part of your layer. OK? It's got the letters that I need to adjust and just switch to the type tool. That's what I missed. OK? And now I can go in here and say now there has been OK? So that's how you adjust the text, updating the image part is to click on this bit. OK? That's the image that I brought in. Grab my selection tool and I can kind of move it around by just clicking anywhere inside the bounding box and I can adjust the size of it in here as well. So uh that's how adjust the text and the uh image. Now there's another way OK. The kind of that's the two part method. You've got an image and text separately and you join them by using that masking icon along the top. The other way, kind of more vanilla way is grab the type tool and it just click off on the side here. OK? And let's type in it now instead of having two separate things and combining them. What we can do is I'm back on my selection tool. I've got it selected, we can go into fill OK? And go and click on the color. And I'm gonna say from a solid we're gonna go to image OK? And I'm gonna click on choose image and then I'm gonna go pick an image, we can do it that way. Yeah, there it goes OK. The same thing as before is it's actually a little bit easier to adjust the type because you can just double click on it. Yeah, and adjust it. There we go. OK. So it's just a different way of doing it. The um the difference here is watch this and do you see how it adjusted, watch this? So I type in o can you see the image kind of expands to fill it? OK. Whereas this method over here OK. The image stays where it is doesn't matter how big the text gets. OK? Let's delete it. OK? So you can adjust the image in this one. OK? So let's click on it with the selection tool because I want to see the fill and instead of uh where it says image under Phil, it's kind of expanding. Phil means it's gonna expand and contract depending on the type size we're gonna go to crop. OK? And now you get a bit more control like we had in this option here. So there's no right or wrong way. OK? But I can adjust the um text, I can adjust the background image, the background image here like the other masks again at the moment. It's a bit weird. There's no bounding box on the outside, OK? You just kind of click hold shift. There you go. So that is uh masking with text, a tiny little update to my knowledge as well. So there you go on to the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES