5분 빠른 시작

이 가이드는 설치하기를 마쳤다는 가정으로 시작합니다.

1단계 — Figma 파일 준비 (30초)

아무 Figma 파일에서:

1. 좌측 패널의 Local variables 패널을 확인합니다.
2. 새 collection이 없다면 plugin이 자동으로 My Variables collection을 만들어줍니다.

2단계 — 첫 변수 추가 (1분)

plugin 그리드에서:

1. 빈 그리드에 행을 추가합니다 (+ Add row 또는 행 하단 클릭).
2. 행 이름을 입력합니다 (예: color/primary).
3. 모드 셀에 색을 입력합니다 — #1f7a3a 같은 hex 또는 색 픽커.

같은 변수가 즉시 Figma Local variables 패널에도 보입니다.

3단계 — 모드 추가 (1분)

여러 모드(라이트/다크 등)가 필요하다면:

1. plugin 그리드 우측의 + Add mode 클릭.
2. 모드 이름 입력 (dark).
3. 새 모드 셀에 다른 색 입력 — 변수가 모드별로 토큰을 가집니다.

4단계 — 웹 그리드에서 같은 데이터 보기 (30초)

1. 브라우저에서 variablejar.com/app에 같은 계정으로 로그인합니다.
2. 좀 전에 만든 collection과 변수가 그대로 보입니다.
3. 셀을 직접 편집하면 — 다음 plugin 실행 시 동기화됩니다 (Figma 안의 즉시 반영은 후속 phase).

5단계 — Export (1분)

DTCG 형식 토큰 JSON 또는 CSS variables가 필요할 때:

1. 그리드 상단 메뉴 → Export
2. 형식 선택 (DTCG / CSS / JSON / CSV)
3. 파일이 다운로드됩니다.

다음 단계: 그리드 사용법