그래서 디자인 토큰(Design Token)이 먼데? 피그마 Variable이랑 무슨 관계야?

 

안녕하세요! 찐망고 입니다.

혹시 디자인 토큰에 대해서 들어보신분 🤚

 

이전포스팅에서 Variable에 대해서 이야기하면서 나온게 토큰이죠?

 

피그마는 이젠 디자인과 개발 협업을 도와주는 프로그램으로 자리잡고 있어요.

HTML은 프로그래밍언어가 아니죠? 

CSS도 마찬가지죠 하지만 CSS는 은근 까다로운 친구란 말이죠.

쉽게 봤다가 뒷걸음질 몇번 쳐야해 

그리고 또 CSS도 꾸준히 새로운 기능이 추가돼서 놓치면..

하지만 모 어렵지는 않어 ㅋㅋ 

여튼,  CSS를 쓰기 불편했던 것 중에

하나가 반복되는 셀렉터와 반복되는 속성들 때문인것도 있거든요.

그래서 등장한게 SASS/LESS 같은 전처리기들인데..

여기서는 변수를 도입해서

$primary-color: #1A1A1A;

 

이렇게 한번만 정의해두고, 

필요할 때마다 불러다 쓰는 방식이죠.

 

이게 바로 토큰화의 시작이에요.

 

프론트엔드에서 이렇게 코드 중복을 줄이고 유지보수를 쉽게 했는데,

디자인에서도 똑같은 문제가 생기죠;

• 버튼 색상 하나만 바꿔도 전체를 바꿔야 하는 상황
• 라이트/다크 모드 같이 상황에 따라 값을 적용해야 하는 경우
• 모바일/PC같은 반응형 디자인에서 속성을 관리해야 하는 경우

여기서 등장한 개념이 디자인 토큰입니다.

 

디자인토큰 예시 이미지 (출처: KRDS)

 

디자인 토큰은 결국 디자이너랑 개발자가 같은 언어를 쓰게 해주는 최소 단위 값이에요.
개발자는 --primary-color: #1A73E8; 이런 CSS 변수를 쓰고,

디자이너는 Figma Variable에서 Primary/Blue 같은 토큰을 쓰지만,

사실 둘 다 같은 개념이거든요.

이게 왜 좋냐면, 라이트/다크 모드 전환할 때나 반응형에서 속성 바꿀 때,

값을 일일이 찾아서 고치는 게 아니라 토큰만 갈아끼우면 되니까 유지보수가 미쳤죠 

 

특히 Figma Variable은 그냥 색상만 저장하는 게 아니라,

• 타입(Color, Number, String, Boolean) 다 지원하고
• Collection 단위로 묶어서 관리할 수 있고
• Mode로 라이트/다크, 모바일/데스크탑 스위칭까지 가능하니까

그냥 툴 안에서 바로 디자인 토큰 시스템을 쓸 수 있게 된 거예요.

 

지난번에 Variable이랑 Style 차이 이야기했었는데,

사실 그 뒤에 깔려 있는 기본 철학이 바로 이 디자인 토큰이에요.
Style은 속성 Set, Variable은 값, 그리고 그 값들을 묶어 시스템화한 게 토큰.

결국 디자인 토큰을 잘 정의해두면 → Variable로 관리 → Style과 Variant에 적용 → 개발에 그대로 이어집니다.
이게 지금 피그마가 협업툴로 진화하는 이유라고 보면 됩니다.

 

결국 중요한 건 토큰을 어떻게 정의하느냐예요.
팀마다 컬러, 간격, 타입 스케일을 잘 정리해두는게 좋겠죠?