Issue with .png transparent backgrounds

@Emily25 Hmm…I did some testing on my end, and importing .png files with transparent backgrounds work as expected on my end. I tried this both by copy + pasting, as well as dragging + dropping onto the canvas.

Is it just one particular image, or is this on all .png images you’re trying to import?

@ksn So far it’s been all .png images I’ve tried, including via copying and pasting. I’m using Google Chrome on a Macbook, version 123.0.6312.107. Is there any other info I can provide that would be useful?

Is this just when using Figma on the web? Have you had the opportunity to try importing while using the Figma desktop app or any other browser? No worries if you haven’t – just trying to eliminate possibilities. I can check with the support team to see if they have any suggestions.

EDIT: I also created a new topic with our convo, since the other one was outdated.

Same problem over here, on FigJam specifically! PNGs are imported with a white ‘square’ behind them. I was wondering if PNG transparency is supported at all on FigJam boards.

Can’t believe it’s worked! Thank you so much, this solution works for now - though it’s a bit of an odd fix. Haha. Seems like PNGs are rasters so they aren’t as vector-friendly as the PDF.

😅 glad that helped! it’s probably not the ideal way to go about that for FigJam (in most situations), but can be an alternative for the moment. I’ve flagged this for review on my end to see if there can be improvements looked into* in the future.

Also @Emily25 – I’m checking in with support on this. Also, my bad, I should’ve have asked for clarification on this earlier, but is it an issue in both Figma and FigJam for you?

OH @Kayla7 wanted to circle back again because I forgot to check something before I went the long route with the .png files.

Do you have this option available when you drop a .png into FigJam? You should be able to click that and have the background be transparent again.

I immediately jumped to the assumption that option wasn’t there for you 🤦🏼‍♀️ THAT would be ideal, I think.

The image border feature fixed the issue for me.

Any updates on this? Still getting a white background by default when pasting a PNG with transparent background into FigJam. Tried also saving the file - same thing.

Converting images to PDF is not an ideal solution for a number of reasons.

Edit: Oh yeah - removing the image border as the person said above works for now!

@ksn I tried both importing .png and as .pdf into FigJam but neither worked. I also tried copy/pasting and that didn’t work either. Any other options to try?

@Devyn_Shapiro ty for the update! If you (or anyone that sees this) continue to have this issue, even with the border applied, tag me in a reply.

I imported my transparent PNG image in a Lucid Chart, and then exported to PDF from there. When I re-imported the PDF into Figma I chose "Lucid Chart as source for the PDF, and in this way it worked.

About other solutions, like converting the PNG to PDF using MacOS built-in functionality, or using Miro, or other tools: none of them worked to me

Same problem. Persistent. All transparent PNGs have white bg in Figma. This was never a problem before. Suddenly it’s a thing. Chrome browser and safari.

@meme_trunk - you mentioned chrome and safari: can you also confirm it happens on the desktop app for you as well?

First: does my suggestion here help?

Second: Can you try converting the .png file you have > pdf? Then try dropping that export into FigJam. Curious to see if that will work for you.

Just to make sure: if they do work, is your message more like feedback on that this should be more intuitive?

I had the same issue today and I use the Desktop app on my Macbook Pro 14".
→ I was editing my FigJam files on my iPad Pro M4
… I kept getting the background on my transparent image.

Solution:

• Copy & Paste your PNG to a Design file → My PNG now retains the transparent BG.
• Now Copy the image from the Design file and past it inside the FigJam and you the PNG should retain the transparent BG.

I hope this helps!

Hello, I don’t think this was the same problem but when I tried to add stroke on my .png image, the stroke turned into square shape (not my .png shape)

What should I do?

Figma doesn’t support strokes on raster contours, just like the browser. You need to trace the contour with a pen tool manually to and apply stroke to it.

I’m having the same issue. I am adding my PNG image as a fill, but the background is white. I’ve double checked the image file to ensure that there is in fact no background, but it is still showing up in Figma. I’m also unsure where this image border button is.

Hello, I stumbled upon the same problem and the solution I found was the image’s Blending mode which I set it to Multiply. Fill → Image->Custom->Blend Mode (is on the second row, teardrop icon)

Thank you! This worked! However, now I have a different problem. The PNG image that is an off white color is now no longer showing up at full opacity when I use the multiply blend mode. The background does disappear, but the logomark is also now blended and doesn’t show up very well. What am I doing wrong?

I know this is old news however, I found having the same issue. I did resolve myself, by trying things. I made a symbol in the quick actions (Illustrator) and this seemed to rectify the white background. BUT…clicking the image border worked like a charm;-)

Thank you, it worked, great workaround.

Come check out pngspace.net—the best place to find high-quality PNG images with transparent backgrounds. Whether you're a designer, marketer, or content creator, we've got a vast collection of PNGs just for you! 🚀🎨

Explore now: pngspace.net