[피그마] 디자인 시스템 컬러 스타일 만들기 (ft.플러그인 추천)

컬러 스타일 (시멘틱 컬러 스케일)만드는 방법!
아날로그적 방법이나 컬러 스타일 만드는 원리를 이해할 수 있어서 좋다!

 

*사용(추천) 플러그인 : Coolors 컬러 

 

이미지 출처 : 피그마

 

아래 제네레이트 버튼을 누르면 컬러를 랜덤으로 정해줌..

물론 컬러선택은 신중하게 오랜 고민 끝에 결정해야하는 것이지만 빠른 결정을 위해 플러그인을 사용합니다.. ✅

 

1. 선택한 컬러 3개를 10개씩 만들어 주기

 

2. 명도 10단계로 각각 나누기

 가장 밝은 색에서 가장 어두운 단계로.

 

컬러 설정에 HSL 찾기 :
H (hue 색도), S (Saturation 채도) L (Lightness 밝기)로 색을 구분. 선택된 컬러 밝기값 L을 기준으로  10단위로 +10 -10 하여 컬러를 만든다. 만약 컬러 기준값이 10단위로 20, 30, 40으로 떨어지면 0(Black), 100(White) 검은색 하얀색이 되니, 다른 컬러로 바꿔야 함.

이렇게 각 컬러 마다 L값에 변화를 주어 밝기 단계를 10개를 만들어 준다.

 

이 방법 말고도 더 활용되는 방식이 있고, 더 복잡하기도 하다. 시멘틱 컬러를 더 공부하고 어떻게 하면 잘 어울리는 색을 수치적으로 계산해서 고를까? 라고 고민해 보기 (아티클도 찾아보고!)

 

*컬러 이름 짓기 : 가장 어두운 색상 900, 가장 밝은 색상 50으로 해서 Primary/900, Primary/800 백씩 줄이기. 마지막은 0이 아닌 50으로 주기. 10단계 이름을 다 지어주기. Secondary와 Teriary도 똑같이.

피그마에서는 슬래시(/)를 폴더로 사용한다. 그래서 폴더링 하기 위해 네이밍에 (색상이름)/(숫자)를 넣어주는 것!

 

* Styler : 스타일 설정할 때 유용한 피그마 플러그인 

이미지 출처 : 피그마

레이어에 적용된 배경색과 폰트를 '이름을 기반으로' 내 스타일에 자동으로 추가해주는 플러그인. 

만든 컬러칩들 드래그에서 다 선택해서 'Plugins > Saved plugins > Styler > Generate Styles' 클릭하면 선택한 30개의 색상을 자동으로 스타일 등록한다.

 

* Auto Documentation : 디자인 시스템 만들 때 유용한 피그마 플러그인 

출처 : 피그마

아래 버튼을 누르면 등록한 스타일들을 문서처럼 만들어 줌