“컬러를 변수로 관리한다”는 말을 들어봤다면 디자인 토큰의 절반은 이해한 셈이다. 디자인 토큰은 색상, 타이포그래피, 간격, 보더 반경, 그림자 같은 시각적 속성에 이름을 붙여 저장하는 방법이다. 브랜드 블루를 “#0057FF”로 쓰는 대신 color.brand.primary라는 이름으로 쓰는 식이다. 이 이름은 Figma 변수, CSS 변수, JSON 파일 어디에서나 같은 색을 가리키는 공통 언어가 된다.
1. 토큰이 없을 때, 있을 때
브랜드 컬러를 바꾸는 상황을 생각해보자. 토큰이 없으면 Figma의 모든 요소와 모든 CSS를 일일이 찾아 바꿔야 한다. 실수가 생기기 쉽고 시간이 많이 걸린다.
토큰이 없을 때
Figma에서 모든 요소의 색상을 찾아 바꾸고, 개발자가 모든 CSS에서 다시 찾아 바꾼다. 누락과 실수가 잦다.
토큰이 있을 때
color.brand.primary 값을 한 곳에서 바꾸면 Figma 파일과 코드베이스 전체에 자동으로 반영된다.
2. 디자인 토큰의 계층 구조
토큰은 세 층으로 쌓인다. 이 계층이 갖춰져야 진짜 유연한 디자인 토큰 시스템이 된다.
기본 토큰(Primitive) — color.blue.500 = #0057FF처럼 원시 값에 이름을 붙인다.
시맨틱 토큰(Semantic) — color.action.primary = color.blue.500처럼 “이 색이 어디에 쓰이는가”를 정의한다.
컴포넌트 토큰 — button.primary.background = color.action.primary처럼 컴포넌트 단위로 연결한다.
Figma에서 디자인 토큰 시작하기
Figma Variables(2023년 도입)가 디자인 토큰의 Figma 구현이다. Color, Number, String, Boolean 타입으로 변수를 만들고 컴포넌트에 연결하면 된다.
Figma Variables
Figma 안에서 토큰을 정의하고 컴포넌트에 직접 연결한다.
Tokens Studio
무료 플러그인으로 코드와의 연동을 돕는다.
Style Dictionary
오픈소스 도구로 웹·iOS·Android용 코드를 자동 생성한다.
💡 실무 포인트 — 네이밍은 값 기반(blue-500)보다 용도 기반(color-background-primary)으로 잡아야 한다. 그래야 나중에 리브랜딩이나 다크모드 대응 때 토큰 이름을 바꾸지 않고 값만 교체할 수 있다. 가장 반복 사용되는 색상, 타이포그래피, 간격 세 카테고리부터 토큰화하는 것이 현실적인 출발점이다.
팀에 디자인 토큰을 정착시키는 방법
토큰은 만드는 것보다 쓰게 만드는 것이 어렵다. 디자인 크리틱에서 “이 파란색”이 아니라 토큰 이름으로 소통하고, 코드 리뷰에서 하드코딩된 색상값이 발견되면 토큰 사용으로 수정을 요청하는 규칙을 합의하자. 처음에는 번거롭지만 두어 스프린트만 지나면 디자이너와 개발자가 같은 어휘로 대화하는 것이 기본값이 된다.
3. 스타일 가이드에서 토큰으로 — 무엇이 달라졌나
디자인 토큰 이전에도 브랜드 값을 정리해두는 문서는 늘 있었다. 다만 그 형태가 PDF나 Sketch 심볼 같은 정적 문서였다는 점이 문제였다. 디자이너는 문서를 보고 값을 눈으로 옮겨 적었고, 개발자는 같은 값을 코드에 따로 하드코딩했다. 두 값이 같은 출처에서 나왔다는 사실은 문서에만 남아 있었고, 시간이 지나면서 조금씩 어긋나기 시작했다. Figma Variables 같은 기능이 도입되기 전까지, 이 간극을 메우는 일은 전적으로 사람의 꼼꼼함에 의존했다.
토큰이 바꾸는 것은 바로 이 지점이다. 값이 문서가 아니라 실제로 참조되는 소스에 저장되기 때문에, 디자인 파일과 코드베이스가 말 그대로 같은 값을 공유하게 된다. 스타일 가이드가 “참고 자료”였다면, 토큰은 “실행되는 자료”에 가깝다.
전통적 스타일 가이드
PDF·문서로 값을 공유하고, 디자인과 코드가 각자 하드코딩한다.
토큰 기반 시스템
디자인 파일과 코드가 같은 값을 실시간으로 참조한다.
실무의 균형점
전면 전환보다 자주 바뀌는 값부터 순서대로 토큰화한다.
⚠️ 흔한 오해 — 작은 프로젝트에는 토큰이 과한 작업이라는 오해가 있다. 그러나 색상 서너 개, 간격 몇 단계만 있어도 값 대신 용도로 이름을 붙이는 습관 자체가 핵심이다. 프로젝트가 커진 뒤 토큰을 소급 적용하는 것보다, 작을 때부터 이름 붙이는 습관을 들이는 쪽이 훨씬 적은 노력으로 끝난다.
토큰 도입 첫 주에 할 일
거창한 시스템을 한 번에 구축하려 하지 않아도 된다. 첫 주에는 다음 정도면 충분하다.
가장 자주 쓰는 색상 팔레트부터 용도 기반 이름을 붙인다.
간격 값을 8의 배수 같은 단순한 규칙으로 통일한다.
Figma Variables와 코드 변수를 1:1로 매핑한 표를 만들어 공유한다.
하드코딩된 값 하나를 찾아 토큰으로 바꿔보는 연습을 팀과 함께 해본다.
4. 마치며
디자인 토큰에 대한 이해는 실천에서 온다. 오늘 이 글에서 한 가지만 골라 지금 진행 중인 작업에 바로 적용해보자. 그 작은 실험이 진짜 이해의 시작이다.
Design Daily Life · 디자인의 일상을 기록합니다