Maintaining Screenshot Quality and Color Profile in Figma

The Problem

It's easy for a designer to misstep when bringing screenshots into their Figma project, updating the design and/or adding a device mockup, and then exporting the final image(s). Several of these missteps can occur in other design tools, but I'm highlighting Figma for this article, as it's currently the most popular design tool for product designers.

The Introduction

If you take screenshots on an iOS device and work with those screenshots in Figma, you're likely losing the Display P3 color profile and original screenshot image quality along the way.

Here are the steps I take to ensure that the final exported image retains all of the high quality aspects of the screenshot(s) used.

You might wonder what "Display P3 color profile" even means. TL;DR - it's instructions computers follow to accurately render specific, wide-gamut color values on a display.

You can specify a series of colors that extend beyond what an sRGB (the most common color profile for displays) profile can define, rendering colors with higher saturation values that appear more vibrant beyond what could be defined in an sRGB profile.

Others have written extensively about the topic. In particular, Marc Edwards wrote a few great articles: Design Systems Need A Colour Space and Testing for Wide Gamut.

Sketch also wrote a great article several years ago on the topic, and here is a visual to demonstrate the capabilities of sRGB vs Display P3 color profiles:

1. Transfer

2. Create

3. Export

Stage 1: Transferring Screenshots from iOS Device to Computer

Before we work with the screenshots, we'll need to transfer them from the device to Figma. The most common methods are AirDrop and via USB cable. Sure, you could email/text/Slack them to yourself, but I'd advise against that. Image compression for these platforms is all over the map. You want to the full-resolution, uncompressed (as best you can get from the device itself) file. Yes, you can use QuickTime to screenshot your shared iOS screen content on an external monitor. No, that is not what I'm covering today.

First thing you'll need to understand is Apple AirDrop is not a consistent feature. Many people don't know (or probably care) about the nuances here, but if you're reading this you probably do.

If you capture a screenshot, and AirDrop the image from the edit screen share sheet (tapping on that little post-screenshot image in the bottom left corner brings you here), you're getting a JPEG image that contains an sRGB color profile. This isn't what you want. You've already lost the plot, so if you share your screenshot to your computer this way, the rest of the process will not be nearly as helpful.

Instead of doing that...

Once you've captured the screenshot(s), go into the iOS Photos app, and AirDrop the image(s) from there. The image(s) will be the full-resolution, PNG image containing the Display P3 color profile. This is what you want.

Stage 2: Using Screenshots in Figma to Create New Designs

Next up is creating content in Figma using the captured screenshot(s) you got in the first stage.

While you can drag and drop images directly into Figma from Finder or elsewhere, then resize/crop, if you want the highest quality image at export, you won't do this.

Instead, select the (or create a new) frame where you'll place the screenshot(s). Adjust the frame size to the same aspect ratio as your screenshot, unless you wish to crop a specific portion of the screenshot for your design.

Select the Image option within "Fill" property.

This seems like a distinction without a difference, but here's why it matters.

When you use this Image fill method, Figma is intelligently displaying the image at the desired size, while keeping the full-resolution image loaded in the background. When you export the final design, this full-resolution image is utilized, meaning you can take a designed created at 1600x1200, for example, and export a final image of 4800x3600 (very common 3x export PNG size for a platform such as Dribbble) and maintain that fidelity even though your screenshot is shown in your design at a much more modest size.

Effectively, you are only moderately upscaling a high-resolution bitmap image one time. Figma is likely doing some rounding of pixel color values as well, to ensure that the pixels don't appear as blurry when viewed at the full-resolution.

Contrast this to a resized screenshot image that was dragged into Figma, which is first resized down, reducing its resolution, before it is rendered and the low-resolution version must then be upscaled far higher than the original image. Now, that 3x export is likely a 6x export upscaling, which, even with the best upscaling engine available, will lose quality. Quality, by the way, that it already had, but was lost due to the method used by the designer to first shrink down their full-resolution image.

Stage 3: Exporting the Final Designs from Figma

Don't drop the ball here.

When exporting, select the size and image format. I typically use "w" to define a specific resolution rather than a multiple of the original Frame size.

8,000 pixel width designs will look decent for the foreseeable future, and most sites won't allow 10,000w+ resolution images uploaded, so it's a nice middle ground between ultra high-resolution that's currently supported, and "just-good-enough" 4k that has become norm in the tech industry for a while now.

This way, if I'm exporting multiple Frames that were originally designed at different sizes, I'll get a consistent sizing of images when I export them.

From the ellipsis menu ("...") select "Color Profile" -> "Display P3". I use the "Detailed" Image resampling setting, and keep "Ignore overlapping layers" checked.

If your file is using the Display P3 color profile, Display P3 will be selected by default, but as the file I'm using to create these sample images deals with both web and iOS designs, it's using an sRGB color profile. You can still keep the Display P3 color profile in just select exported images, which is a very helpful feature in Figma. It's great to see that it supports a flexible workflow when dealing with multiple color profiles.