menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
Team

Launching Figma app in sRGB on a P3 Display

February 21, 2018 at 11:53am

Launching Figma app in sRGB on a P3 Display

February 21, 2018 at 11:53am (Edited 9 months ago)

Edit: As of late 2018 this post is outdated. Figma now offers an official solution to this, posted below by Birunthan Mohanathas

I'm using a Macbook Pro 2017 and have been frustrated for a while with lack of color management in Figma desktop app. The colors are rendered in P3 instead of sRGB. This means they appear much brighter than they would on a user's sRGB device.

Recently, I have figured out a way to launch Figma in sRGB. I believe this might be helpful for others with P3 displays. You could launch it from Terminal like this:

/Applications/Figma.app/Contents/MacOS/Figma --enable-color-correct-rendering

This is it. Figma is now launched with sRGB color rendering. I hope they include it into a future release.

For now, you can create a launcher app in Automator so you don't have to run it from Terminal every time.

Step 1. Launch Automator, create New File and choose ‘Application’

Step 2. Search for ‘Run Shell Script’ in the left panel.

Step 3. Insert the following code

nohup /Applications/Figma.app/Contents/MacOS/Figma --enable-color-correct-rendering > /dev/null 2>&1 &

Step 4. Save your app

Step 5. Optional. Adding a custom icon to the launcher, unless you really like the robot icon 🤖

Right click the created app, hit ‘Show Package Contents’, navigate to Contents/Resources and replace the AutomatorApplet.icns with a different icon set. Mine is an inverted version of the Figma icon, you can get it here: https://upload.vladmoroz.com/AutomatorApplet.icns

Step 6. Enjoy sRGB colors in Figma 🙏


February 21, 2018 at 6:59pm

Whoa! This is cool.

  • reply
  • like

Chrome has moved to doing color correction in Chrome 60 similar to what Safari has done. You can enable it explicitly from the command line for now. The desktop app is still on 59, but hopefully will have this in an upcoming release. There's a setting to control the color space in chrome://flags on the web build. You can pick p3, srgb, etc. I typically recommend setting your display color space to sRGB so that no color conversions take place. You want these to line up to avoid color conversions:

Figma -> srgb -> browser(srgb) -> display (srgb).

like-fill
4
  • reply
  • like

February 22, 2018 at 6:30am

@alec-miller yes, Chrome had this flag for a while, but not desktop app. Also, changing color profile of new MacBook Pro to sRGB renders oversaturated colors that don’t match what a true sRGB device would render.

  • reply
  • like

March 21, 2018 at 1:03pm

Hello! Here is a beta version of the desktop app that should fix this issue:

Mac: https://desktop.figma.com/mac/Figma-3.7.0.zip

Windows: https://desktop.figma.com/win/Figma-3.7.0.exe

Let me know how it goes!

like-fill
5
  • reply
  • like

March 23, 2018 at 6:09am

I appreciate it but nothing changes on my case, bro

  • reply
  • like

June 12, 2018 at 7:54am

Is there an official fix for this? It's a problem!

  • reply
  • like

I use v3.7.0 beta, and the problem seem to be fixed.

But I don't know when the stable version will upgrade.

  • reply
  • like

June 21, 2018 at 6:15pm

If you look at the date creation, v3.6.5 (June 13, 2018) is more recent than v3.7.0 beta (March 21, 2018) – which doesn't make sense. Anyway v3.6.5 still doesn't include displaying Figma in RGB on a P3 display.

  • reply
  • like
like-fill
3
  • reply
  • like

Thanks @poiru. Much appreciated!

  • reply
  • like

July 6, 2018 at 4:07am

Could you please explain what's happening with the default color profile on my Mac when I use this client? And what's happening in the original Figma's client? Does the original client use sRGB profile by default? 🤔

like-fill
1
  • reply
  • like

July 17, 2018 at 11:37am

Could you please explain what's happening with the default color profile on my Mac when I use this client? And what's happening in the original Figma's client? Does the original client use sRGB profile by default? 🤔

This comment explains what's going on: https://www.designernews.co/comments/267248

like-fill
3
  • reply
  • like

October 2, 2018 at 3:58pm

Is there a newer beta for the sRGB color issue?

  • reply
  • like

October 11, 2018 at 11:16am

You might have meant -bool true? The -bool false renders oversaturated P3 colors for me.

  • reply
  • like

October 12, 2018 at 6:59pm

Woops, thanks Vlad!

  • reply
  • like

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/

like-fill
4
  • reply
  • like

January 30, 2019 at 5:03am

is there a solution for windows? I'm dying here.

  • reply
  • like

February 26, 2019 at 2:01am

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/

Hi Birunthan,

This is great! However I noticed another issue: if you paste a photo into Figma from your clipboard it ignores the new SRGB color profile (must be doing some sort of conversion as it pastes it in) and the color is not right.

Photos do however look perfect when Placing them—there is just an issue with the pasting where it doesn't abide the color profile is looks wrong.

Edited
like-fill
1
  • reply
  • like

Yep, experiencing same issue when pasting images in my day to day.

like-fill
1
  • reply
  • like

March 12, 2019 at 9:11am

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/

Hi!) Does this command need to be executed every time before launching Figma?

  • reply
  • like