Problem with pixelation while exporting layer

I’m still experiencing this same issue and I’ve followed all the recommended steps/frame-setup listed above, and found elsewhere, but still doesn’t solve the issue when exporting and this is even before uploading to experience the compression issue known to happen on some platforms.

I’m finding the blurriness to be around Text/Messaging and creating assets for Ads, I can’t export at 2x usually because the platform restricts size of upload, both in pixels and KBs.

Does anyone know of any workarounds or solutions to help with this?

5 Likes

Hello everyone!
I’ve had the same headaches as all of you and did some research. To sum it up, all we have to do is export in 2x for high res. Read this article for full explanation
https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/

@Shawn_Castillo has a point, it IS an issue for limited size of upload… I’ve read some people export as pdf and then convert to png but haven’t tried it myself.

Hope this helps.

3 Likes

@Fernanda_Trejo I tried exporting in 2x, unfortunately it didn’t eliminate the problem. The quality is still bad, the export isn’t crisp and has blurry edges.

8 Likes

I tried to export the same, unfortunately nothing is working the image still looks blurry and pixelated

3 Likes

I am having this issue as well. in 1, 2, and 3x PNG. As a test; If I export the bitmap and bring it back into figma, it looks nothing like the original. PDF looks great but i need a PNG. super frustrating. Sketch doesn’t have this issue.

2 Likes
1 Like

Having this issue with exporting PDF’s. Half of the images come through at low resolution, with no way to change any settings and get them to full quality.

1 Like

If this is a solution for not spending too much CPU time on exports, I end up needing to export the same file 10+ times trying to play roulette for a working version with no low quality images. I am sure this is much worse for the server, repeatedly exporting hoping for a working result.

3 Likes

Same exact problem :-/

1 Like

Same as everyone else. I exported 1, 2, 3 and 4x for a project to post on Behance. Quality is not good. What’s the secret?

3 Likes

Hey @Jason_Carlson would you mind reaching out to our support team so they can take a closer look. If you could share examples and/or file access that would be super helpful.

Here’s the form

1 Like

Hi ! I have this problem when I export my work in PNG, so what I do is : I export everything in PDF (which has a great resolution) then I convert the files in PNG so that it doesn’t ruin the quality. It’s a longer process but it does the job !

Exporting the frame in 2x solved my issue, thanks!

Hey what do you mean covernt the files in PNG? you mean to PNG?
So Figma → Export to PDF → Open PDF (I use mac so mine opens in Preview) → Export to PNG - is that correct? do you change any of the pixel/inch values? i tried this but it’s still not good.

Is export the same as convert?

Figma team – please pass this along to your dev/QA team to review – there’s a bug with how you handle bitmaps during export.

Figma stores everything online. When you drop a large bitmap it gets uploaded and optimized into several resolutions and the most appropriate resolution is picked based the view. If it’s a tiny thumbnail of a large image – there’s no point to load an entire 10 MB image just to show that tiny version.

If you try to open a file with many large images you’ll notice how at first the lowest resolutions get loaded and the image is missing or looks pixilated at first. And then the appropriate resolution is loaded and substitutes the “temporary” one.

To be efficient, Figma doesn’t load images that aren’t visible and when you zoom out – there’s no point loading full-blown resolutions, because we only need a tiny preview. Smart. Until you try to export. Images whose full resolution version is not exported use whatever then can, as the result, some of them end up as squares.

To fix this you can zoom and just scroll around the page to make sure all images appear as they should and preloaded. Then press export and viola – everything looks like expected.

But shortly after Figma will unload those full-resolution versions, so it’s a pain in the neck. To make 100% sure it exports correctly you can zoom in on the graphic with an image and export it one at the time.

Figma team, if you need any details how to reproduce, feel free to get in touch! :v:

8 Likes

Images whose full resolution version is not loaded use whatever then can, as the result, some of them end up as squares.

I have the same problem. I sometimes create simple banners in Figma so we can create and edit it within the team. They look fine in Figma but when we export to PNG/JPG the quality drops massively, same for prototypes. Exporting to PDF does not have this problem.

Exporting in x2 or higher could make the quality better, but thats obvious since it enhances the size and is not a fix. For a banner however you are stuck with 1 size, so that is a workaround that can’t be done in all cases. Especially if you don’t want to blow up the size of your prototypes and/or visuals.

Some explanations in this thread don’t apply to this like loading errors and exporting in x2, since it’s all loaded and works for PDF fine. Whats the reason it’s not working for PNG/JPG?

Edit: After some digging I found that PDF export creates a 300 DPI file, where PNG/JPG exports at 72 dpi. Creating the false assumption for me that PDF export was better.

2 Likes

June 2022 and still having this issue. How has this not been fixed?

7 Likes

ditto @Justin_Jolliff ^^ I continue to have this issue and it’s rather annoying to have final image assets in Figma ready to go, but then I have to recreate them in photoshop to get a good quality export for web.

6 Likes

I have the same banner issue as Neok, looks like I might be forced to recreate everything in photoshop, thanks Figma… disappointed.

2 Likes