1. 디자인 토큰(Design Tokens)이란?
디자인 토큰은 색상, 텍스트 크기, 간격, 그림자 등 시각적 속성 값을 추상화하여 이름으로 관리하는 디자인 시스템의 핵심 구성 요소다.
이는 마치 "디자인을 위한 변수"로서, 코드와도 쉽게 연동된다.
예시:
속성값토큰 이름
| 색상 | #0055FF | color.primary |
| 폰트 크기 | 16px | font.size.body |
| 여백 | 8px | spacing.sm |
장점:
- 디자인 변경 시 전체에 일괄 반영 가능
- 디자이너와 개발자 간의 공통 언어
- JSON, SCSS, Android, iOS 등으로 변환 가능
구현 방법:
- 기본적으로 Figma의 스타일(Styles) 기능을 활용해 색상, 텍스트, 효과를 구성
- 고급 사용자는 Tokens Studio (Figma Tokens) 플러그인을 사용하여 JSON 기반으로 관리
일반적으로 쓰이는 토큰 구조 이름들
대부분의 디자인 시스템이 아래 3단계 구조로 개념을 나누지만, 정확한 명칭은 다양합니다:
개념적 수준일반적인 명칭다른 표현
| 기초 값 | System Tokens / Base Tokens | Raw Tokens, Primitive Tokens, Foundational Tokens |
| 의미 기반 | Semantic Tokens | Alias Tokens, Themed Tokens, Role-based Tokens |
| UI에 직접 적용 | Component Tokens | Object Tokens, Applied Tokens, Usage Tokens |
1️⃣ System Tokens (기초 값)
- 의미 없는 절대값 자체 (#FFFFFF, 16px 등)
- 어떤 디자인 시스템이든 반드시 포함되는 하위 레벨
- 이름 예: color.blue.500, spacing.4, font.size.16
✅ Material 3에선 "base tokens" 라고 부르기도 함
2️⃣ Semantic Tokens (의미 기반)
- UI 역할/용도에 따라 추상화된 이름 (예: color.primary, text.body)
- 시스템 토큰을 재참조(alias) 하며, 주로 다크/라이트 테마 변경에 대응
- 이름 예: color.background.surface, spacing.button.padding
✅ Salesforce에서는 "alias tokens",
✅ Shopify Polaris에서는 "semantic tokens"
3️⃣ Component Tokens (컴포넌트 연결)
- 실제 버튼, 카드, 입력창 등 UI 컴포넌트에 연결된 값
- 사용 목적에 따라 분기되는 최종 사용 지점
- 이름 예: button.primary.bg, input.label.fontSize
✅ IBM Carbon Design에서는 이를 "component-specific tokens" 또는 **"usage tokens"**이라 부름
왜 명칭이 다른가?
- 디자인 시스템은 브랜드 특성, 조직 문화, 개발환경에 따라 표현 방식이 유연해야 함
- 모든 시스템이 동일한 레벨명을 쓰진 않지만, 개념 자체는 유사
- 가장 중요한 건 내부에서 일관성 있는 네이밍 체계와 레벨 구조를 유지하는 것
요약: 추천 레벨 명칭
추천 구조설명
| System Token | 의미 없는 절대 값 (색상, 크기 등) |
| Semantic Token | 의미 기반 값 (역할, 테마에 따라 달라짐) |
| Component Token | UI 요소에 직접 적용되는 토큰 |
디자인 토큰 계층 구조: System → Semantic → Component
System Tokens (시스템 토큰)
→ 디자인 속성의 가장 기본적인 원자값 (Raw Values)
- 색상, 크기, 간격, 폰트 크기 등 절대적인 스타일 값 자체
- 하드코딩된 값이 아닌, 모든 토큰의 기초 단위
특징
항목내용
| 목적 | 재사용 가능한 원자값 정의 |
| 위치 | 가장 하단 (Foundation Layer) |
| 사용 | 다른 상위 토큰들이 이 값을 참조함 |
Semantic Tokens (시멘틱 토큰)
→ 이름에서 용도를 알 수 있는 의미 기반 변수
- **"디자인 목적"**을 반영한 중간 단계의 토큰
- 시스템 토큰을 참조하여 용도에 따라 이름을 붙임
- 다양한 테마(다크/라이트 모드 등)에서 다른 시스템 값으로 매핑될 수 있음
특징
항목내용
| 목적 | 디자인 용도에 따라 명명된 변수 |
| 위치 | 중간 계층 |
| 유연성 | 다크/라이트 테마별로 다른 시스템 토큰과 매핑 가능 |
Component Tokens (컴포넌트 토큰)
→ 실제 UI 컴포넌트에 적용되는 최종 스타일 정의
- 버튼, 카드, 모달 등의 디자인 요소에 직접 연결되는 변수
- 대부분 Semantic 토큰을 참조하여 적용
특징
항목내용
| 목적 | UI 컴포넌트에 직접 사용되는 변수 |
| 위치 | 최상위 계층 |
| 적용 위치 | 버튼, 텍스트 필드, 네비게이션 등 실 사용 컴포넌트에 연결됨 |
요약 구조 (계층 시각화)
왜 계층 구조가 중요한가?
장점설명
| 일관성 | 모든 컴포넌트가 동일한 토큰에 의존하므로 통일성 유지 |
| 유지보수성 | 값이 바뀌어도 최상단 컴포넌트에 한 번에 반영 가능 |
| 테마 대응 | Semantic Token만 변경하면 전체 테마 변경 가능 |
| 협업 효율 | 디자이너와 개발자 간에 "이름 기반"으로 커뮤니케이션 가능 |
2. Figma 베리어블(Variables)이란?
Figma에서 2023년 도입된 **Variables(변수)**는
디자인 토큰의 기능을 더욱 확장한 Figma 자체 내장 기능이다.
디자인 값(색상, 숫자, 텍스트 등)을 변수로 저장하고, 컴포넌트, 프로토타입, 모드 전환 등에 직접 활용할 수 있다.
Variable의 4가지 유형:
유형설명예시
| Color | 색상 변수 | color.primary = #0055FF |
| Number | 숫자 변수 | spacing.md = 16 |
| Boolean | 논리값 | isDark = true |
| String | 문자열 | label.button = "구매하기" |
디자인 토큰 vs 베리어블 차이
항목디자인 토큰Figma 베리어블
| 저장 형태 | 스타일 or 플러그인 (ex. Tokens Studio) | Figma 자체 기능 |
| 적용 대상 | 스타일로 요소에 적용 | 스타일, 컴포넌트, 프로토타입까지 적용 가능 |
| 모드 지원 | 미지원 (수동 전환) | ✅ 다크/라이트 등 모드 전환 자동 적용 |
| 협업성 | 외부 연동(Style Dictionary 등 필요) | Figma 내부에서 디자이너 간 실시간 공유 |
| 주요 사용 예 | 색상, 텍스트 스타일 관리 | 반응형 레이아웃, 테마 스위칭, 컴포넌트 변수화 등 |
실무 예시
색상 테마 전환
- 디자인 토큰: color.background = #FFFFFF
- Figma Variable:
- Light 모드: color.bg = #FFFFFF
- Dark 모드: color.bg = #1A1A1A
- → 컴포넌트에 bg = color.bg 연결하면, 모드 전환 시 자동으로 색상 변경됨
베리어블의 주요 기능
기능설명
| 재사용성 | 여러 요소에서 같은 변수 사용 가능 – 변경 시 전체 자동 반영 |
| 모드 지원 | 다크/라이트 등 여러 모드에 다른 값을 설정 가능 |
| 컴포넌트 통합 | 텍스트, 색상, 간격, Boolean 속성 등에 변수 연결 가능 |
| 프로토타입 변수 | 사용자 인터랙션에 따라 변수 값을 바꿀 수 있음 (예: 버튼 누르면 색상 바뀜 등) |
| 디자인 토큰 역할 | 디자인 토큰처럼 구조화된 변수 관리 가능 (ex. color.primary, spacing.md) |
적용 방식
Figma Variables는 다양한 속성에 적용 가능하다:
속성예시
| Fill / Stroke | 색상 변수 연결 (color.primary) |
| Width / Height / Padding | 숫자 변수 (spacing.md = 16) |
| Text content | "label.primary" 문자열 변수 |
| Boolean 조건 분기 | "isVisible" = true → 나타남 |
함께 쓰는 전략
- 디자인 토큰: 스타일 정의의 기준 (디자인 시스템의 뼈대 역할)
- 베리어블(Variables): 그 기준을 유연하게 활용하고 프로토타입과 테마까지 확장 (살을 붙이는 역할)
이 둘을 함께 사용하면 일관성과 유연성을 모두 갖춘 디자인 시스템을 구축할 수 있다.
요약
항목디자인 토큰Figma 베리어블
| 역할 | 재사용 가능한 디자인 값의 명명 | 디자인 속성을 변수화해 동적 제어 |
| 사용 범위 | 스타일 레벨 | 스타일 + 컴포넌트 + 프로토타입 |
| 기능 강조 | 일관성, 코드 연동 | 반응형, 모드 전환, 조건 기반 UI |
| 확장성 | Style Dictionary 등 외부 도구 필요 | Figma 내에서 바로 활용 가능 |
디자인 토큰(Design Tokens)은 디자인 시스템 내에서 반복 사용되는 시각적 속성(색상, 간격, 폰트 크기 등)을 이름 붙인 값으로 추상화한 것이다.
이는 개발자와 디자이너가 동일한 언어로 디자인 속성을 공유하기 위한 중간 매개체 역할을 한다.
2025 Figma 업데이트 핵심 요약
Figma는 기존의 "스타일(Styles)", "변수(Variables)", "토큰(Tokens)"을 더 명확히 연결하고 토큰 중심 설계 방식을 강화했다.
1. 디자인 토큰 = 스타일 + 변수의 조합
이제 디자인 토큰은:
- 스타일(예: 텍스트 스타일, 색상 스타일)로 생성한 시각적 표현을
- 변수(Variables)로 정의하고
- 시스템적으로 이들을 토큰 이름으로 구조화해 관리할 수 있다
즉, 스타일과 변수 개념이 디자인 토큰 아래 통합되어 작동하는 것.
2. Variables 기반의 디자인 시스템 확장
항목기존 방식Figma 업데이트 이후
| 색상 관리 | 색상 스타일(Color Styles) | color.primary 변수 → 스타일 적용 가능 |
| 간격 관리 | 수동 수치 입력 | spacing.md = 16 으로 자동 변수 적용 |
| 폰트 크기 | 텍스트 스타일 기반 | font.size.body 변수로 자동 적용 |
이러한 방식은 스타일을 변수화하여 테마 전환, 반응형, 조건 기반 표현까지 가능하게 해준다.
정리
| 디자인 토큰 | 디자인 속성(색상, 간격, 폰트 등)을 변수화해 일관되게 사용하는 시스템 구성 단위 |
| 스타일 | 시각적 표현 (색상, 텍스트, 효과 등) |
| 변수(Variable) | 값의 집합 (Color, Number, Boolean, String) |
| 2025 핵심 | 스타일 + 변수를 통합해 토큰 중심의 구조로 변환됨 |
베리어블은 어디서 적용하는가?
- 상단 메뉴에서
Assets 패널 → Variables 탭 클릭
(또는 오른쪽 속성 패널 하단에서 "Create variable" 클릭) - Create Collection 클릭 → 컬렉션 이름 지정
예: Theme, Spacing, Colors - 컬렉션 안에 변수를 생성
- 변수 이름 예: color.primary, spacing.md, isSelected
- 변수 타입 선택: Color, Number, String, Boolean
- 필요하다면 모드(Light / Dark 등) 추가 가능
변수 적용하기
A. 색상(Fill/Stroke)에 변수 적용
- 요소 선택 (예: 버튼, 카드 등)
- 오른쪽 속성 패널 → Fill 클릭
- 스와치 선택 창 우측 상단의 ● 아이콘 클릭
- Apply variable 클릭 후 원하는 색상 변수 선택
B. 크기/간격에 변수 적용
- Padding, Width, Height 등에 숫자 변수 적용
- Auto Layout 또는 사이즈 설정에서 숫자 입력창 옆에 있는 fx 버튼 클릭
- 변수 리스트에서 spacing.md 등 선택
C. 텍스트에 변수 적용
- 문자열 변수 사용하려면 텍스트 레이어 선택 후
- 속성 패널의 Content 영역 → fx 버튼 클릭
- String Variable 선택
D. Boolean 변수로 가시성 제어 (프로토타입에서 사용)
- 컴포넌트를 선택
- 오른쪽 패널의 Visibility(눈 모양) 옆 fx 클릭
- Boolean 변수(isVisible) 선택
→ 프로토타입 액션에서 이 값을 true or false로 전환 가능
Edit a variable
Hover over a variable’s row and click the Edit variable icon to open its editing modal.
To scope a variable:
- Right-click on a variable, or multiple variables, and select Edit variable. You can also click Edit variable, located to the right of any single variable.
- Open the Scope tab.
- Use the checkboxes to toggle the variable’s availability in that property. Check Show in all to make the variable available for all supported properties.
변수 적용 후 모드 전환
- 상단 바 → Mode: 드롭다운 클릭
- Light, Dark 등 다른 모드 선택
→ 변수에 따라 디자인 요소 색상/스타일이 자동으로 바뀜
Figma 베리어블 모드(Mode) 적용법
모드란 무엇인가?
모드는 변수 컬렉션(Variable Collection) 안에서 조건별 값 세트를 나누는 기능이다.
→ 같은 변수 이름이라도 모드에 따라 다른 값을 가질 수 있다.
모드 만들기
방법:
- Figma 좌측 패널 → Assets → Variables 탭 열기
- 컬렉션 선택 (또는 새로 만들기)
- 오른쪽 상단 + Add mode 클릭
- 모드 이름 입력: 예) Light, Dark
👉 한 컬렉션에 여러 모드를 만들 수 있음 (최대 10개까지)
모드 적용하기 (디자인에 연결된 변수에 반영)
방법 1: 변수 적용 후 직접 모드 전환
- 변수를 Fill, Stroke, Text 등 속성에 적용
- 상단바 → Mode: Light 드롭다운 클릭
- 원하는 모드 선택 → 디자인 요소에 적용된 변수의 값이 자동으로 바뀜
방법 2: 프레임이나 컴포넌트에 모드 지정
- 프레임 또는 컴포넌트를 선택
- 우측 패널 하단에서 Applied mode 선택
- 해당 프레임 안 모든 변수에 모드가 일괄 적용됨
✅ 이를 활용하면 라이트/다크 테마 디자인을 손쉽게 관리 가
Alias는 변수 안에 값을 직접 넣는 대신, 다른 변수 값을 링크해서 쓰는 방식이다.
적용 예시 요약
속성변수 적용 위치적용 방식
| Fill / Stroke | 색상 | ● → Apply Variable |
| Width / Height / Padding | 숫자 | fx 버튼 → 숫자 변수 |
| 텍스트 내용 | 문자열 | fx → string 변수 |
| Visibility / 조건 분기 | 불리언 | fx → boolean 변수 |
