피그마 export시 색상 다르게 나오는 문제 해결법

피그마를 사용하다보면 에셋을 이미지로 추출할 경우 색상이 다르게 추출되는 현상이 발생하곤 합니다. 피그마 export시 이러한 문제가 발생했을때 해결하는 방법을 공유합니다.

피그마에서 지원되는 색상 프로필

Figma에서는 주로 두 가지 색상 프로필, sRGB와 디스플레이 P3를 지원합니다.

  • sRGB: 가장 널리 사용되는 색상 프로파일로, 대부분의 웹 브라우저와 디스플레이에서 지원됩니다.
  • 디스플레이 P3: sRGB보다 더 넓은 색상 범위를 제공하여, 더 생생하고 풍부한 색상을 표현할 수 있습니다. 특히 iOS 장치나 Retina 화면에서 더욱 빛을 발합니다.

색상 프로필 설정하기

1. 피그마 기본 설정 변경

새로운 디자인 파일은 기본적으로 sRGB로 설정됩니다. 다른 색상 프로필로 변경하려면 아래 단계를 따르면 됩니다.

피그마 export
피그마 export
  1. 편집 권한이 있는 파일을 엽니다.
  2. Figma 메뉴를 열고, Preferences > Color profile로 이동합니다.
  3. 원하는 색상 프로필(sRGB 또는 Display P3)을 선택합니다.
  4. 팝업을 닫아 설정을 저장합니다.

색상 프로필 선택 시 ‘Apple 장치에 가장 적합한 Display P3는 색상 스펙트럼이 넓지만 웹 디자인에는 권장되지 않습니다.’ 라고 기재되어 있으니 참고 하시길 바랍니다.

단, 해당 설정을 적용하려면 피그마를 완전히 종료 후 재시작해야 합니다.

2. 색상 프로필 할당하기

현재 작업중이 파일에 색상 프로필을 할당 할 수 있습니다.

피그마 export
  1. 파일 이름 옆의 드롭다운 화살표를 클릭합니다.
  2. File color profile으로 이동한 후, 원하는 프로필로 변경합니다.
  3. 색상 값을 유지(할당) 옵션을 선택하고, 변경 사항을 저장합니다.

색상 값 유지 or 변환 옵션

위 절차대로 파일의 색상 프로필을 변경할 때, 색상 값을 유지(할당)하거나 모양을 유지(변환)할 수 있는 옵션을 제공합니다.

figma change color prolfile
Keep color values(Assign): 색상 값 유지(할당)

시각적으로 색상이 변경되지만, 기본 데이터(예: 16진수 코드)는 동일하게 유지됩니다. 브랜드 색상 등 특정 색상 값에 의존하는 경우 유용합니다.

Keep apperance(Convert): 모양 유지(변환)

색상의 기본 데이터가 변경되지만, 최대한 동일하게 보이도록 유지됩니다. 다양한 디바이스에서의 일관된 외관이 중요한 경우 선택할 수 있습니다.

자산 내보내기

1. 피그마에서 설정 후 내보내기

기본적으로, Figma는 파일의 현재 색상 프로필을 사용하여 자산을 내보냅니다. 필요한 경우 내보낼 때 다른 색상 프로필을 선택할 수 있습니다.

2. 플러그인 사용하기 (PNG)

맥의 Display P3와 같은 ICC 프로파일이 내장된 PNG를 내보내기 위한 플러그인 입니다. 사용법은 매우 간단합니다.

  1. 플러그인을 실행한 후 일반적으로 에셋을 export 할때와 동일하게 1번 영역처럼 이미지를 선택 후 ‘+’ 버튼을 클릭하여 PNG를 선택합니다.
  2. 플러그인에서 원하는 컬러 프로필을 선택하고 save를 클릭합니다.

대표적으로 Display P3와 sRGB가 보이는데 아래 Show more profiles를 클릭하면 더 많은 색상 프로필을 선택 할 수 있습니다. 저는 MAC을 사용중인데 윈도우에서도 Display P3로 exoport가 가능한지 궁금하네요. 혹시 아시는 분은 댓글 부탁드립니다.

결론

Figma의 색상 프로필 기능은 프로젝트를 함께 진행하는 팀원들이 각각 어떤 디바이스를 사용하든 일관된 색상을 유지할 수 있도록 도와줍니다. 이 가이드를 통해 색상 프로필을 적절히 설정하고 관리하여, 디자인의 품질과 일관성을 높여보세요.

참고

Leave a Comment