Skip to main content
Vincent2
Vincent2
New Member
June 8, 2023
Solved

Pixelated image when exporting

  • June 8, 2023
  • 30 replies
  • 41752 views

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

    This topic has been closed for replies.
    Best answer by Celine_

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

    30 replies

    Celine_
    Figmate
    Celine_
    Community Support
    June 9, 2023

    Hi @Vincent2 ,
    Can you please try these steps to see if that helps?

     
    Low resolution image export problem Ask the community
    It’s possible that the low resolution images were caused by a compression setting in Figma during the export process. To ensure that all images are exported at their maximum resolution, you can try the following steps: Select all frames and go to the Export panel. In the Export panel, choose the JPG file format and set the export resolution to “Original”. Check the “Export all” checkbox to export all selected frames. Choose a destination folder and export your images. This should export all i…

    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

    Vincent2
    Vincent2Author
    New Member
    June 9, 2023

    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.

    Capture d’écran 2023-06-09 à 14.00.00

    Capture d’écran 2023-06-09 à 13.59.25

    Celine_
    Figmate
    Celine_
    Community Support
    June 9, 2023

    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!

    Vincent2
    Vincent2Author
    New Member
    June 9, 2023

    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.

      marianalimoes
      October 31, 2023

      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.

        Sara9
        November 16, 2023

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

        stephen1
        November 27, 2023

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

          Taha_Paracha
          Taha_Paracha
          December 12, 2023

          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.

            wonjun4862
            wonjun4862
            January 11, 2024

            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!

              marehovv
              marehovv
              January 24, 2024

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

              Show more replies
              Terms & ConditionsAccessibility statement