It’s just bad usability to have no explanation in the onboarding or during your first export about this very important aspect of UI design. Even just having the pixel preview setting on by default would probably clear up half the doubts I see around this issue. I’ve reached out to support about this a while ago and didn’t get a response that properly explained this behaviour. Your replies here are by far the clearest I’ve seen regarding this and it’s still confusing to so many users.
As for my image issues, I didn’t necessarily want a response about that specific photo, I was asking in a more general sense why a picture would lose quality when downscaled. But if it helps to visualize it, I made this file with an example that you can take a look at.
My main concern with this issue is: we make page layouts with a bunch of photos and masks that our devs then export and put on the actual webpage. Those images look much blurrier in the live site than on Figma and I would very much like to figure out a way to export the images as crisp as they appear on Figma.
They will also need to apply a mask in development though. If you need to export with the applied mask, export the image with the multiplier of whatever the downscale factor was. E.g. if you scaled the image down 2x, export in 2x. If you scaled it down to 3x, export at 3x.
Or use the original image width/height if you masked only one side, like in your example. The original was 2734px high, and you didn’t cut the height of the image by your mask, so you can export it with 2734h setting.
However you don’t need more than 2x for development purposes, since the high-definition computer displays (e.g. Retina) only have the “2x” resolution. So nobody would see anything more than 2x resolution without zooming in manually. And with higher size export you are slowing down the load times of your page on the web. As an example, if your image is 200px in size in development, it should at most be exported at 400px.
Of course, just export it with a 2x multiplier. However if the frame contains raster images that are smaller than desired resolution (meaning they weren’t scaled down 2x or more to fit into that 300px frame), they would be pixelated as it is not possible to upscale raster images without losing quality.
Yes, that’s precisely the issue we are discussing here. Is it feasible to choose the resolution while exporting png/jpg in 1x. Currently, the default resolution is 72, and there’s no way to enhance it.
This video shows how we can export a 1x png with a higher resolution by exporting it into pdf and convert into png. At least, it works, but Figma should be aware of it’s time-consuming especially since there are tons of icons that need to be exported in different sizes and resolutions.
The problem may be related to video memory. With a large number of pages (several hundred or thousands), I have a very slow loading of images in high resolution. Moreover, when exporting a card, it can return to the preview state. In this case, with a card resolution of 1800x1200px, it was exported as 600x400px with the Nearest Neighbor image interpolation. Creating a new file and transferring pages there solves the problem (in my case).
I have read all your comments related to this problem, but I didn’t understand what the solution to this problem is. I have a 26x26 size of icon and this is the 2x export result.
yes I am viewing it at 400% and I know that’s the problem. If I don’t view it at 400%, I won’t be able to determine the clarity of the icon. That’s why I have zoomed it in up to 400%. give me the solution to this issue.
This is how raster images work. They consist of a fixed amount of pixels — exactly how many you specify on export. The quality can only be determined at 100% zoom, otherwise you are just enlarging pixels. There is not enough information in the image to show you the desired level of detail. If you need more detail and planning to view the image in this scale, you need to export at a higher resolution.
On the left you have a vector or a high-resolution raster image which doesn’t suffer from this scaling issue. There is enough information in it to show you a higher resolution at this zoom level (you can disable this behavior by enabling pixel preview as I suggested in the thread previously).
You want the image to be 25x25 pixels (for example, not sure what exact dimensions are in your case). But at the same time you scale it to 100x100 pixels and say that the quality is bad. It doesn’t work like that, it can’t get those extra 75 px² from anywhere.
Also read up on the difference between raster and vector images, that would help you.
So in the end what you want is like printing an animated video on a sheet of paper — impossible, due to the nature of the medium. You either need to change the expectations or adjust the settings to fit your requirements.
Feel free to ask questions if anything specific is unclear, I’ll try to explain.
I also think the expectation Photoshop set vs what Figma does is a factor for the confusion besides what you and @Gleb have already pointed out clearly.
If you have Macbook, a minimum of 2x is necessary to view the export unpixelated because of Mac’s retina display. This applies to other PCs too.
If you are printing it, just export it to 4x as mentioned above.
I export at 25x to get roughly the same quality as if it were exported into PDF. Of course, this blows up the size of a single image to 1.2mb but the addtl file size is a price worth paying vs stressing over it. I’ll be switching back to Adobe AI after this. Shame, I really enjoyed Figma’s speed over anything else.
Figma gives you the same results as long as you are exporting correctly and understanding what you are doing. PDF supports vector data so if you are comparing PNG and PDF, the PDF is like exporting as 99999x — it doesn’t “lose quality” no matter how much you zoom in, because it’s vector, not raster.
It is true that exporting at 4x solves the problem and that the core of the whole issue is the difficulty in understanding how the relationship between DPI and the image raster works.
As we can see here, actually exporting at 4x allows you to maintain the same quality as the original when resizing back.
However, Figma’s development team, after almost 3 years since the creation of this post, still fails to understand that what designers need is: click on export = have the image with the same visual as the original. Just that. Without having to configure anything. Without having to resize anything. That’s simple user journey and usability. How many more years will it take to answer this and other similar posts before delivering simplicity?
Same issue here. Exported PNG at 1x through Figma vs the same 1x asset via Photoshop. Can really see the issue around text. Not ideal if we need to use workarounds to achieve the best fidelity possible.
