토큰 그래프와 토큰 맵

토큰은 서로를 참조합니다 — 시맨틱 색이 원시값을 가리키고, 컴포넌트 토큰이 그 시맨틱 색을 가리킵니다. variable Jar는 이 참조 관계를 두 화면으로 보여줍니다. 토큰 그래프는 “이 토큰을 바꾸면 무엇이 함께 바뀌는가”에 답하고, 토큰 맵은 프로젝트 전체를 한 장의 그림으로 펼칩니다.

그래프 열기

• 프로젝트를 열고 왼쪽 레일에서 토큰 그래프 탭을 선택합니다.
• 마스터 그리드에서 변수를 우클릭해 참조 관계 보기를 고르면, 그 토큰이 선택된 채로 그래프가 열립니다.
• 화면은 위아래로 나뉩니다 — 위는 레벨 트리, 아래는 요약보기입니다. 경계를 드래그해 높이를 조절하고, 더블클릭하면 자동 배분으로 돌아갑니다.

레벨과 색 기준

트리는 모든 토큰을 “직접 값에서 얼마나 떨어져 있는가”로 줄 세웁니다.

• 레벨 0은 아무것도 참조하지 않는 원시값입니다. 레벨 1은 레벨 0을, 레벨 2는 레벨 1을 참조하는 식으로 이어집니다. 열 헤더에 레벨과 토큰 수가 표시되고, 마우스를 올리면 타입 구성과 그 열이 원시값인지 참조인지 보입니다.
• 참조가 하나도 없으면 전체 토큰 열 하나만 있고 참조 관계 없음으로 표시됩니다.
• 토큰은 이름 접두어로 묶입니다. 그룹 행을 클릭하면 멤버가 펼쳐지고, 행의 ↔ N은 연결 수입니다. 열 헤더에 마우스를 올리면 − / + 스테퍼(묶음 깊이 줄이기 / 묶음 깊이 늘리기)가 나타나 그 열의 묶음 깊이를 바꿉니다 — 이름에 하위 경로(a/b/c)가 있는 열에서만 나타납니다.
• 행에 마우스를 올리면 연결된 선만 밝아지고 나머지는 흐려집니다.
• 툴바의 색 기준은 토큰 앞에 상태 점을 칠합니다 — 없음, Figma에 없음(웹에서 만들어 아직 Figma에 없는 토큰), 스코프 중 하나입니다. 고르면 열 헤더에 개수 칩(색 점과 숫자, 이름은 툴팁)이 붙습니다 — 스코프는 스코프 지정 · 전체 · 숨김 · 미수집 각각, Figma에 없음은 해당 개수 칩 하나입니다 (변수 메타데이터 참고).

영향 요약

토큰을 클릭하면 오른쪽 아래에 요약 패널이 나타납니다.

• 바꾸면 N개 영향 — 이 토큰을 쓰는 토큰의 수입니다. 직접·간접 사슬을 끝까지 따라간 값이라, 값을 고치기 전에 확인할 숫자입니다.
• 참조하는 값 N개 — 이 토큰의 값이 나오는 출처 토큰의 수입니다. 직접 참조한 값과 그 값의 출처까지 셉니다.
• 트리 아래 요약보기는 선택한 토큰 주변의 사슬을 그립니다 — 왼쪽이 참조하는 값, 오른쪽이 이 토큰을 쓰는 곳, 가운데가 그 토큰입니다. 사슬 안의 토큰을 클릭하면 그 토큰의 경로만 강조되고, 한 번 더 클릭하면 강조가 풀립니다. 참조가 없는 토큰은 참조 관계가 없는 토큰입니다로 표시됩니다.
• 포커스 스위치를 켜면 사슬 안의 토큰을 클릭할 때 그 토큰이 새 중심이 되고 관련 없는 토큰은 표시되지 않습니다. 끄면 클릭은 강조만 합니다.
• 패널의 태그 색 점으로 살펴보는 중에 토큰을 색으로 표시해 둘 수 있습니다 — 그리드 태그 열과 같은 태그입니다.
• 경계선에 마우스를 올리고 요약보기 접기 손잡이를 누르면 요약보기가 얇은 요약보기 바로 접히고, 그 바를 클릭(요약보기 펼치기)하면 다시 열립니다. 선택한 토큰의 패널은 접어도 남습니다.

