그리드 사용법

마스터 그리드는 프로젝트의 마스터 탭에 있는 변수 편집 화면입니다. 행 하나가 변수 하나이고, 값 열은 모드(라이트/다크, 언어 등)마다 하나씩입니다. 그리드에서 고친 값은 플러그인의 동기화를 누를 때 Figma에 반영됩니다.

컬렉션과 그룹

• 그리드 왼쪽 사이드바의 컬렉션 목록에서 편집할 컬렉션을 전환하고, + 버튼(새 컬렉션)으로 새 컬렉션을 만듭니다. 컬렉션을 우클릭하면 이름 변경 / 이 컬렉션 내보내기 / 삭제가 있습니다.
• 사이드바의 컬렉션 헤더를 누르면 컬렉션 정렬 메뉴가 열립니다 — 만든 순서(기본) 또는 이름순 (A→Z). Figma 패널에서 직접 바꾼 컬렉션 순서는 플러그인이 읽을 수 없어 가져오지 못합니다.
• 변수 이름에 /를 넣으면 앞부분이 그룹이 됩니다 (예: color/primary → color 그룹). 사이드바의 그룹 트리에서 그룹을 고르면 그 그룹의 변수만 볼 수 있고, 전체를 고르면 다시 컬렉션 전체가 보입니다.

그룹 만들기 · 이름 바꾸기 · 옮기기

• 행을 선택하고 우클릭 선택으로 새 그룹 — 선택한 변수들이 새 그룹이라는 이름의 그룹으로 묶입니다. 이름은 사이드바에서 바로 바꿉니다.
• 사이드바의 그룹을 우클릭해 이름 변경을 고르면 그 그룹(하위 그룹 포함)에 속한 모든 변수의 경로가 함께 바뀝니다. 그 변수들을 참조하던 alias도 자동으로 따라옵니다. 그룹 이름은 비울 수 없고 /를 넣을 수 없습니다.
• 그리드의 이름 셀에는 마지막 이름만 보이고, 경로는 그룹 헤더가 보여줍니다. 더블클릭 편집도 마지막 이름만 바꿉니다 — 경로를 통째로 고치려면 우클릭 변수 편집의 이름 필드를 씁니다.
• 사이드바에서 그룹을 끌어 다른 그룹(또는 전체) 위에 놓으면 그 아래로 경로가 옮겨집니다. Ctrl(⌘)+Z로 되돌릴 수 있고, 다음 동기화 뒤 Figma에도 같은 경로가 됩니다. 자기 자신, 자신의 하위 그룹, 지금의 부모 그룹 위에는 놓을 수 없습니다.
• 그룹이나 변수의 순서를 끌어서 바꾸는 기능은 없습니다.

셀 편집

• 값 셀을 클릭하면 바로 편집할 수 있습니다. Enter로 확정하고 아래 셀로 이동, ESC는 원래 값으로 되돌립니다.
• 타입별 입력: 문자열 = 텍스트, 숫자 = 숫자 입력, 불리언 = 토글 스위치, 색상 = 색 피커 + hex 입력.
• 색상 셀은 Figma처럼 # 없는 hex와 알파 %를 나란히 보여줍니다. 짧게 쓰면 펼쳐지고(f → FFFFFF), 8자리는 뒤 2자리가 알파입니다 — 입력 힌트: “hex 6자리 또는 8자리(뒤 2자리 = 알파), 짧게 쓰면 펼쳐집니다(f → FFFFFF), {참조} 도 됩니다”. 색이 아닌 값은 저장되지 않고 셀을 나갈 때 되돌리며 “색이 아니라 되돌렸습니다: {value}” 토스트가 뜹니다.
• 색 피커에는 커스텀 / 라이브러리 탭이 있습니다. 라이브러리 탭에서 같은 컬렉션의 다른 색상 변수를 골라 참조(alias)로 연결하고, 화면에서 색 추출 버튼으로 화면의 색을 집어 옵니다.
• 다른 변수를 참조하는 셀은 칩으로 보입니다 — 칩에는 마지막 이름만 있고, 마우스를 올리면 전체 경로와 최종 값이 뜹니다. 칩을 클릭하면 피커가 다시 열려 다른 변수로 바꿀 수 있습니다.
• 문자열·숫자 변수도 참조를 걸 수 있습니다. 셀에 마우스를 올리면 나타나는 다른 변수에 연결 버튼으로 같은 타입의 변수를 고르고, 세 타입 모두 alias 해제 버튼으로 참조를 풀 수 있습니다 — 지금 풀리는 최종 값이 일반 값으로 남습니다.
• 순환 참조가 되는 선택은 피커에서 막힙니다 (“순환 참조가 되어 선택할 수 없습니다”). 붙여넣기에서도 고리를 만드는 셀은 건너뛰고 토스트로 알립니다 (“순환 참조 {count}개 셀 건너뜀”).
• 변수 이름은 이름 셀을 더블클릭해 바꿉니다.
• 셀에 코멘트를 남기려면 C를 누르고 셀을 클릭합니다 (코멘트 — “C 를 누르고 셀을 클릭하세요. Esc 를 누를 때까지 유지됩니다.”). 설명·태그·스코프 셀에도 남길 수 있습니다.

