How to Use Image Fill in Figma: Step-by-Step Guide

To use image fill in Figma, select a shape or frame, then go to the Fill section in the right sidebar and click the dropdown to choose Image. Upload your image and adjust settings like scale, position, and tiling to fit your design.

Syntax

In Figma, applying an image fill follows this pattern:

• Select an object: Choose any shape, frame, or component.
• Open Fill settings: In the right sidebar, find the Fill section.
• Change fill type: Click the color square dropdown and select Image.
• Upload image: Choose an image file from your computer.
• Adjust settings: Use options like Fit, Fill, Tile, and Crop to control how the image appears.

figma

Select object -> Fill section -> Change fill type to Image -> Upload image -> Adjust settings

Example

This example shows how to fill a rectangle with an image and adjust it to cover the shape fully.

figma

1. Draw a rectangle on the canvas.
2. Select the rectangle.
3. In the right sidebar, under <Fill>, click the color square.
4. Choose <Image> from the dropdown.
5. Upload an image file.
6. Set the fill mode to <Fill> to cover the rectangle completely.

Output

The rectangle is filled with the uploaded image, scaled to cover the entire shape without distortion.

Common Pitfalls

Some common mistakes when using image fills in Figma include:

• Uploading very large images that slow down your file.
• Not adjusting the fill mode, causing images to stretch or repeat unexpectedly.
• Forgetting to select the correct object before applying the image fill.
• Overlooking the Crop option, which can help focus on important parts of the image.

Always preview your design to ensure the image fill looks as intended.

figma

Wrong: Apply image fill without selecting object.
Right: Select object first, then apply image fill.

Quick Reference

Step	Action	Description
1	Select object	Choose the shape or frame to fill
2	Open Fill	Go to Fill section in right sidebar
3	Change fill type	Select Image from fill dropdown
4	Upload image	Choose image file from your device
5	Adjust settings	Use Fit, Fill, Tile, or Crop to position image

Key Takeaways

Always select the object before applying an image fill in Figma.

Use the Fill dropdown to switch from color to image fill.

Adjust fill modes like Fit, Fill, Tile, and Crop to control image appearance.

Avoid using very large images to keep your file responsive.

Preview your design to ensure the image fill looks correct.