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
2 Likes

I’ve been having this same exact problem for years and finally came to the forums to find a solution. Alas, I find it’s still an issue.

My assumption is it has something to do with the Mac Display’s color preset but changing any of those settings messes with my display. My hypothesis is that because the display isn’t set to sRGB, it’s messing with the screenshot’s color space.

The really annoying workaround I’ve found is to bring the screenshot into Photoshop (PNG should be the default file type). Once there, nudge the screenshot up 1px and then back down 1px so that Photoshop realizes you made a change to the file. And then save it.

The correct color information is now embedded into the file and you can bring into Figma with all the correct colors.

Really hoping for a fix because it’s been super annoying.

1 Like

Great tip! Though I don’t have Photoshop so I may need to find some other workaround.

I’m starting to think it might have to with P3 displays:

Hello everyone.
Using my solution, you will be able to skip the “reexporting” the file using Photoshop or other apps.

From my testing, figma seems to be having a problem processing the .png screenshot on macOS.

If you type the following command into the macOS terminal:
defaults write com.apple.screencapture type JPG;killall SystemUIServer

the screenshots will automatically be saved in .JPG format and the problem is solved.

(On the other hand, saving the image as a .JPG will lose some image quality, but that’s out of this toppic).

This only works if you use the Command + Shift + 5 keyboard shortcut, which saves the screenshot to disk. It doesn’t work with the Command + Control + Shift + 3 keyboard shortcut, because that just copies the screenshot to the clipboard, and therefore doesn’t change the file type.

My configuration:
Apple M1 Pro 14-inch, 2021
macOS 13.2.1

Hope it helped.

3 Likes

Interesting. I wonder if there are any third-party screenshot tools that save in JPG so I don’t have to mess with the system default.

Hey all! I had the same problem but screenshots was from iphone i realised that yo can just open image wit macOS standard preview tool and then export it to jpeg so its more convenient then using photoshop

1 Like

What worked for me was to convert the color profile of the png screenshot from Display to sRGB with Photoshop. I’m using desktop Figma in sRGB color space.

  1. Open the image in Photoshop… or paste it from the clipboard
  2. Edit → Convert to Profile → Destination Space: Working RGB - sRGB → OK
  3. Save the image and import it in Figma… or simply select all, then copy and paste in Figma.
2 Likes

I struggled with this problem for two years in one of my projects!
Thank You sooooo much!

I found a solution that worked for me, no need to run Terminal commands, take the screenshot and then go to File → Place Image and place it in your canvas, problem solved.

Placing the image didn’t work for me, but the thing that did was using Cleanshot and changing the file format from png to jpg. Avoids the terminal work. I’ve had this issue for years and don’t understand how it’s still an issue.

Cmd+Shift+4 — wrong colors
Cmd+Shift+3 — right colors

MacOS 10.15

1 Like

@Invitro hi! noticed you mentioned MacOS 10 – the minimum requirement for Figma is MacOS 11 or higher. If you’re able to update your OS, I would recommend doing so, and then seeing if the colors are still not being captured correctly.

Since the creation of this topic is old, I’m actually going to close it – please create a new topic with an update, if you still have issues after updating your OS. Thank you!