디자인 토큰처럼 쓰는 피그마 Variable, Variant/Style과 비교해보기

 
안녕하세요 찐망고 입니다.
피그마에 Variable이라는 개념이 생겼는데 이걸 베리언트랑 같다고 인식을 하더라구요!
이건 아님..
구글에다가 피그마 베리에이블 치는데 자꾸 제 블로그 베리언트가 나온다면서
빨리 포스팅을 해야겠다고 마음먹고자 시작한 글입니다.
 
피그마에서 Variable은 디자인 속성을 값으로 저장해두고,
필요할 때 불러와서 일관되게 적용할 수 있는 기능을 뜻합니다.
예를 들어 색상 hex값 #F8F8F8를 직접 쓰는 대신 Gray/50 같은 이름으로 변수화해 두면,
나중에 변수값만 바꿔도 그 변수를 사용한 모든 디자인이 한번에 업데이트 되는것을 뜻합니다.
CSS의 클래스, JS의 변수랑도 비슷하죠?
 
Variable(변수)

• 값을 저장하고 재사용하는 개념 (색상, 간격, 수치, 문자열 등)
• 모드별(light/dark, 모바일/데스크탑) 값 스위칭 가능
• 디자인 토큰처럼 쓰임 → 유지보수/일괄 업데이트 강점
• 컴포넌트, 프레임 어디서든 불러다 쓸 수 있음

Variant (베리언트)

• 컴포넌트의 상태/버전을 관리하는 개념
• 버튼 예시: Primary / Secondary / Disabled / Hover 같은 변형들을 한 세트로 묶음
• 같은 속성(variant property)을 기준으로 여러 상태 전환 가능
• 목적 = 컴포넌트의 다양한 경우를 정리·스위칭

Variant는 UI 상태를 “버튼 Primary/Secondary, Hover/Disabled”처럼 한 컴포넌트 안에서 정리,
Variable은 디자인 속성값을 “Gray/50, 16px spacing, sm/lg breakpoint”처럼 따로 저장함.
 
즉, Variant는 컴포넌트 묶음의 ‘경우의 수’를, Variable은 디자인 시스템의 ‘기본 단위 값’을 다룸.

Variant

Variable

 
 
참고로 피그마의 Style과 비교해보면
Style은 
속성 자체를 저장하는 개념입니다.
색상스타일, 텍스트 스타일, Effect같은 것들
만약 텍스트 스타일이라면 폰트 + 크기 + 행간세트 같은
특정 속성을 하나의 세트로 만들어 놓고 불러다 쓰는걸 뜻하죠
변경하면 연결된 객체들이 바로 반영되구요.

style-1

style-2

 
Variable은 단일값을 저장하는 개념입니다.
폰트크기는 16, 색상은 Gray/50 이런식으로 말이죠.
light/dark, 모바일/데스크탑은 각각의 모드별로 다른 값을 할당 할 수도 있고
조건이나 상태에 따라 유연하게 쓰일 수 있죠.
 
즉 Style은 프리셋, Variable은 토큰이라고 생각하면 됩니다.

variable