핵심 아이디어
Figma의 디자인 시스템에서 Primitive variables(기본 변수)와 Semantic variables(의미적 변수)를 구분하여 사용함으로써 확장 가능하고 유지보수 가능한 디자인 토큰 시스템을 구축할 수 있다.
요약
Primitive variables는 색상(#CC0000), 크기(8px) 등의 기본 값을 정의하며, 숫자 기반의 이름(예: blue45, size-8)을 사용하는 것이 확장성에 유리하다. Semantic variables는 이러한 primitive variables를 참조하여 의미 기반으로 명명(예: color-warning, space-medium)되며, 다크/라이트 모드와 같은 다중 테마를 효율적으로 지원한다.
견해
이러한 이중 구조는 디자인 토큰의 관리를 단순화하고, 디자인 시스템이 성장함에 따라 새로운 요소를 쉽게 추가할 수 있게 해준다. 특히 숫자 기반 네이밍은 추후 확장성 측면에서 “small, medium, large”와 같은 추상적 이름보다 훨씬 실용적이다.
출처
Optimising the design system with Figma’s variables | UX Collective