10

Figma difference in color when saving? Please kill me

5 years ago from , Product Designer

I have a problem that I export from Figma to Png (or any) and when I preview my file on Chrome, or Finder I see different colors I keep having this problem every now and then For the sake of my sanity, please tell me what I do wrong! :(

Here's a video that shows the problem https://www.youtube.com/watch?v=6WDqfBKXmM8

Edit: Letting you guys know that I fixed it. I had to change my Mac's Color Profile from "iMac" to "sRGB IEC61966-2.1". It's my first iMac and I have it only a few months but I suppose I been living in a lie as all the colors seem more vibrant now. Hope I do it right. Thanks for all the help

9 comments

  • vadim mikhnovvadim mikhnov, 5 years ago

    https://bjango.com/articles/colourmanagementsettings/

    13 points
  • Andy MerskinAndy Merskin, 5 years ago

    Maybe this will help. I'm assuming the Figma desktop app is based on Electron or Chromium-based in some capacity. Chrome has had a history with using a different profile (usually pure sRGB I think) than macOS does (usually your monitor's calibrated profile).

    Superuser: Apple Preview and Chrome Color Profile Accuracy?

    It might be worth raising a bug report to the Figma team. They could probably add minimal color profile support by giving users control over Chromium's internal flags:

    Google Forums: Chrome showing pale colors

    3 points
  • , 5 years ago

    I feel like my first post ever is going to be laying at the bottom of the ocean like a crab that nobody wants to be around

    3 points
  • Jimmy B, 5 years ago

    Might be worth changing the color profile on your Mac in display settings and see if it affects it, if you haven't already. Color profiles can be a super annoying.

    2 points
  • Brian HintonBrian Hinton, 5 years ago

    I just tried this on my Pixelbook, and I don't see the issue at all. I created a square, and applied a similar green. I exported the square as a png, and then imported the image back into Figma. Last, I created two squares, and used the color picker to pick from the image and the initial square. Both had the same hex value. I imagine this is a simple color profile issue. I had similar issues in Sketch on my MacBook Pro when I used Sketch more.

    1 point
    • Andrew C, 5 years ago

      Did you use the exact same hex that he used in the video or just something that looked the same?

      I’ve had bad luck rendering things out of chrome headless consistently in the same way. This may be a limitation or web based apps for certain hexes.

      0 points
      • Brian HintonBrian Hinton, 5 years ago

        I did not. But I can do that in a bit. I really believe it is a calibration issue. I'll chime back when I've tested his color.

        0 points
  • Sascha MombartzSascha Mombartz, almost 5 years ago

    there is a solution

    With the latest release of the desktop app, you can force sRGB by running the following command in the Terminal app:

    defaults write com.figma.Desktop ColorCorrectRendering -bool true

    Be sure to complately quit and relaunch the desktop app after running the command.

    If it doesn't work, try downloading the latest version of the desktop app from https://www.figma.com/downloads/

    from here: https://spectrum.chat/figma/general/launching-figma-app-in-srgb-on-a-p3-display~e09dea99-494e-4469-a185-d80efe086686?m=MTUzOTM3MDc4MjI1NA==

    0 points
  • Fritz RihaFritz Riha, 5 years ago

    What happens if you drop that png into another application? do you still get the same hex value? - if so its a display settings issue.

    0 points