Flattened Token 제거를 통한 Typography 의존성 그래프 복원 및 유지보수 효율화

Stop flattening your typography tokens: Preserving bound aliases in W3C exports

Alexander2026년 6월 3일7분intermediate

AI 요약

Context

Figma 변수를 JSON으로 export하는 과정에서 Semantic Link가 손실되어 하드코딩된 값이 생성되는 Flattening 문제 발생. 이로 인해 폰트 변경 시 142개 파일의 모든 토큰을 개별 수정해야 하는 유지보수 병목 현상 직면.

W3C Typography Composite Token 사양을 적용한 Alias 기반의 참조 구조 설계
Figma Plugin API의 boundVariables 속성을 통해 Raw Value 대신 Variable ID를 추출하는 로직 구현
resolveVariableAlias 함수를 통한 Variable ID의 W3C 표준 Alias 문자열({font.family.primary}) 변환 처리
Figma 전용 Line Height(Pixel/Percent) 단위를 CSS 표준인 Unitless 또는 rem 단위로 변환하는 Normalization Layer 도입
Letter Spacing의 Percentage 단위를 em 단위로 변환하여 폰트 크기에 따른 상대적 스케일링 확보
내부 컬렉션 이름을 제거하여 프로덕션 코드의 오염을 방지하는 필터링 메커니즘 적용

실천 포인트

1. Design Token export 시 Value가 아닌 Reference(Alias)가 유지되는지 확인

2. 디자인 툴의 특수 단위(Pixel, %)를 CSS 표준 단위(em, unitless)로 변환하는 Normalization 단계 검토

3. Token Dictionary 내에서 정적 값 대신 W3C 표준 $type: typography 형식을 채택하여 의존성 그래프 유지

태그