How to avoid pixelated screenshots in Figma

Screenshot of a long (1903 × 12842) image after being placed into a Figma project

The problem

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

  1. Open your favorite raster image editor;
  2. Split the long screenshot in pieces of 4000 pixels (we love round numbers in decimal system, don’t we);
  3. Place them in your Figma project side by side.

Hope this helps someone.

--

--

A guy from Kyiv, Ukraine. Scratches the surface of front-end webdev for a living.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matvey Andreyev

A guy from Kyiv, Ukraine. Scratches the surface of front-end webdev for a living.