Working with transparent PNG images in Figma

Figma is built for vector design, but transparent PNGs are everywhere in real projects: product photos in an e-commerce mockup, illustrations on a landing page, device images in an app presentation. Figma handles PNG transparency well, as long as you know a few details about how it stores and exports images.

Importing PNGs

There are three ways to bring a PNG into Figma:

• Drag and drop the file onto the canvas.
• Paste an image you have copied (Ctrl/Cmd + V).
• Shift + Ctrl/Cmd + K (Place image) to choose one or more files and click to place them.

Figma keeps the alpha channel, so transparent areas show the canvas or whatever is behind the image.

Imported images become a rectangle with an image fill. That detail matters: the rectangle is the frame, and the PNG is the fill inside it.

Resizing without distortion

• Hold Shift while dragging a corner to keep proportions.
• In the right panel, the image fill has a mode: Fill, Fit, Crop or Tile. Fit shows the whole PNG inside the rectangle, which is usually what you want for cut-outs.
• Avoid scaling a small PNG up. Figma displays it smoothly on the canvas, but exports will look soft. Check the original size in the image fill settings before enlarging.

Cropping and masking

To crop a PNG, double-click the image, switch the fill mode to Crop, and drag the handles.

To place a PNG inside a shape, such as a product inside a circle:

1. Draw the shape.
2. Put the shape below the PNG in the layers list.
3. Select both and choose Use as mask (Ctrl/Cmd + Alt/Option + M).

The shape now clips the PNG. Because the PNG is transparent, only its visible pixels show inside the shape.

Layering cut-outs in a design

Transparent PNGs shine in layered layouts:

• Overlap the frame edge. Let a product or person break out of a card or hero section. Put the PNG above the card in the layers list and allow it to extend past the card's top edge. Turn off Clip content on the parent frame if it gets cut.
• Add depth with shadows. Use Effects → Drop shadow on the PNG; Figma's shadow follows the transparent outline. Our guide to adding shadows to transparent PNGs has settings that look natural.
• Use blend modes. For light effects, smoke or fire PNGs, set the layer blend mode to Screen so dark pixels drop away.

Device mockups

A common Figma task is placing a screenshot on a phone or laptop PNG:

1. Place the device PNG (front-facing works best).
2. Draw a rectangle exactly over the screen area, with matching corner radius.
3. Fill the rectangle with your screenshot (image fill set to Fill).
4. Put the screenshot rectangle below the device PNG, so the device's frame and notch sit on top.

Find device images in our technology collection.

Recolouring a PNG icon

Figma cannot change the pixels of a PNG, but you can recolour a single-colour icon with a mask:

1. Draw a rectangle the size of the icon and fill it with your colour.
2. Put the PNG below the rectangle.
3. Select both and Use as mask.

The PNG's transparency becomes the shape and the rectangle becomes the colour. More options are in our guide to changing the colour of a PNG.

Exporting with transparency

1. Select the frame or layer.
2. In the Export section, click +.
3. Choose PNG and a scale: 1x, 2x or 3x.

The exported PNG is transparent wherever the frame has no fill. If you export a frame and get a white background, select the frame and remove its fill, or set the fill's opacity to 0.

Use 2x for designs shown on high-density screens, such as most phones and laptops. SVG export keeps vector parts sharp, but embedded PNGs inside an SVG stay pixel images.

Keeping files fast

Large PNGs make Figma files slow to open and edit, especially in big component libraries:

• Resize very large images before importing. A product photo used at 400 pixels does not need to be 5000 pixels wide.
• Replace repeated copies of the same image with components, so the image is stored once.
• Compress PNGs before importing; our guide to optimizing PNG file size explains how.

Handing off to developers

When developers export images from your Figma file:

• Mark image layers as exportable with the right scales, so they get 1x and 2x versions.
• Name layers clearly (product-hero, icon-cart), because layer names become file names.
• Suggest WebP for photos on the website and PNG only where transparency or crisp edges matter. Our comparison of PNG, JPG, WebP and SVG explains when to use each.

Quick checklist

• Import with drag and drop or Place image.
• Use Fit to show the whole cut-out.
• Mask with a shape placed below the PNG.
• Remove frame fills before exporting transparent PNGs.
• Export at 2x for high-density screens.
• Keep source images no larger than needed.

Figma and transparent PNGs work well together. Once you know that each image is a fill inside a rectangle, cropping, masking and exporting all become straightforward.