Export losing quality even using PNG and 2X higher

okay, I think it works just fine now!
Thank you so much Gleb, have a nice day! 😊

hello everyone… i am new to figma. and i use to design my artwork. I have no interest in using as web/app design. Simple question - whenever i design something in figma and try to export it as PNG i want to select HIGHEST possible resolution but do not know how to set it before exporting. So when i exported it gave me a bad res png image around 300/500 px which is useless for me. Please advise.
thanks in advance

You can set explicit size for export: https://help.figma.com/hc/en-us/articles/360040028114-Guide-to-exports-in-Figma#Add_export_settings

Still seeing this issue. I’d share a link here…but I can’t post links

(vs a screenshot with the image at 100%)

Anyone found a solution for it? I’ve the same issue too, everything exported to be readable but not crisp at all, doesn’t look good.

I’m having the same issue. Has this been addressed yet?

Same issue here. Exporting to png leads to bad pixelation. This thread appears to have been started almost a year ago. Has anyone at Figma addressed or solved this yet (apart from asking for examples)?

Bretton, the second image is significantly larger than the first one. That’s why it probably looks blurry (or whatever the issue is).

@Michael_Ragland @anon6613461 examples? So many people say this is an issue but nobody sends any examples. It seems like Figma just did a bad job at teaching people how to export things in a way they want.

I am having the same problem, exporting png and jpg. Files created in Figma export are very pixelated, 2X. I am uploading to my portfolio and these are not up to par. Any suggestions?

Will you stop denying seriously ? Already 20 people reporting the same issue, + me now.

So far the only examples people sent are solved by using correct export settings or viewing the file correctly (yes, even such a simple task as viewing the file is a problem for people). Please show examples. Without them, it’s impossible for me to say if you are doing something wrong or if Figma has a bug (in this case your example would need to be sent to the Figma team so they can fix it, otherwise — no example, no way to reproduce the issue, no fix).

Anecdotal experience (this was quite a while ago): I had this issue on slow internet connection, and shortly after I’ve opened a Figma, document and exported an image - got a pixelated/low quality image.

Then I’ve refreshed the doc, waited for a while (extra minute or 2) and exported the image with a desired quality. I think it could be to do with Figma not loading fully the full (max) res image embedded in the document, hence the low resolution issue?

June 2022 and having this issue. @Gleb here’s a link to my game’s design with my imported files in figma + the files exported & brought back in for comparison.

Any thoughts? SOS

same issue. I’m trying to export a favicon from a 16px artboard to three sizes:
• 16px
• 32px
• 96px

The results are very blurry, even though the object is a vector. Please advise? (the forum won’t let me post more than one image at a time, so here’s the 32px favicon)

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!