Export losing quality even using PNG and 2X higher

This is a workaround to solve that. Exporting a pdf first and then, from the pdf, export a PNG

This “workaround” comes from not understanding how DPI and raster images in general work. Saving PNG PDF at 300dpi is equivalent to about 4x size export, so if you really need that huge PNG, just export from Figma at 4x and you’ll get the same result. No workarounds necessary.

Hello,guys,i may have found the solution.
First, in the zoom column,click ［pixel preview］1x or 2x.
Then-export ,click 1x or higher.
REMEMBER to select the # layer you need. （Left sidebar ）

Otherwise,it may occurs that there are many pictures export,you thought you have set 2x,but only one picture changes.
In that export page,you could clearly see each picture’s resolution,which is marked in grey.

Same issue. @Gleb I get the hires export option but if I export 4x the image is literally 4x as big - dimensions and file size. I think everyone in this thread is expecting that, if they see an image in Figma that they have created, and export it to PNG 1x, it should look the same. I did that here. Top image is Figma, bottom image is Figma 1x export. We shouldn’t need a workaround here.

Your screenshot is a compressed blurry jpeg but indeed I see some pixelation on the bottom picture. Without the original file and the explanation of how you exported this file it’s impossible to say why this happened. If you can share those I can explain what went wrong and how you can export the file correctly. Answers to these questions might help too:

1. It seems like the original file is just an image (screenshot) in a frame: what are the dimensions of that frame? If you resized it down, obviously it would export smaller even though it looks good in Figma. You can enable pixel preview to make sure you see the image in Figma just as it would look when exported.

2. Screenshots on Retina displays get resized down 2x while keeping the same resolution when you insert them into Figma. 100px screenshot becomes 50px object in Figma. Exporting such a screenshot at 1x would result in decreasing the original resolution by 2x. Did you account for that?

3. Do you actually need to export? Is there any reason you are trying to export this frame instead of simply downloading the original screenshot from the Inspect tab? Unless you did some changes to it, you can just grab the original file.

Yes, this works.

Hi, I would just like to add my doubts here. What I don’t understand is how I can import a photo, have it look crisp at 100% with the pixel perfect setting on, make it smaller to fit into a mask and then have it look pixellated. Why is it pixellated if it’s smaller than the original?
I think the main issue is not that people don’t know how DPI works. We are all used to seeing a picture in Photoshop and knowing immediately whether it is going to export pixellated or not because what we see is what we get. Why doesn’t Figma work that way? People have mental models and expectations and cannot be blamed if a new software doesn’t follow the norm and also doesn’t communicate it. From a user perspective, I shouldn’t have to export an image at 4x to have it look as good as it looks at 1x in the software I’m using.

It does if you enable Pixel Preview setting in View menu. It doesn’t work like this by default because it’s a vector software with the focus on UI design.

Regarding your downscaled image issue, feel free to share an example and I’ll explain why it’s pixelated.

Just to add a word here, comparing exports side by side between Figma and photoshop, Figma produces larger files that are inferior in quality. Of course photoshop also has 8-BIT PNG option which helps reducing the size as well as “Sharper” option. Left to right, photoshop, 10kb size, then Figma 30kb export of the same resolution.

It’s just bad usability to have no explanation in the onboarding or during your first export about this very important aspect of UI design. Even just having the pixel preview setting on by default would probably clear up half the doubts I see around this issue. I’ve reached out to support about this a while ago and didn’t get a response that properly explained this behaviour. Your replies here are by far the clearest I’ve seen regarding this and it’s still confusing to so many users.

As for my image issues, I didn’t necessarily want a response about that specific photo, I was asking in a more general sense why a picture would lose quality when downscaled. But if it helps to visualize it, I made this file with an example that you can take a look at.

My main concern with this issue is: we make page layouts with a bunch of photos and masks that our devs then export and put on the actual webpage. Those images look much blurrier in the live site than on Figma and I would very much like to figure out a way to export the images as crisp as they appear on Figma.