피그마 색상 배리어블 등록하기 - 강의 실습 정리

김형태·2023년 12월 21일
0

강의: 피그마 배리어블을 활용한 디자인 시스템 구축하기


[실습] 배리어블 등록 전 색상 스타일 맛보기

플러그인

  • 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 참고해서 경우의 수 정리해보기

CategoryPropertyRoleProminenceFeedbackStateScale
colorbginteractiveprimarydefaultbold
borderplainsecondaryinfohoversubtle
texttertiarywarningpress
iconinversesuccessfocus
dangerdisabled

semantic에서는 primitive 말고 theme collection에 있는 컬러 참조하기!!

색상 배리어블을 다 등록했다면 컬러 스코핑

  • 선택한 엘리먼트의 타입(bg -> frame, icon -> shape, text -> text, border -> stroke)에 따라서 다른 색상이 보이게
    - icon은 vector들을 Union으로 바꿔주면 border가 아니라 fill로 바뀜!
  • 배리어블 인터페이스에서 여러개 배리어블의 속성을 한번에 바꾸려면 쉬프트로 모두 선택한다음 꼭 우클릭
  • 결국 로컬 스타일은 다 삭제해야함!
    - 퍼블리싱할 때 안 내보내려면 로컬 스타일은 .color 폴더 안에 넣어놓으면 됨(. 붙이면 ignore)
    • 같은 파일 안에서는 다 보임

플러그인

  • Automatic style guide
    - 한 파일 안에 있는 배리어블로부터 스타일가이드를 만들어줌
    • 3 depth까지는 안 나오는 에러가 있음

계속 복습해보자!

profile
steady

0개의 댓글

Powered by GraphCDN, the GraphQL CDN