Problem with pixelation while exporting layer

[Ian_Bytchek]

@Ian_Bytchek

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

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

[Neok]

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.

[Justin_Jolliff]

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

[Jessica_Ferguson]

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.

[Holly_Prince]

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

[Akriti_Sharma]

August 2022 and it’s still not fixed. I am stuggling for decent quality png exports.

[Vanessa_Gadberry]

Flagging for a needed realistic fix for multimedia design teams looking to use Figma as a resource moving forward.

[Xavier_Castillo]

Experiencing this as well. Our agency uses Figma for collaborative design for social media content, and we’re all seeing a deterioration in JPEG exports of single photos in post sized frames vs. the same export and sizing in Photoshop/Illustrator artboards. This has really messed our workflow and I’ve been an enormous Figma advocate at the agency.

[MUHAMMAD_HAIKAL]

the problem still here, and i’m still counting days till figma team fixed it.

[Yash_Shetty]

I’m facing the same issues. And I tried all the suggestions here (exporting in 2x, 4x, etc) and also tried to export as pdf and then convert into png, it still reduces the sizes.
When I upload my assets on social media platforms, the edges are still blurred and not crisp as seen on figma.
Its frustrating that this has been an issue since more than one and a half year and it still hasn’t been fixed yet :///

[Melissa_Barrass]

I am in the same boat. Just really poor quality on export - especially PNG (regardless of the x2,x3,x4 etc)

Unsure if this issue is still being looked at considering the OG poster claims it as a “solution”

[Dan]

This continues to be an issue for me.

[Sarge]

This is an issue for me as well

[Gleb]

This is not a bug (in most cases), you are just expecting the wrong results. See this reply and my replies in this topic.

Export losing quality even using PNG and 2X higher

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 p…

And:

Export losing quality even using PNG and 2X higher

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).

Don’t just say “this is an issue”, nobody can help you if that’s the only info you provide.

[iago]

Here is a workaround for when even when exporting 2x or more does not work. Hope it helps
https://youtu.be/j_wM1BPYBhk

[Gleb]

Export losing quality even using PNG and 2X higher

[How to Export High Resolution Images on Figma - FIXED!] This is a workaround to solve that. Exporting a pdf first and then, from the pdf, export a PNG

[gabriel_brocklesby]

x2 fixed it for me so thanks

[Neok]

This is untrue (The expecting wrong results part), when creating a 1 on 1 same image in photoshop and exporting at a png at the same settings (DPI and resolution), the Figma export is lower in quality. I get that a lot of people don’t understand the 2x/4x just inflates the image, but this isn’t what you can use in a lot of specific cases. It probably is not a bug, but the export from Figma to png is not a great tool. Otherwise you would not see users talking about recreating it in PSD under the same circumstances for better results.

This issue has NOT been solved, but it’s NOT a bug. The export to PNG needs to be improved to decrease quality loss.

[Gleb]

Do you have any examples? Including the source files and the export settings both in Figma and Photoshop and the results. PNG is a lossless format so should be pretty easy to compare.

[Romii_Palmero]

Hi, I solved it by dividing each image into different smaller images.

Regards!