강의: 피그마 배리어블을 활용한 디자인 시스템 구축하기
[실습] 배리어블 등록 전 색상 스타일 맛보기
플러그인
- Foundation: Color Generator
- Orbit, Atlassian, Materail, Ant Design 네 개 회사의 컬러를 바로 가져올 수 있음- 원하는 색상을 선택하고 Palette를 누르면 가이드가 만들어짐
- Tailwind Color Palettes
- Tailwind 안에 있는 컬러들을 로컬 스타일로 바로 가져올 수 있음 - Color Style Guide
- 모든(?) 컬러의 스타일 가이드를 만들어줌
[실습] 색상 배리어블 등록하기
Swatchy
색상 만들어주는 사이트. json형태로 색상을 Export할 수 있음 ->
플러그인
- Variable import
- 위에서 만든 json 파일을 import 해서 local variable을 만들 수 있음 - style to variable
- 로컬 스타일을 variable로 등록 가능
배리어블 인터페이스 단축키
- cmd(window의 경우 컨트롤) + shift + enter
- 로컬 배리어블 복제
style to variable로 만든 색상 배리어블 -> primitive
theme collection으로 브랜드 컬러 만들기 -> brand, information, success, warning, danger, neutral
semantic collection으로 사용처(?) 별 컬러 만들기 -> text, bg, icon, border
이전 강의에서 봤던 structure 참고해서 경우의 수 정리해보기
| Category | Property | Role | Prominence | Feedback | State | Scale |
|---|---|---|---|---|---|---|
| color | bg | interactive | primary | default | bold | |
| border | plain | secondary | info | hover | subtle | |
| text | tertiary | warning | press | |||
| icon | inverse | success | focus | |||
| danger | disabled |
semantic에서는 primitive 말고 theme collection에 있는 컬러 참조하기!!
색상 배리어블을 다 등록했다면 컬러 스코핑
- 선택한 엘리먼트의 타입(bg -> frame, icon -> shape, text -> text, border -> stroke)에 따라서 다른 색상이 보이게
- icon은 vector들을 Union으로 바꿔주면 border가 아니라 fill로 바뀜! - 배리어블 인터페이스에서 여러개 배리어블의 속성을 한번에 바꾸려면 쉬프트로 모두 선택한다음 꼭 우클릭
- 결국 로컬 스타일은 다 삭제해야함!
- 퍼블리싱할 때 안 내보내려면 로컬 스타일은 .color 폴더 안에 넣어놓으면 됨(. 붙이면 ignore)- 같은 파일 안에서는 다 보임
플러그인
- Automatic style guide
- 한 파일 안에 있는 배리어블로부터 스타일가이드를 만들어줌- 3 depth까지는 안 나오는 에러가 있음
계속 복습해보자!
steady