본문 바로가기
디자인 스킬/피그마

피그마 데스크탑앱에서 export 또는 작업시 색상이 다르게 나오는 문제 해결

피그마 데스크탑앱에서 컬러가 다르게 export 되거나, 작업 환경 상에서 다르게 표시되는 상황이 발생하곤 합니다.

이는 데스크탑앱이 사용중인 컴퓨터의 color space를 그대로 상속받아 사용하기 때문에 발생하는 문제입니다.

문제를 정확히 이해하기 위해서는 color space를 비롯한 디지털색상 관련 추가 리서치가 필요할 것으로 보입니다.

이 포스트에서는 색상이 다르게 보이는 문제해결에 우선순위를 두도록 하고, color space를 비롯한 보다 세부적인 디지털색상 관련 지식은 관련 링크를 포스트 하단에 배치하는 것으로 대체하고자 합니다.

 

피그마는 기본적으로 sRGB 컬러 스페이스를 사용한다고 합니다. 그렇기에 웹브라우저로 접속시에는 sRGB color space로 표시가 되며, 이는 가장 일반적인 color space입니다. 맥북프로의 경우 피그마 데스크탑앱을 설치하고 사용하는 경우 기본 color space가 sRGB가 아닌 unmanaged로 설정이 되어 있습니다. 여기서 sRGB로 표시될 때의 색상과 차이가 발생하며, 이로 인해 작업과정에서 또는 이미지로 디자인을 exporting할 때 색상의 차이가 발생합니다. 이를 해결하는 방법은 피그마의 설정에서 color space를 sRGB로 변경해 주는 것입니다.

 

피그마에서만 색상이 다르게 나오는 경우 color space를 sRGB로 변경해 보세요

디스플레이 자체가 갖는 하드웨어적인 문제가 아닌 경우에는 위와 같이 sRGB로 color space를 세팅함으로써 표준화된 색상의 작업환경을 가질 수 있게 됩니다. 다만 해당 세팅 이후에는 피그마를 완전히 종료 후 재실행해야 합니다.

 

참고자료

https://help.figma.com/hc/en-us/articles/360043042113-Color-profiles-in-Figma

 

Color profiles in Figma

Color profiles define how colors are reflected on a digital display. In Figma, color profiles affect how color values are represented in the Color picker. Regardless of your color profile (or color...

help.figma.com

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

 

Colour management, part 3

I believe colour management is an essential feature for professional design tools — being able to rely on what you’re seeing when choosing colours, deciding on contrast, and assessing legibility is critical. In the last two articles, we covered the basics

bjango.com

https://spectrum.chat/figma/general/color-issues~6db5d962-6690-47d7-8f0b-657fcead02f5

 

Color issues · Figma

I'm working on a project where the client's brand color is #C2002F / UIColor 0.76 0 0.18 In Figma this is rendering as a brighter than what is being rendered…

spectrum.chat

https://www.designernews.co/stories/97912-figma-difference-in-color-when-saving-please-kill-me

 

Figma difference in color when saving? Please kill me – Designer News

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...

www.designernews.co