Export losing quality even using PNG and 2X higher

Here’s the 96px favicon. I’ll send a screenshot of the artboard next. The vector graphic is perfectly crisp.

Here’s what it looks like in Figma. Also showing how I’m exporting:

The preview in Figma doesn’t show the export resolution. The one on the preview is 240×240px (or if you are on a Retina display — twice that amount) while the exported is just 16/32/96. The icons you sent look blurry indeed, but that’s because they are just so small. And if you view them on a Retina/other hi-res screen they will look even blurrier.

With pixel preview in Figma you can see the edges look fine, couldn’t really be less blurry.

Retina and zoom settings can be confusing, that’s why there is a pixel preview feature.

If you are viewing a 16×16 icon on a Retina screen, you are actually seeing a 32px version that is made smaller without pixelation. Here you can clearly see the difference, I took your 32px icon, made it 16px and enabled pixel preview. Without pixel preview at 100% zoom it obviously looks much sharper because Retina can show you all those 32 pixels in this 16px space.

But for the favicon most browsers on Retina would load a 32px version and fit it in 16px space so you are fine. They will see exactly what you see in Figma at 16px 100% zoom. And for the people who see a “blurrier” version, their monitor is the limiting factor here, they physically can’t see more pixels.

Nothing in your file is aligned to pixels, it all looks very blurry in the original file. But what makes it more blurry on export is that those misaligned half-transparent pixels are not aligned to the actual pixels on the exported image. Here you can see your original image and the pixel grid in Figma:

And here is the same thing with pixel preview enabled:

If you want higher resolution, export at 2x or more. But if you are strictly limited by the amount of pixels your image needs to have, this is the best you can get. There are AI and algorithmic upscalers out there that you can use to slightly mitigate this effect but unless you have the original vector files/font or draw this from scratch, it’s not gonna be pixel perfect (so it would look blurry).

I haven’t found a solution when exported directly from Figma to PNG or JPG, it would leave my images pixelated.

My solution for this is to export to PDF. Then opening the PDF in preview and exporting to PNG/JPG at 300 pixels/inch for high-res. Hope this helps.

That’s the same as exporting at roughly 4.2x size in Figma.

The quality of exported PNG is blurry, pixelated, and low-vibrancy. My clients can only see good quality on Prototype in PNG it’s very smudgy.

I really think the issue people are having here is just how high DPI screens render bitmap images by default at 1x size because they are emulating regular resolutions. It looks sharper in Figma because Figma is using 200 pixels to render a 100 pixel size object. But when you export that 100px size object even at 2x and you open it in your default image preview application it is rendering it “full size” so instead of doubling pixels to take advantage of the high DPI screen, it is rendering each pixel as if it is twice the size.

@Gleb Does this make any sense? I constantly see people complaining about blurry Figma exports, but then when I check the files they are exporting and zoom out to 50% size in Preview or whatever app to view the image, it looks properly sharp. It just looks blurry at 100% because the OS doesn’t know to preview it as a high DPI image.

This isn’t a Figma bug, it is just a technically complicated aspect of high resolution screens and images.

That’s a good explanation! Yes, this is one of the most common reasons why this happens. Also you can read this and some other similar threads to find all kinds of weird ways people think they would be getting a higher resolution image. People just need to better understand pixels and DPI and be aware of and be explicit about the following aspects that affect rasterization and display of images:

• Difference between raster and vector images
• Alignment of objects to pixel grid, viewing objects with the Pixel Preview enabled
• Zoom level in Figma
• Original raster images size if used in the design
• The size of the frame in Figma
• Export settings
• Display resolution/DPI
• The size of the image on the screen when viewing (making sure it’s not zoomed in)

Gonna see if I can find a decent explanation article with visual examples for this, otherwise might have to write one up myself!