행 추가 · 삭제 · 복제

• 툴바 왼쪽 +(변수 추가)에서 타입(색상 / 숫자 / 문자열 / 불리언)을 고르면 그 자리에서 바로 행이 생기고 포커스가 잡힙니다. 이름을 먼저 입력하지 않아도 되고, 새 변수는 타입별 기본값을 가진 채 만들어집니다 — 이름은 그 자리에서 고치세요.
• 삭제는 행을 선택하고 Delete 키를 누르거나 우클릭 메뉴의 삭제를 씁니다.
• Shift+Enter — 단일 행에서는 바로 아래에 같은 타입의 새 행을 삽입하고, 여러 행을 선택한 상태에서는 선택한 행들을 복제합니다.
• 우클릭 메뉴의 복제로도 복제할 수 있습니다.
• 행 우클릭 메뉴: 복사 · 복제 · 변수 편집 · 선택으로 새 그룹 · 다른 컬렉션으로 이동 ▸ (컬렉션 목록 + 새 컬렉션) · 참조 관계 보기 · 이 컬렉션 내보내기 · 삭제.

다른 컬렉션으로 이동

• 행을 선택하고 우클릭 다른 컬렉션으로 이동 하위 메뉴에서 대상 컬렉션을 고르거나 새 컬렉션을 고릅니다. 두 컬렉션의 모드 이름이 같으면 바로 옮겨집니다.
• 모드가 다르면 {collection}(으)로 이동 창이 열리고 어느 값을 남길지 판이 나옵니다. 지금 컬렉션의 모드마다 대상 모드 열 중 하나에 자리를 정하거나 버림을 고릅니다. 자리를 정하지 않은 모드가 있으면 버튼이 잠기고 “자리를 정하지 않은 모드: {modes}“로 알려줍니다. 버튼은 이동, 값을 버리는 선택이 있으면 {count}개 버리고 이동으로 바뀝니다 — 별도의 확인 창은 없습니다. 기본 배치로 되돌리기로 처음 배치로 돌아갑니다.
• 옮기고 나면 “변수 {count}개 → {collection} 이동” 토스트가 뜨고 되돌리기로 즉시 되돌릴 수 있습니다.
• Figma 파일이 연결된 프로젝트에서는 창에 “다음 Sync에서 Figma 레이어를 다시 연결합니다. 연결하지 못한 것은 행에 표시됩니다.”가 표시됩니다. 옮긴 행에는 Figma 이동 대기 배지가 붙어 있다가 플러그인에서 동기화를 누르면 Figma 쪽 변수가 새 컬렉션에 만들어지고 레이어가 다시 연결됩니다.

다중선택 — 두 가지 모드

행 선택 (행 전체 하이라이트) — 행 단위 작업용:

• Shift+클릭: 마지막 선택 행부터 범위 선택
• Ctrl(⌘)+클릭: 개별 행 추가/해제
• Shift+Ctrl(⌘)+↑↓: 키보드로 확장
• 가능한 작업: 우클릭 복사(이름과 모드 포함) / 복제 / 삭제, Delete 키 삭제, Shift+Enter 복제, 선택으로 새 그룹, 다른 컬렉션으로 이동

셀 범위 선택 (점선 테두리) — 값 일괄 작업용:

• 값 셀을 클릭해 시작점을 잡고, Shift+클릭 또는 Shift+화살표로 직사각형 범위를 확장
• 가능한 작업: 일괄 입력, Ctrl(⌘)+C 복사, Delete로 값 비우기

일괄 입력

셀 범위를 선택한 채 값을 입력하기 시작하면 시작 셀에서 바로 편집할 수 있고, Enter를 누르면 그 값이 선택한 모든 셀에 한 번에 들어갑니다.

복사 & 붙여넣기

