Skip to main content

When importing an image as JPG it stays its true size and color.

When importing as PNG it is 1/4th the size and desaturated.


Is this a known issue?

I’m I not supposed to use PNG in figma?


in figma:


original files



It has nothing to do with the file extension. For example, now, having downloaded these images, they have the extension .jpg (apparently after being compressed by the forum). If you look at the metadata, you will notice that one image has a DPI: 22x22, while the second has a DPI: 144x144. It is because of this that images are imported at different resolutions.


I changed the source file to 72dpi and got this result when importing to figma


the sizes aren’t being messed with but the colors are still off (i did the color invert to show the colors a bit better)


Sorry, I can’t achieve this with your images. You can try changing the Figma color space. You can also try saving these images uncompressed and re-importing them into Figma.


It dose this with all imgs. I save them out uncompressed from photoshop as png or jpg.


http://attilab.me/figma/Archive.zip


PNG from the archive already has other colors (without import into Figma).




I know that when they are different file types they are like 0.01% off (it’s not noticeable to most people)


but in figma it’s is so off, that it is very notable. its like 8% saturation difference and 3% hue difference


Note: if you are looking at this on a cheap monitor you might not see the difference as well


Note that JPG has 3405 colors, while PNG only has 640 colors. Check the PNG export settings in Photoshop.


I resave your JPG to PNG (not Photoshop) and now the number of colors is the same, i.e. 3405 in both JPG and PNG. Try to import it into Figma, you won’t see the difference.

drive.google.com

Your file seems to work> Back to the issue, I’m saving the png via default settings with no compression. In most cases photos are saved in Ps as industry standard. The end result is the file looks the same on every app or browser, but not in Figma. I’m glad that there is a workaround, although this seems like a Figma problem and not user error in any way.


But Figma has nothing to do with it. In the video above, I showed your zipped images in FastStone Image Viewer on Windows without even loading them into Figma.


Figma doesn’t paint the missing (almost 3000) colors. By loading images into Figma, you will see those images as they are.


Could you send me the original PSD so that I can try exporting to JPG and PNG?


From Ps. It looks like if png is exported to web as sRGB it shows up correct in Figma. If it’s saved as regular it png it’s incorrect colors in Figma only. If it’s exported as to web as regular, its incorrect on browsers and on Figma.


It is a Figma issues surrounding how they handle color spaces. It has been posted many times if you search, but no official response yet.


The issue seems reconstructible when trying to encode an export as HDR image and then import it to Figma.

Changed to sRGB and everything came back to normal from this side


Reply