Skip to main content
Will_Nandi
May 5, 2021
Question

Export losing quality even using PNG and 2X higher

  • May 5, 2021
  • 93 replies
  • 91675 views

I am trying to use Figma as my main software to produce my designs.
But my frames are being exported with a bad resolution from Figma.
Exporting as PNG and even using 2X is not getting the full resolution as I see on Figma.

Anyone with the same issue?

This topic has been closed for replies.

93 replies

August 2, 2023

yes I am viewing it at 400% and I know that’s the problem. If I don’t view it at 400%, I won’t be able to determine the clarity of the icon. That’s why I have zoomed it in up to 400%. give me the solution to this issue.

Gleb
Power Member
August 2, 2023

This is how raster images work. They consist of a fixed amount of pixels — exactly how many you specify on export. The quality can only be determined at 100% zoom, otherwise you are just enlarging pixels. There is not enough information in the image to show you the desired level of detail. If you need more detail and planning to view the image in this scale, you need to export at a higher resolution.

On the left you have a vector or a high-resolution raster image which doesn’t suffer from this scaling issue. There is enough information in it to show you a higher resolution at this zoom level (you can disable this behavior by enabling pixel preview as I suggested in the thread previously).

August 3, 2023

I didn’t understand what you are explaining. Isn’t there an easier way?

Gleb
Power Member
August 3, 2023

You want the image to be 25x25 pixels (for example, not sure what exact dimensions are in your case). But at the same time you scale it to 100x100 pixels and say that the quality is bad. It doesn’t work like that, it can’t get those extra 75 px² from anywhere.

Also read up on the difference between raster and vector images, that would help you.

So in the end what you want is like printing an animated video on a sheet of paper — impossible, due to the nature of the medium. You either need to change the expectations or adjust the settings to fit your requirements.

Feel free to ask questions if anything specific is unclear, I’ll try to explain.

Rey_Alejandro1
August 4, 2023

I also think the expectation Photoshop set vs what Figma does is a factor for the confusion besides what you and @Gleb have already pointed out clearly.

If you have Macbook, a minimum of 2x is necessary to view the export unpixelated because of Mac’s retina display. This applies to other PCs too.

If you are printing it, just export it to 4x as mentioned above.

Thanks for the explanation @Gleb appreciate it.

Ryza_Rabino
August 24, 2023

I export at 25x to get roughly the same quality as if it were exported into PDF. Of course, this blows up the size of a single image to 1.2mb but the addtl file size is a price worth paying vs stressing over it. I’ll be switching back to Adobe AI after this. Shame, I really enjoyed Figma’s speed over anything else.

Gleb
Power Member
August 24, 2023

Figma gives you the same results as long as you are exporting correctly and understanding what you are doing. PDF supports vector data so if you are comparing PNG and PDF, the PDF is like exporting as 99999x — it doesn’t “lose quality” no matter how much you zoom in, because it’s vector, not raster.

Rodrigo_da_Costa
December 11, 2023

It is true that exporting at 4x solves the problem and that the core of the whole issue is the difficulty in understanding how the relationship between DPI and the image raster works.
As we can see here, actually exporting at 4x allows you to maintain the same quality as the original when resizing back.

However, Figma’s development team, after almost 3 years since the creation of this post, still fails to understand that what designers need is: click on export = have the image with the same visual as the original. Just that. Without having to configure anything. Without having to resize anything. That’s simple user journey and usability. How many more years will it take to answer this and other similar posts before delivering simplicity?

January 10, 2024

Same issue here. Exported PNG at 1x through Figma vs the same 1x asset via Photoshop. Can really see the issue around text. Not ideal if we need to use workarounds to achieve the best fidelity possible.

Gleb
Power Member
January 10, 2024

looks like your image was compressed and the two screenshots look identical