그리드의 값은 Google Sheets · Excel과 복사/붙여넣기로 주고받을 수 있습니다. 시트에서 복사한 표를 그리드에 붙여넣고, 그리드에서 복사한 값을 다시 시트로 옮깁니다.

복사:

• 셀을 두 개 이상 선택하고 Ctrl(⌘)+C — 선택한 값을 복사합니다.
• 행을 선택하고 우클릭 복사 — 변수 이름과 모드까지 함께 복사합니다. 시트에 붙여넣으면 그대로 표가 됩니다.

붙여넣기 (Ctrl(⌘)+V): 시트에서 복사한 표를 그리드에 그대로 붙여넣습니다. 붙는 위치는 두 가지로 갈립니다.

• 값 셀을 클릭해 둔 상태 — 그 셀부터 오른쪽·아래로 채웁니다. 표를 넘어가는 행과 열은 건너뜁니다.
• 선택한 셀이 없는 상태 — 첫 줄을 제목 줄로 보고, 변수 이름과 모드 이름이 같은 행을 찾아 값을 갱신합니다. 그리드에 없는 변수 이름은 새 행으로 만들어집니다 (토스트에 “신규 변수 {count}개”로 표시). 이름이 맞지 않는 열은 건너뜁니다.

어느 쪽이든 몇 개를 채우고 몇 개를 건너뛰었는지 토스트로 알려줍니다. 순환 참조가 되는 셀은 건너뜁니다.

값 셀을 잡고 붙여넣는 방식은 기존 행만 채웁니다 — 새 변수를 함께 만들려면 셀 선택을 풀고 제목 줄이 있는 표를 붙여넣거나, +(변수 추가)로 먼저 행을 만드세요. 검색이나 필터가 켜져 있으면 화면에 보이는 행만 대상이 됩니다.

Undo / Redo

Ctrl(⌘)+Z 실행 취소, Ctrl(⌘)+Shift+Z 다시 실행 (최대 50단계). 툴바 버튼도 있습니다. 편집 · 삭제 · 붙여넣기 · 일괄 입력 · 그룹 이름 변경·옮기기 모두 되돌릴 수 있습니다.

모드(열) 관리

• 마지막 모드 헤더 오른쪽 끝의 + 버튼(모드 추가)으로 모드를 추가합니다. 플랜의 언어 한도에 도달하면 업그레이드 안내가 뜹니다.
• 모드 헤더 더블클릭으로 이름 변경, 우클릭 메뉴에서 이름 변경 / 삭제. 마지막 남은 모드는 삭제할 수 없습니다.
• 열 경계를 드래그해 폭을 조절합니다 — 조절한 폭은 다음에 다시 열어도 그대로입니다.

찾기와 정렬

상단 툴바에 검색창과 타입 필터(모든 타입 · 색상 / 문자열 / 숫자 / 불리언)가 있습니다. 이름 · 설명 · 태그 · 스코프 헤더를 클릭하면 그 열로 정렬하고, 다시 누르면 방향이 바뀝니다. 정렬은 각 그룹 섹션 안에서만 적용됩니다 — 그룹 섹션 자체의 순서는 그대로입니다.

툴바의 보기 — 열·색 기준 버튼에서 모드 · 설명 · 태그 · 스코프 열을 켜고 끕니다 (메뉴가 열린 채 여러 열을 연속 토글) — 변수 메타데이터에서 다룹니다.

단축키 표

토큰 그래프

프로젝트의 토큰 그래프 탭은 변수 간 참조(alias) 관계를 단계별로 보여주고, 토큰 맵 탭은 프로젝트 전체를 한 장의 지도로 펼칩니다. 그래프에서 토큰을 클릭하면 “바꾸면 {count}개 영향”과 “참조하는 값 {count}개”가 요약으로 나와 수정 전에 파급 범위를 확인할 수 있습니다. 그리드에서는 행 우클릭 참조 관계 보기로 바로 넘어갑니다. 자세한 사용법은 토큰 그래프를 참고하세요.

데이터 내보내기

웹에서 바로 내보낼 수 있습니다 — 프로젝트 카드의 ⋮ 메뉴 내보내기, 또는 사이드바 컬렉션·그리드 행 우클릭 이 컬렉션 내보내기. DTCG · JSON · CSV · CSS · SwiftUI · Jetpack Compose 여섯 형식을 고를 수 있으며, 자세한 내용은 코드로 내보내기에 있습니다. Figma 플러그인의 더 보기(…) → 내보내기로도 파일을 받을 수 있습니다. 코드나 CI에서 디자인 토큰을 가져가려면 read-only API와 MCP 서버를 사용할 수 있습니다.