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

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.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design

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!

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

Masking & Cropping Images In Figma

Masking & Cropping Images In Figma

Lesson Info

56. Masking & Cropping Images 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