Pixelated image when exporting

Hello

I have to export a lot of assets for a client, can be several thousands. I noticed that when exporting, some assets still have that pixelated rendering that looks like progressive JPG. I’m quite sure this is because when exporting, Figma hasn’t finished loading all the HighRed images. So I tried scrolling through all my images at more than 100% zoom and waited for Figma to load the complete image when it wasn’t. Did that through all my assets, launched export, and it still had that pixelation on some of them. I think by the time I had scrolled through all my images, Figma just decided to go back to low res for some of them, which is not very nice… Do you guys have any idea how I could resolve this?

Thanks

2 Likes

Hi @Vincent2 ,
This workaround may help you:

If you are still running into issue, 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

Hey, thanks for the help. I already contacted the support but they didn’t help yet, I contacted them yesterday so I can wait a few days. When it says the export panel, are they talking about the export panel where you set the export settings? Or the export panel that popups when you hit “export”? Anyway, I don’t find all the options they talk about in both of them. Attached print screens of what options I can find in both of them.


Thanks for the information, our team will reply you soon. As you have sent your file, our team will try to replicate and will be able to investigate further.

You are right, after double check, this option doesn’t appear on my side! Sorry for the misunderstanding.
In the meantime, here another tip: we generally recommend exporting your designs at a larger multiplier (2x) to create higher resolution exports and reduce blurry exports. You can read more here about the different export formats and settings we offer.

Hope it helps!

No worries, yes I’ll wait on them. Yes I know, I use to export at retina and non-retina for bitmap assets, but the issue is not about quality. I’m quite sure it has to do with progressive loading of the image because I can clearly a larger than the actual pixel grid of the image in the image. I’m pretty sur it has to do with Figma not loading the complete image data before exporting.

1 Like

Hello, I’m noticing the same issue. As Vincent2 says, I also believe it has to do with compression and progressive loading of the image. It’s urgent to solve this, as when I export images for social media (although that’s not the main goal of Figma) they are pixelated. Please get back to us ASAP. Thank you.

1 Like

I’m also having this challenge. When will this be fixed?

I’m also running into this issue. Does anybody have a fix?

1 Like

Hey, I had this same issue, but when exporting, I used @celine_figma’s advice and used x3 or x4 and it now looks great! Thank you.

2 Likes

It’s double work but you could do Figma → pdf → jpg/png and adjust the ppi during the second step. For some reason only the pdf file seems to capture the full resolution when exported. It would be nice if we wouldn’t have to, but “where there’s a will there’s a way” I guess!

1 Like

I have the same issue. I exported as PDF then converted to png, which worked but took loads more time.

great, that fixed it for me too
thanks!

This is also coming out blurry for me, unless I export as a PDF. I submitted an issue.

same problem for me. When I export in PDF or SVG all good, no pixelation. When I export in png and jpeg it’s pixelated even in x4. I moved the images to a new blank workspace to see if it was a loading issue. What’s the deal?

1 Like

I also have this issue, and we are so close to launch…
This is so stressful! :frowning:

I’ve tried all the methods mentioned here with similar results. The odd thing is this, I exported a large 1440 X 1000 frame (case study thumbnail) and it is in perfect hi-res. But when I export a 390X4822 frame I get lo-res pixelation. Even if I go the PD\F etc workaround when I import it into Figma it is still the same poor quality.

So, I did a little copy and paste from my full iPhone frame into the stock 390 X 844 frame, exported that as 4X PNG, and imported it into my case study with perfect resolution. Back in December I did not have this issue and exported frames at 390 X 4008 with no issues. So, what is the exact frame size limitation to avoid this issue? And will it be resolved any time soon?

Thanks.

Hey Mark,
The assets altogether shouldn’t exceed 4096 pixels in either direction. If either the x or y dimensions exceed 4096, Figma will resize the entire object proportionally to keep it within this range. Hope this clarifies!

(Also for visibility, I check on our backend on Vincent2’s case, here the response from our support team: this behavior is expected — the reason for the pixelation is because you’re hitting the browser tab memory limit, causing some exports to be “cut short”. Exporting chunks is the solution here, as is splitting your file up so you’re not exporting too much at one time to begin with.

This is a browser limitation, similar to a memory file limit, and isn’t something that Figma can’t alter at this time. )

Instead of exporting all the images at one time, consider exporting them in small batches. This can help in reduce the load on Figma and ensure all images are export successfully.

1 Like

Hi,

I have the same issue here, any new solutions yet?

Or updates about when this problem will be fixed @Celine_Figma ?

Many thanks

Hi @Pierre_Hatier , as reminder you may encounter this issue of pixelation because you’re hitting the browser tab memory limit, causing some exports to be “cut short”. Exporting chunks is the solution here, as is splitting your file up so you’re not exporting too much at one time to begin with. This is a browser limitation, similar to a memory file limit, and isn’t something that Figma can’t alter at this time.

As explained, we generally recommend exporting your designs at a larger multiplier (2x) to create higher resolution exports and reduce blurry exports. Or, exporting your images in small batches as @johntk22 explained. You can read more here about the different export formats and settings we offer.

If you are still running into issue and would like our team to take a closer look at your issue, please reach out to our support team with a link of your file directly: Here’s the form
Be sure to use your Figma account email, include a link to the file, and share it with support-share@figma.com as en Editor, so we can take a closer look.