Export losing quality even using PNG and 2X higher

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.

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.

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?

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.

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

i recently started using Figma.
and for my first project of ui/ux i have made a case study and ui presentations.
but when i tried exporting them as pngs (even in 4x), the mockups in my project are losing quality and are blur.
how do i fix that?

@gleb i recently started using Figma.
and for my first project of ui/ux i have made a case study and ui presentations.
but when i tried exporting them as pngs (even in 4x), the mockups in my project are losing quality and are blur.
how do i fix that?

Your mockups are probably low resolution raster images (maybe not low resolution but not high enough to export such an enormous 4x size file).

i made my mockups using a Figma plugin - artboard.
can you suggest a better way to make mockups for mobile screen?
maybe another plugin or another way. or recommend any youtube tutorial that i can go through for the same.
thanks

Hey Gleb, it seems like you’re feeling a bit frustrated. However, I would still like to ask for your help with a problem I’m having. In Photoshop, when I zoom in, I can see the image in the best quality even at a zoom level of 400%. However, in Figma, this doesn’t seem to be the case. I’m wondering why this is so. 😶

It all comes down to the number of pixels you have. Usually images you are working with in Photoshop are much higher resolution. Are you comparing the exact same image in both apps? Do you have an example you can share? Also do you have pixel preview disabled in Figma? It rasterizes everything on canvas at 1x or 2x resolution so you can’t zoom in without seeing the pixels.

This worked for me! thanks 🙂

I Exported this icons which are almost same in size except presentation spelling space. When I exported that all Icons, the presentation icon is getting so smaller but in Figma file it is biggest icon, how to figure out this ?

Output icons are like this…

What do you mean?

The icons in both images look the same.

​@Gleb I’m preparing logotypes for the site in 1x and then exporting them in 3x for retina displays and phones. All logotypes are initially bigger than the exported size so there is enough resolution for crisp images and before today everything worked fine, 3x images were crisp. But today I noticed they are a little blurry. 

Image above is logotype exported in 3x from figma, image below is the same logotype upscaled in figma 3x first and then exported in 1x. As you can see the size in pixels is the same for both images, but the first image looks blurry and the second image looks crisp.

I expected that the first option (exporting in 3x) should give me the same result as the second (upscaling 3x and exporting in 1x) and it did before. What am I doing wrong now?
 

I actually found the solution myself. I’ve inspected export settings for previous logotypes and found out that Image resampling there was set to Basic while for the new ones it was set to Detailed (I never used this parameter before). I’ve set it to Basic for the new files and the quality is great again.

Maybe this will help somebody else too.

EvgeniyaV wrote:

I actually found the solution myself. I’ve inspected export settings for previous logotypes and found out that Image resampling there was set to Basic while for the new ones it was set to Detailed (I never used this parameter before). I’ve set it to Basic for the new files and the quality is great again.

Maybe this will help somebody else too.

 

Yeah this is a new setting, for logotypes indeed it’s better to set basic than detailed. Detailed works better for photos.