이동과 되돌아가기

• 제목 옆 ‹ / › 버튼은 브라우저의 뒤로·앞으로처럼 살펴본 토큰 사이를 오갑니다. 단축키는 [(이전에 본 토큰)과 ](다음 토큰)이며, 입력란에 타이핑 중일 때는 동작하지 않습니다.
• 요약보기의 빈 공간을 드래그하면 화면이 이동하고, 휠로도 이동합니다. 빈 공간을 더블클릭하면 가운데로 돌아오고, 이동한 뒤 왼쪽 아래에 나타나는 가운데로 버튼도 같은 동작입니다.
• 마스터에서 열기는 이 토큰이 선택된 마스터 그리드를 엽니다. 그리드에 토큰 그래프로 돌아가기 토스트가 남아 한 번의 클릭으로 되돌아옵니다. Cmd+클릭하면 새 창에서 엽니다.
• 토큰 맵에서 열기는 같은 토큰이 선택된 토큰 맵으로 건너갑니다. 맵의 토큰 그래프에서 열기로 돌아오면 그래프에 토큰 맵으로 돌아가기 토스트가 남습니다.

순환 참조

자기 자신으로 되돌아오는 alias 사슬은 풀 값이 없습니다. variable Jar는 그런 사슬이 생기지 않게 막고, 이미 있는 고리는 그래프에서 보여줍니다.

• 그리드에서 고리를 만들게 될 alias는 피커에서 순환 참조가 되어 선택할 수 없습니다로 거부되고, 붙여넣기는 해당 셀을 건너뜁니다 — 순환 참조 N개 셀 건너뜀.
• 고리가 이미 있으면 그래프에 빨간 순환 참조 열이 추가됩니다. 고리의 멤버는 원 둘레에 놓이고 화살표가 그 위를 돕니다. 원에 마우스를 올리면 경로가 보이고, 멤버를 클릭하면 그 토큰이 선택됩니다.
• 원 아래의 물린 토큰 N — 값을 풀 수 없음은 고리에 속하지는 않지만 고리를 가리키는 토큰 목록입니다 — 이들도 값을 풀 수 없습니다.
• 고리의 멤버 하나에 직접 값을 넣으면 해결됩니다 — 고리 중 하나에 직접 값을 넣으면 전체가 풀립니다.

토큰 맵

레일의 토큰 맵 탭은 프로젝트 전체를 한 번에 보여줍니다 — 토큰 하나가 점 하나, 참조 하나가 선 하나입니다. 그룹은 접힌 묶음으로 시작해 큰 프로젝트도 읽을 수 있습니다.

• 휠로 확대·축소합니다. 묶음을 클릭하면 열리고 다른 묶음은 접히며, Shift+클릭하면 여러 묶음을 함께 엽니다. 이름표의 ✕ 표시로 하나를 접고, Esc로 모두 접습니다. 토큰을 클릭하면 포커스됩니다.
• 헤더의 모든 타입 드롭다운은 다중 선택입니다 — 밝힐 타입을 고르고, 마지막 하나를 해제하면 모든 타입으로 돌아옵니다. 그 옆 태그 색 점은 그 태그가 붙은 토큰만 밝힙니다 — 프로젝트에 실제로 쓰인 색만 나타납니다.
• 미참조 숨기기는 연결이 없는 토큰을 치웁니다. 검색란(검색 — 일치만 밝히기)은 일치하는 토큰을 밝히고 나머지는 숨기지 않고 흐리게만 둡니다.
• 왼쪽 아래의 그룹 묶기는 묶음 표시를 켜고 끄며, 전체 보기는 지도 전체가 화면에 들어오게 합니다.
• 토큰을 클릭하면 정보 패널에 타입, 연결 N개, 가운데로 버튼, 참조하는 값 N과 이 토큰을 쓰는 곳 N 목록, 그리고 토큰 그래프에서 열기와 마스터에서 열기가 보입니다. 묶음을 클릭하면 묶음 배지와 토큰 수, 연결된 곳 N, 멤버가 보입니다.
• ‹ / › 버튼과 [ / ] 단축키는 그래프와 같은 방식으로 동작합니다.