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

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

---

간격 배리어블 스케일 구성짜기

간격 단위를 짝수로 하는 이유

렌더링 이슈를 막기 위해. ex 1.5배수 렌더링

4-Point Grid vs. 8-Point Gride

4의 배수로 늘어나냐, 8의 배수로 늘어나냐 차이인데 4의 배수가 더 유연하긴 함

간격의 사용

• 0 ~ 8px: 작은 UI 구성요소
• 12~24px: 카드 UI 패딩
• 28px ~ : 큰 규모의 UI, 레이아웃

간격 배리어블

• Component
  ex) --p-border-radius-05(예시)
• Semantic
  ex) Padding, Gap, Border Radius, Width/Height, Border Width
• Primitive
  ex) Unit
• Base Grid Point
  ex) 4
  

현재 베타 기능의 한계일 수 있는데, Shopify Polaris와 같이 토큰의 이름을 --p-space-1(실제 값: 4px)로 작성하면, 검색할 때 문제가 있음. 4px 간격을 넣고 싶어서 4를 검색하면 -p-space-4만 나옴, 즉 실제 값 말고 이름으로만 검색됨!

색상 등록과 마찬가지로

• primitive collection에서 실제 값 등록
• semantic collection에서 primitive 값 참조
• scoping!!
  - 예를 들어, border radius는 spacing에 뜨지 않게
  • 추가로 code syntax 설정

[실습] 간격 배리어블 등록하기

다시 말하자면, 토큰 값과 실제 값을 1:1로 매칭하는 이유는 실제 값으로 검색이 안 되기 때문

플러그인

• apply variable
  - 로컬 스타일을 배리어블로 등록해줌