Figma로 Color-system 만들기

1. 색상 만들기

primary Color 뽑기

• leonardocolor
• colorbox
• material-theme-builder
• figma 'Coolors' 플러그인 사용

: 뽑아낸 색상의 HSL에서 L값을 10단위로 나누어 정렬해준다.

Secondary(Tertiary) Color 만들기

: primary 색상의 HSL에서 H값을 +30 -30 하여 만들어준다.

2. 컬러스타일 등록

객체를 한 번에 선택하여 rename으로 이름을 작성해주고, figma 'Styler' 플러그인으로 컬러스타일 등록해준다.
Material Design 기준으로 900에서 50까지 10단계, 보통 500을 기본 색상으로 지정한다.

3. 가이드라인 만들기

Figma 'Auto Documentation' 플러그인 사용해 가이드라인 만들기

** 베이직컬러 변경시 전체 적용

Figma 'Semantic Color Sync' 플러그인 사용해 시멘틱 컬러 관리

디자인 시스템 구축_컬러시스템