How to avoid pixelated screenshots in Figma

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

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,

  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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Melanin: The Color and Cost of Life

How to Install Roller Shade Automation Kit: 10 Easy Steps

Designing Readable Notification Components

Business Speak and UX Writing

Don’t miss tomorrow’s webinar

Concept Capture for Prototyping

Week 10: Character Prototypes, Puppet Warping & Target Audience

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

Matvey Andreyev

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

More from Medium

Design for Others

Axure Tips: 7 Tips to Improve the Efficiency of Axure

The home24 Figma case

An illustration of a woman inspecting the logo of Figma with a magnifying glass.

Copy to clipboard 📋