Mar 5, 2021
How to avoid pixelated screenshots in Figma
The problem
There are times when you need to show a full-page screenshot of a website in Figma. For example, when you need to provide references alongside your class project — or for any other reason.
It has been noticed that some screenshots become crappy — as if they have been resized prior to display.
Well, this is indeed what happens. They do get resized under some circumstances. A quick googling brought up the official Figma webpage — Add images to your design — where it is said that an image in Figma is proportionally resized if any of its sides is longer than 4096 pixels.
Desktop version of Figma actually shows a tiny notification about the resizing of an image. The in-browser version, however, seemed not to show it at the time of this writing.
The obvious workaround
After making your long screenshot,
- Open your favorite raster image editor;
- Split the long screenshot in pieces of 4000 pixels (we love round numbers in decimal system, don’t we);
- Place them in your Figma project side by side.
Hope this helps someone.
