Manipulating Images

There are many Properties associated with an Image. You can adjust these to manipulate how your Image looks.

In this article we'll cover:

  1. Image Properties
  2. Fill Type
  3. Blend Mode
  4. Fill Mode
  5. Rotation
  6. Image Preview
  7. Image Adjustments

Image Properties

You can access the Image Properties from the Fill section of the Properties Panel:

  1. A static Image will show up as an "Image" in the Fill section. An animated GIF will show up as a "GIF".
  2. You'll see a thumbnail of the image alongside it. You can click the thumbnail to open the Image menu.
  3. You can adjust the Opacity of the Image using the field provided. We represent this as a percentage value (%).
  4. You can toggle visibility of that Image by clicking the eye icon.
  5. You can remove the image from the object by clicking the [-] icon.
  6. You can add new Fill layers by clicking the [+] icon.
  7. You can create Color Styles from Images, solid colors and gradients. Click the Style icon (four dot square) to view, apply or create Styles.
  8. You can change the order that Fills appear by clicking and dragging the Fill layer. You'll want to click to the left of the Fill thumbnail:

You can also access more Image-specific settings. Click the Image thumbnail in the Properties Panel (#2 in the diagram above). 

This will open the Image menu, which allows you to adjust the following:

  1. Fill Type
  2. Blend Mode
  3. Fill Mode
  4. Rotation
  5. Image Preview
  6. Image Adjustments


Fill Type

There are five different Types of Fills you can apply to an object. Image is one of these Fill Types.

  • Solid
  • Linear
  • Radial
  • Diamond
  • Image or GIF 

You can change what Fill Type you use via the dropdown in the top-left corner: 

Note: If you select another Fill Type from the options, we will remove the Image you uploaded. You will need to upload the Image or apply it to the object again.

Fills are only one of the ways in which you can use Paints in Figma. Learn more in our Paints article.

Layering Fills

You can layer Fills within a single object. This gives you even greater control over how your images look.

You can apply Gradients over images. Or create duotones, black and white images and other affects with [blend modes](add link here).


Blend Modes

Blend Modes allow you to define how you want two layers to blend together. This involves taking the pixels from each layer and applying calculations to them. This allows you to adjust aspects of an image, like the background color. Or, create interesting overlays and textures.

You can adjust the Blend mode of an entire Layer, as well as any Fill - including Images.

  1. Click on the Image thumbnail in the Properties Panel.
  2. This will open the Image menu. Click the blend mode icon: 
  3. You'll see a list of available Blend Modes. There are 16 in total:

    • Normal
    • Darken
    • Multiply
    • Color Burn
    • Light
    • Screen
    • Color Dodge
    • Overlay
    • Soft Light
    • Hard Light
    • Difference
    • Exclusion
    • Hue
    • Saturation
    • Color
    • Luminosity
  4. Select the desired Blend mode to apply. You can apply one blend mode to each Fill.
  5. Click the X to return to the Canvas.

Learn more about applying Blend modes to Fills in our Using Blend Modes article (Coming soon!).


Fill Mode

There are four different modes that define how we apply the Fill to your object.This takes into account the dimensions of both the Image and the object you're adding it to.

We keep the selected Fill mode, even as you scale or manipulate the object.

  • Fill will position and scale the Image so that it takes up the entire object it's applied to. If the image and the object are different shapes, we may clip the Image. This ensures the shape is completely filled.
  • Fit ensures the entire image is visible within the object it fills. This ensures no part of the image hidden, even when you resize the object. Depending on the shape of the object, the Image may not completely fill the object.
  • Crop allows you to adjust the boundary lines of your image. This allows you to control which part of the image you can see. This is a non-destructive action that works like a mask.

    To crop an Image:  

    1. Select the layer you'd like to adjust. 
    2. Click the Image thumbnail in the Properties Panel. 
    3. Using the Fill mode field, select Crop
    4. Click and drag the blue handles to define how much of the image you want to display. The parts of the image that you won't be able to see will appear less opaque:
    5. Click anywhere on the canvas to apply the crop. Or, click X in the Image options menu.
  • Tile creates a repeated pattern of the original image, which fills the entire object. You can adjust the size of the tile using the percentage value. We base this on a percentage of the image's original dimensions.
    • You can enter a percentage in the field provided:  Or, click and drag the blue handles in the canvas to adjust the scale: 

Scaling Images

As we apply Images as Fills, it's not possible to adjust the scale or dimensions of the Image itself.
But like any other object, you can scale the object the Image fills. We will scale and position the Image based on the Fill mode you've selected.
In the example below, our Image is set to Fill. When we resize the object, Figma scales our Image to ensure it fills the entire object.


Rotation

You can use the Image options menu to rotate the Fill within an object. This won't affect the orientation of the object itself, just the Fill within it.

The rotate icon allows you to rotate the Fill clockwise at 90º increments.

  1. Select the object you want adjust.
  2. Click the image thumbnail in the Properties Panel to open the Image options menu:
  3. Click the rotate icon to rotate the Fill 90º clockwise.
  4. Repeat as many times as you need.
  5. Click X in the top-right corner of the Image options menu to close and return to the canvas.


Image Preview

Below these Image settings, you can see a preview of the Image.

From here, you can perform some actions:

  • Upload images from your computer. Hover over the preview so that the Choose Image button appears. If you already have an image added, this will replace the existing Image with the new one.
  • Drag Image Files over the Image Preview to replace the Image. This will preserve the Fill mode and settings of the previous image.
  • If you've added a GIF, you can select which Frame you can see in the Editor. You can use the slider to choose your Frame, or press the play and stop icons to select a Frame.

Learn more about the Choose Image button in our Importing Images article.


Image Adjustments

You can also apply adjustments to Images. These work like the filters or settings you'd see in photo editing software. 

Adjustments are non-destructive. We apply these on top the Image as opposed to editing the image itself. You can reverse or update these settings at any time. 

There are seven Image adjustments available:

  1. Exposure
  2. Contrast
  3. Saturation
  4. Temperature
  5. Tint 
  6. Highlights
  7. Shadows

Note: It's not possible to apply adjustments to animated GIFs.

Exposure

Traditionally, exposure indicates how much light reaches the sensor within a camera. You can decrease the exposure to create a darker image (underexposure). Or, increase it to create an image with more light (over exposure).

Contrast

Contrast refers to the difference between the light and dark pixels within an Image.
You can decrease the contrast to narrow the range of colors and create a muted Image. Or, increase the difference between the light and dark portions of your images.
This results in more vivid images with brighter highlights and darker shadows.

Saturation

Allows you to adjust the intensity of the colors within an image. You can decrease the saturation completely to get a black and white image. Or, increase the saturation to create an image with more intense, saturated colors.

Temperature

Temperature refers to the tone of the image. We measure Temperature along a horizontal axis, from blue to amber.

"Cooler" images have blue undertones, while "warmer" images have amber undertones. You can drag the slider to the left to create cooler toned images. Or, to the right to create warmer images.

Tint

Allows you apply a Tint to the colors within an image. We measure Tint along a vertical axis, from green to magenta.

You can drag the slider to the left make the image appear more green. You can drag the slider to the right to makes the image appear more magenta.

Tip! You can use Temperature and Tint together to adjust the white balance of the image.

Highlights

Allows you to isolate and adjust only the lighter areas of an image. You can use this to create more distinction between the highlights and shadows. As well as adjust the relative exposure.
You can decrease to reduce the level of light in the highlights. Or, increase it to create even brighter highlights.

Shadows

This allows you to isolate and adjust only the darker areas of an image. You can use this to create more distinction between the highlights and shadows. As well as adjust the relative exposure.
You can apply a negative adjustment to reduce the level of light and create deeper shadows. Or, a positive adjustment to increase the amount of light to create brighter shadows.

Applying Image Adjustments

You can apply Image Adjustments via the Image options menu:

  1. Select the Layer with the Image you want to adjust.
  2. Click the Image thumbnail in the Properties Panel.
  3. This will open up the Image menu where you can see a preview of the Image.
  4. You'll find the. Each setting has a scale which you can drag to adjust.


    Generally, you can drag the handle:

    • To the left to apply a negative adjustment.
    • To the right to apply a positive adjustment


    You can see the adjustments on the Image inn the canvas, as well as in the Image Preview.

  5. Click the X to apply your adjustments and return to the Canvas.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.