그리드 사용법

행/열 구조

  • 행 = 변수 하나. 행 이름이 변수 이름입니다 (color/brand/primary 같은 슬래시 표기 권장).
  • 열 = 모드 + 메타데이터. 좌측 첫 열은 변수 이름, 그 다음은 type · 설명 · 모드별 값 순서.
  • 모드는 collection 단위로 정의됩니다. 그리드 우측에서 mode를 가로로 펼쳐 한눈에 비교할 수 있습니다.

셀 편집

  1. 셀 클릭 → 텍스트 입력 모드.
  2. 색 변수면 hex/rgb/색 픽커, 숫자 변수면 숫자, 문자열 변수면 텍스트.
  3. Enter로 확정, Escape로 취소.
  4. Tab/Shift+Tab으로 셀 사이 이동.

TSV paste — 외부 시트에서 가져오기

Google Sheets / Numbers / Excel에서 복사한 표를 그리드에 붙여넣을 수 있습니다.

  1. 시트에서 헤더 + 데이터를 함께 복사 (헤더는 그리드 column 이름과 매칭).
  2. 그리드 첫 셀에 paste (Cmd/Ctrl+V).
  3. 매칭된 column은 업데이트, 매칭 안 된 column/row는 skip되고 toast로 요약됩니다.

paste skip 규칙 그리드에 없는 변수 이름은 새 행으로 추가됩니다. 그리드에 없는 column은 skip됩니다 — 한 번에 새 모드 추가 + 기존 변수 업데이트가 가능합니다.

일괄 추가 / 삭제

  • 추가: 그리드 하단 + Add row 또는 paste 시 새 변수가 자동 행 추가.
  • 삭제: 행 우측 휴지통 아이콘. 다중 선택 → batch delete (Shift/Cmd 클릭).

Export 형식

형식용도
DTCGDesign Tokens W3C 공식 형식. 다른 도구와 호환.
CSS variables코드에 바로 사용. :root { --color-primary: #1f7a3a; }.
JSONflat key-value 또는 nested. 자체 빌드 파이프라인용.
CSV시트로 다시 보낼 때. paste 라운드트립 가능.

import는 같은 4 형식을 자동 감지합니다 (확장자 + 첫 줄 검사).

Figma sync 주의

현재 그리드 변경사항은 plugin이 다음에 실행될 때 Figma Variables에 반영됩니다. 즉시 반영(웹 → Figma) 은 후속 phase 작업입니다.

다음 단계: FAQ