Upload an image as a fill
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Before you start
Who can use this feature
Available on any plan
Anyone with can edit access to a file can add images
You can use an image as a layer's fill. You will need to have the image downloaded to your computer to upload it.
Change a layer's fill to an image
- Select a layer on the canvas.
- Click on the swatch in the Fill section of the right sidebar to open the color picker.
- Select Image from the fill options. A placeholder image of gray and white checks will be applied to the layer's fill.
- Click Upload from computer to upload an existing image or click Make an image to create an image using Figma AI.
Replace image fills
You can change an image fill at any time. This will keep any fill mode settings you've applied, including any cropping or positioning.
There are a few ways to do this:
- Drag the image file over the image preview in the color picker
- Double-click on the image and choose a new image using the color picker
- Drag the image file over the swatch in the Fill section of the right sidebar
Before you start
Who can use this feature
Supported on any team or plan
Anyone with can edit access to a file can add images
You can apply an image to an existing shape via the color picker. You will need to have the image downloaded to your computer to upload it.
Upload an image
- Select or create the shape in the canvas.
- Click on the Fill swatch in the right sidebar. This will open the color picker.
- Click on the Fill mode and select Image from the options:
- A placeholder image of black and white checks will be applied to the shape. Click the Choose image button in the preview:
- Select the image from your computer and click Open to apply.
- The image will be added to your shape as a Fill.
Tip! We display static images as image and animated GIFs as GIF in the Fill section of the right sidebar.
Replace image fills
If you already have an image applied to a shape as a fill, you can replace the image you've used.
This will keep any fill mode settings you've applied, including any cropping or positioning.
There are a few ways to do this:
- Drag the image file over the image preview in the Fill modal:
- Drag the image file over the Fill in the right sidebar:
