How to avoid pixelated screenshots in Figma
Upd.: Hello! This tiny article has been written in 2021, and could’ve become outdated since, because our life is changing rapidly. With that said, happy reading!
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.