How to add a Background Image to a Frame or Shape in Figma

In Figma, select the frame or shape.

On the right side bar, click the color square under Fill to open up the color menu.

At the top of the menu, select the gradient icon (third from the left).

Press Choose Image to open up a window that allows you to upload your chosen image.

Use the sliders under the image upload tool to change the appearance of the image.

Click the rotate tool above the image upload tool to rotate the image 90 degrees clockwise.

To change the background image mode, click the caret next to Fill to open a dropdown. The options are:

• Fill (default)
• Fit
• Crop
• Tile

Click the tear icon to open the blend mode menu. The options are:

• Normal
• Darken
• Multiply
• Color Burn
• Lighten
• Screen
• Color Dodge
• Overlay
• Soft Light
• Hard Light
• Difference
• Exclusion
• Hue
• Saturation
• Color
• Luminosity

Select an option to change the blend mode.

On the right menu sidebar, click the + next to Fill to add another color. Follow the steps above to configure it to your desired image.

To change the order of the image, highlight a image input. This will present a handle icon which will allow you to reorder the image by clicking and dragging the image. The lower down a image is, the further down it is in the background (i.e. higher up images are overlays whilst the lowest one is the "true background").

If you wish to hide/show the image, toggle the eye icon to the right of the image.

Finally, to remove an image, press the minus icon to the far right of the image.

Consult the list below to learn more about the basics behind styling text, shapes, paths and frames in Figma.