Web Design » Figma » How Do I Add a Background Image to a Figma Frame?

How Do I Add a Background Image to a Figma Frame?

Last updated on December 22, 2022 @ 2:24 am

When adding a background image to a Figma frame, there are a few things to keep in mind. First, the image will be placed on top of any existing objects in the frame.

Second, the image will be tiled if it’s smaller than the frame. And finally, the image can be cropped or stretched to fit the frame.

You can fill, fit, crop, tile & stretch the background image in Figma

To add a background image to a Figma frame:

1. Select the frame in the canvas.

2. In the Properties panel, click on the fill color selector.

3. Select Image from the fill color options.

Change fill color to image Figma

4. Click on Choose Image and select an image from your computer.

Choose image to upload as background Figma

5. The image will be added as a background to the selected frame.

Background image integrated Figma

PRO TIP: If you are planning on adding a background image to a Figma frame, be sure to take into account the size of the frame and the size of the image. If the image is too large, it may not fit properly in the frame and may be cut off.

You can also add a background image to an entire project by going to File > Project Settings > Images and selecting an image from your computer.

Go to file & place image for background Figma

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.