Web Development: A Quick Guide to Figma’s Image Fill Settings

Tuesday, July 21, 2020

A Quick Guide to Figma’s Image Fill Settings

In this tutorial you’ll learn all about Figma’s image fill settings. There are 4 in total, and each one allows you to manipulate an object’s image fill differently. So with that said, let’s take a look!

Image Fill Settings in Figma

Here’s a complete video version of this quick tutorial. Follow along with us over on our Envato Tuts+ YouTube channel:

It Started with a Fill

Begin by creating an object on the artboard, then going to fill (in the property inspector to the right) and selecting Image Fill as the type.

You can then upload an image of your choice and you’ll be given the 4 fill type options, like so:

1. Fill

By default, Fill will be selected. This ensures that the whole object is filled with the image. If the object is wider or taller than the image, the image is stretched and cropped accordingly, but always centered and with as much of the image showing as possible:

2. Fit

If we were to change the fill type to Fit at this point, the whole image will be shown in the container object, even if that means some of the object isn’t filled.

3. Crop

The Crop fill type behaves similarly to the default Fill, but it gives you positioning tools to specify the crop yourself. As you can see below, you can scale and move the object like a window on the image:

Another difference in behavior is that when you resize an object after applying the crop fill type, the image will scale with the object along both axes (effectively squashing and stretching the image).

4. Tile

The last fill type is Tile, which repeats the image over and over again. This is best demonstrated with a repeatable tile image, like this:

You can see that it repeats infinitely as the object is resized. And in the options you can determine the scale of the repeatable section too.

That’s All for Figma’s Fill Settings

And those are the various ways you can determine an object’s fill in Figma! I hope you enjoyed this quick guide, and don’t forget to check out our other Figma resources listed below.