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.
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:
Gonna see if I can find a decent explanation article with visual examples for this, otherwise might have to write one up myself!
This is a workaround to solve that. Exporting a pdf first and then, from the pdf, export a PNG
This “workaround” comes from not understanding how DPI and raster images in general work. Saving PNG PDF at 300dpi is equivalent to about 4x size export, so if you really need that huge PNG, just export from Figma at 4x and you’ll get the same result. No workarounds necessary.
Hello,guys,i may have found the solution.
First, in the zoom column,click ［pixel preview］1x or 2x.
Then-export ,click 1x or higher.
REMEMBER to select the # layer you need. （Left sidebar ）
Otherwise,it may occurs that there are many pictures export,you thought you have set 2x,but only one picture changes.
In that export page,you could clearly see each picture’s resolution,which is marked in grey.
Same issue. @Gleb I get the hires export option but if I export 4x the image is literally 4x as big - dimensions and file size. I think everyone in this thread is expecting that, if they see an image in Figma that they have created, and export it to PNG 1x, it should look the same. I did that here. Top image is Figma, bottom image is Figma 1x export. We shouldn’t need a workaround here.
Your screenshot is a compressed blurry jpeg but indeed I see some pixelation on the bottom picture. Without the original file and the explanation of how you exported this file it’s impossible to say why this happened. If you can share those I can explain what went wrong and how you can export the file correctly. Answers to these questions might help too:
It seems like the original file is just an image (screenshot) in a frame: what are the dimensions of that frame? If you resized it down, obviously it would export smaller even though it looks good in Figma. You can enable pixel preview to make sure you see the image in Figma just as it would look when exported.
Screenshots on Retina displays get resized down 2x while keeping the same resolution when you insert them into Figma. 100px screenshot becomes 50px object in Figma. Exporting such a screenshot at 1x would result in decreasing the original resolution by 2x. Did you account for that?
Do you actually need to export? Is there any reason you are trying to export this frame instead of simply downloading the original screenshot from the Inspect tab? Unless you did some changes to it, you can just grab the original file.
Yes, this works.
Hi, I would just like to add my doubts here. What I don’t understand is how I can import a photo, have it look crisp at 100% with the pixel perfect setting on, make it smaller to fit into a mask and then have it look pixellated. Why is it pixellated if it’s smaller than the original?
I think the main issue is not that people don’t know how DPI works. We are all used to seeing a picture in Photoshop and knowing immediately whether it is going to export pixellated or not because what we see is what we get. Why doesn’t Figma work that way? People have mental models and expectations and cannot be blamed if a new software doesn’t follow the norm and also doesn’t communicate it. From a user perspective, I shouldn’t have to export an image at 4x to have it look as good as it looks at 1x in the software I’m using.
It does if you enable Pixel Preview setting in View menu. It doesn’t work like this by default because it’s a vector software with the focus on UI design.
Regarding your downscaled image issue, feel free to share an example and I’ll explain why it’s pixelated.
Just to add a word here, comparing exports side by side between Figma and photoshop, Figma produces larger files that are inferior in quality. Of course photoshop also has 8-BIT PNG option which helps reducing the size as well as “Sharper” option. Left to right, photoshop, 10kb size, then Figma 30kb export of the same resolution.
