BUG (or feature?) — Figma imports screenshots with the "wrong" colors in sRGB colorspace

This has been pointed out in a previous post here, but was closed without a solution.

Also keep in mind I don’t have much experience with colorspaces and how they work, so bear with me.

Whenever I import a screenshot into Figma, the colors are wrong. For some reason this only happens with screenshots, not with other images as far as I can tell. For example, if I export an image out of Figma, and also take a screenshot of that thing in Figma, then import them both back into Figma, they will be different colors. The weird part is that when I open those images in macOS Preview, they are the same color.

I’ve tried this with the built-in screenshot tool in macOS and Shottr, with the same results. There is some strange thing going on when dealing with screenshots in Figma.

Here’s an example of what happens when I take a screenshot of a purple rectangle, then drop it into Figma, then take a screenshot of that one, and repeat the process. As you can see, the color changes significantly, and I end up with a pretty nice gradient all things considered. I might actually use this as a feature if it doesn’t get patched.

It gets weirder when we start messing with colorspaces, and we can start to get an idea of why this might be happening.

I have Figma set to the sRGB colorspace. Switching to unmanaged results in the colors in my design files displaying incorrectly, as I would expect. However, taking screenshots of the unmanaged colors, and importing those, looks totally fine. The colors match. Switching back to sRGB seems to adjust that imported image, and now it is displaying properly in sRGB as well. On top of that, reimporting that screenshot that was taken of the unmanaged colors into the sRGB space also looks fine.

In fact, any screenshot I import into Figma while in the unmanaged colorspace looks correct/like the original. Then when switching back to sRGB, the imported screenshot gets adjusted, and no longer appears correctly.

So, my grand theory here, is that when importing a screenshot, Figma assumes the image needs to be adjusted for the sRGB colorspace. Perhaps screenshot don’t have the same kind of colorspace information that other images do? My expertise is this area is pretty much non-existent, but this would explain why it imports just fine when in the unmanaged space, as no conversion would happen.

What I would expect to happen is for no conversion to take place when importing an image that doesn’t have colorspace data, or rather, for Figma not to assume a conversion needs to happen for screenshots. I want to see them in Figma like I see them on my screen, regardless of the colorspace. Maybe along with the colorspace preference, we could have a toggle for converting images on import (assuming my theory is correct).

Finally, I’d like to ask, does anyone have best practices/more information when it comes to using sRGB and unmanaged colorspaces? I’m using sRGB mostly because that’s how everything appears in the browser, etc. In the unmanaged space, the colors don’t appear like they do everywhere else on my Mac. Not sure if this is the right move.

I know this was a long one, kudos if you made it all the way through.

What I’m using:

  • MacBook Pro (16-inch, 2021) w/ M1 Pro
  • macOS 12.6
  • Figma Desktop App version 116.4.4