2025-05-25
9 min read
Figma Variables를 효율적으로 관리할 수 있는 최적의 도구입니다.
[!note] 주요 기능
- 쉬운 Variables 내보내기: 복잡한 변수를 간단하게 시트로 변환
- 쉬운 Variables 가져오기: 시트 데이터를 Figma로 한 번에 임포트
- 직관적인 Variables 편집: 시트에서 편집 후 바로 적용
- Variables Alias 지원: 별칭 기능으로 더 유연한 관리
- 다국어 지원: 영어, 한국어 (추가 언어 업데이트 예정)
- 다양한 파일 형식: JSON(전체 컬렉션), CSV 저장 지원
1. 빠른 시작 가이드
1. Variables 내보내기
- 내보내기 탭 선택
- 내보낼 컬렉션 선택
- 복사 버튼 클릭
- 클립보드에 데이터가 복사됩니다
2. 구글 시트에서 편집하기
- 구글 시트에서 A1 셀 클릭 후 붙여넣기 (
Ctrl+V또는Cmd+V) - 첫 번째 헤더 행은 편집하지 마세요
- 두 번째 행(D2)부터 데이터를 편집합니다
3. Variables 가져오기
- 편집한 시트 데이터를 전체 선택 (
Ctrl+A) 후 복사 (Ctrl+C) - variables2sheets 플러그인의 가져오기 탭 클릭
- 데이터 입력 상자에 붙여넣기 (
Ctrl+V) - 가져오기 버튼 클릭하여 완료
2. 고급 사용법
[!warning] 중요: 첫 번째 행의 헤더 레이블(Collection, Key, Type)은 수정하지 마세요.
컬렉션 관리
- A열: 아이템의 컬렉션 위치
- 컬렉션명을 수정하면 해당 컬렉션으로 아이템이 이동됩니다
- 존재하지 않는 컬렉션명 입력 시 새 컬렉션을 자동 생성합니다
키 구조 편집
- B열: Variables의 그룹 구조
- 슬래시(
/)로 계층 구조를 표현합니다 - 마지막 레이블이 실제 Variable 이름이 됩니다
- 예:
color/primary/main→main이라는 이름의 변수
타입 변경
지원하는 타입: String, Color, Number, Boolean
- C열에서 타입을 수정하면 Import 시 해당 타입으로 적용됩니다
데이터 편집
- D열 이후: 실제 데이터 값
- 각 타입에 맞는 형식으로 입력하세요
- Alias 지원:
{collection/key}형식으로 별칭 설정 가능
모드 관리
- Type 컬럼 이후(D1~): 각 컬럼이 Collection의 Mode에 해당
- Mode명 수정 시 새로운 Mode가 추가됩니다
- Figma Pro: 최대 4개 Mode 지원
- 무료 버전: 1개 Mode만 사용 가능
3. 파일 저장 옵션
JSON 저장
- 전체 컬렉션을 JSON 형식으로 내보내기
- 백업 및 버전 관리에 유용
CSV 저장
- 선택한 컬렉션만 CSV로 내보내기
- 외부 도구와의 호환성 확보
설정 방법: Export 탭 → 고급 옵션에서 원하는 형식 선택
4. Pro Tips 🎯
- Alias 활용: Export 시 고급 옵션에서 'Alias 사용' 체크박스를 해제하면 실제 값으로 내보낼 수 있습니다
- 일괄 편집: 여러 변수의 타입이나 값을 한 번에 수정할 때 시트의 자동 채우기 기능을 활용하세요
- 백업 습관: 중요한 작업 전에는 항상 JSON 형식으로 백업을 생성하세요
