피그마 데스크탑앱에서 컬러가 다르게 export 되거나, 작업 환경 상에서 다르게 표시되는 상황이 발생하곤 합니다.
이는 데스크탑앱이 사용중인 컴퓨터의 color space를 그대로 상속받아 사용하기 때문에 발생하는 문제입니다.
문제를 정확히 이해하기 위해서는 color space를 비롯한 디지털색상 관련 추가 리서치가 필요할 것으로 보입니다.
이 포스트에서는 색상이 다르게 보이는 문제해결에 우선순위를 두도록 하고, color space를 비롯한 보다 세부적인 디지털색상 관련 지식은 관련 링크를 포스트 하단에 배치하는 것으로 대체하고자 합니다.
피그마는 기본적으로 sRGB 컬러 스페이스를 사용한다고 합니다. 그렇기에 웹브라우저로 접속시에는 sRGB color space로 표시가 되며, 이는 가장 일반적인 color space입니다. 맥북프로의 경우 피그마 데스크탑앱을 설치하고 사용하는 경우 기본 color space가 sRGB가 아닌 unmanaged로 설정이 되어 있습니다. 여기서 sRGB로 표시될 때의 색상과 차이가 발생하며, 이로 인해 작업과정에서 또는 이미지로 디자인을 exporting할 때 색상의 차이가 발생합니다. 이를 해결하는 방법은 피그마의 설정에서 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
'UX 디자인 > 피그마' 카테고리의 다른 글
| 피그마(Figma)에서 글씨 기울기, 이탤릭체(italic) 설정하는 법 (0) | 2022.03.02 |
|---|---|
| 피그마(Figma)의 이미지 사이즈(해상도) 삽입/첨부 크기 제한 (0) | 2022.03.01 |
| 피그마(Figma) 기능 - 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀 (4) | 2020.02.13 |
| 피그마(Figma) 기능 - 마우스(마우스휠스크롤)로 수치 쉽게 변경하기 (1) | 2020.02.12 |
| 피그마(Figma) 기능 - 스타일(Styles) 관리하기 (색, 폰트 저장하기) (0) | 2020.02.11 |
