[피그마 디자인시스템] 피그마에서 컬러 시스템 만드는 방법 : 3가지 추천

안녕하세요. 오늘은 피그마 디자인 컬러 시스템 만드는 방법에 대해서 서술해보겠습니다. 명확한 컬러 시스템을 구축하면 일관된 사용자 경험을 제공하고, 제품의 신뢰감을 높일 수 있으며 협업 과정에서 커뮤니케이션 오류를 줄일 수 있습니다. 

 

3가지 방법을 소개해드릴 건데요. 수동으로 제작하는 방법과 플러그인을 활용한 방법을 설명드리겠습니다. 디자이너 혼자서 작업할 때도, 개발자와 협업할 때도 모두 유용하게 사용할 수 있습니다.

 

1. 기본 팔레트에서 수동으로 톤 나누는 방법

컬러 시스템의 첫 단계는 핵심 색상 정의입니다. 최소 5~8가지의 색상만으로도 충분히 명확하게 시각적인 효과를 낼 수 있습니다. 

 

1.1 메인 컬러 정의하기

- Primary (주요 색상) : 브랜드를 대표하는 핵심 색상입니다.

- Secondary/Accent (보조 색상) : Primary와 유사한 톤의 색상을 선택해 시각적 강조에 사용됩니다.

- Neutral (중립 색상) : Gray 계열을 기반으로 필요에 따라 Primary 컬러 톤을 섞어서 브랜드 고유의 톤을 만들 수 있습니ㅣ다.

- Black & White : 텍스트, 배경 등에 필수적으로 사용되는 기본 색상입니다.

 

* Tip : Neutral Color에 Primary 컬러를 8% 정도의 Opacity로 오버레이하면 브랜드와 어우러지는 중립 컬러를 만들 수 있습니다.

 

1. Primary 색상을 중심으로 Hue 스케일에서 유사한 색조를 Secondary/Accent 색상으로 선택합니다. 

2. Shade와 Tint 생성 : 선택된 Primary 색상을 중심으로, 왼쪽에 배치되는 색상들은 더 어두운 색조(Shade)가 되며, 오른쪽에 배치되는 색상들은 더 밝은 색조(Tint)가 됩니다.

 

---

1.2 HSL을 활용한 Shade & Tint 조절

Figma의 컬러 선택 창에서 Hex > HSL로 전환하면 명도와 채도를 정교하게 다룰 수 있습니다.

메인 Primary 색상 옆의 Fill(채우기) 부분을 클릭하여 Shade와 Tint 생성하는 방법입니다.

 

* Shade 생성(어둡게) : Primary 색상 옆의 색상을 선택하고 Lightness(명도)와 Saturation(채도)를 낮춥니다. Figma에서는 Shift 키를 누른채 아래쪽 화살표 키를 누르면 한 단계씩 Shade를 낮출 수 있습니다.

 

*Tint 생성(밝게) : Primary 색상 옆의 색상을 선택하고 Lightness(명도)와  Saturation(채도)를 높입니다. Shift 키를 누른 채 위쪽 화살표 키를 누르면 반대로 Lightness가 증가하며 Tint가 생성됩니다.

 

- Neutral 색상의 경우 5% 증분 단위로 조정하는 것이 좋습니다.

 

---

 

1.3 플러그인을 활용한 자동화된 플러그인 구축

(1) Foundation and Generator

Primary 색상을 지정하고 컬러 시스템을 생성할 수 있습니다. 개발자에게 전달할 수 있는 컬러 토큰도 생성할 수 있습니다.

 

 

 

(2) Material Theme Builder 

Dynamic 모드로 전환하고 스타일 가이드 또는 무드보드 이미지를 업로드합니다. 자동생성할 경우, 색상은 자동으로 생성되어 Materiall Theme 폴더 아래 System colors 및 Reference colors 로 나뉘어 저장됩니다.

수동 조정할 경우 Hex 코드를 붙여넣어 색상을 조절할 수도 있습니다.

 

Global Style로 추가된 색상 값 Hex code를 변경하고 싶다면, 해당 스타일을 사용하는 색상을 클릭하고, 우클릭 후 'Edit Style'을 선택하여 속성 값을 변경할 수 있습니다. 이렇게 값을 변경하면 Material Themee Builder에 의해 생성된 컬러 스타일을 포함하여 모든 관련 스타일이 자동으로 업데이트 됩니다.