🎯 전체 요약

  • Figma 토큰: hex 코드 같은 구체적 값을 인간의 언어로 추상화하는 디자인 시스템 관리 방법론
  • 3계층 토큰 시스템: Primitive → Semantic → Component-Specific
  • Uber Base 디자인 시스템의 실전 사례 분석
  • Figma 플러그인(Styler, Sorter)을 활용한 효율적인 스타일 생성
  • 라이브러리 퍼블리싱으로 팀 전체 디자인 일관성 확보

🎨 토큰 3계층 시스템

디자인 토큰은 구체적인 값을 점진적으로 추상화하는 3단계 계층으로 구성된다.

Primitive 토큰 (원시 값)

  • 직접 hex 코드 별칭: blue-500 → #3B82F6, grey-300 → #D1D5DB

Semantic 토큰 (목적 기반)

  • UI 의도를 나타내는 참조: UI-primary-1, text-secondary

Component-Specific 토큰 (컴포넌트 특화)

  • 세부 사용처 지정: button-primary-bg-active, modal-text

토큰 네이밍 규칙:

[category]-[component]-[variation]-[attribute]-[state]

예시:

UI-button-primary-background-active

🏢 Uber Base 디자인 시스템 사례

리소스: base.uber.com - Uber의 공개 디자인 시스템

토큰 구조

  • 이름: 고유 식별자 (엔지니어링 Key)
  • 값: 실제 측정값 (hex, px 등)
  • 타입: 색상, 간격, 타이포그래피 등
  • 설명: 사용 가이드

8가지 지원 토큰 타입 색상, 타이포그래피, 레이아웃 그리드, 치수, 모서리 반경, 햅틱, 그림자, 간격

4가지 색상 버킷

  1. Primitives: 100개+ hex 코드 (원시 팔레트)
  2. Foundations: 6개 브랜드 색상
  3. Core: 17개 그레이 값 (중립 스케일)
  4. Extensions: 29개 시맨틱 값

그레이 3분류 시스템

  • Background (표면): 레이어, 카드, 컨테이너
  • Content (텍스트/아이콘): 모든 가독 요소
  • Border (스트로크): 구분선, 외곽선

카테고리별 토큰 선택 규칙을 통해 디자이너는 용도에 맞는 토큰만 사용한다.

  • 표면 → background-primary/secondary/tertiary
  • 텍스트 → content-primary/secondary
  • 외곽선 → border-default/selected

Uber 네이밍 구조 [타입]-[맥락] 형식으로 간결하게 작성

  • content-primary: Content 타입 + Primary 맥락 (최고 대비)
  • background-secondary: Background 타입 + Secondary 맥락 (중간 elevation)

구체적일수록 긴 이름, 일반적일수록 짧은 이름

🛠️ Figma 실전 구현

색상 스타일 생성 워크플로우

기본 스타일 생성

  1. 도형 선택 → 색상 선택기 옆 4점 아이콘
  2. “새 스타일 만들기” 선택
  3. 슬래시 규칙으로 그룹화 이름 지정 (예: grey/base-1)

Figma 스타일 제한사항: 한 수준 추상화만 지원 (hex → 이름). 다층 토큰은 Figma Variables 필요.

그레이 스케일 일괄 생성

  1. 흰색 사각형 → Shift + 아래 화살표로 복사 → base/mid/contrast 생성
  2. Rename Selection: grey/base-$n (자동 순차 번호)
  3. Sorter 플러그인: 캔버스 순서 = 레이어 패널 순서
  4. Styler 플러그인: “Generate Styles” → 일괄 스타일 생성

결과: grey/base, grey/mid, grey/contrast 그룹 자동 정리

타이포그래피 스타일

폰트 권장: Google Fonts (오픈소스, 사전 로드, 라이선스 문제 없음)

3가지 타이포그래피 분류

  1. Labels (한 줄 텍스트)

    • 크기: 12px, 14px, 16px, 18px, 24px
    • 행 높이: 100% / 자간: -2%
    • 네이밍: label/L5-reg-400 (L1=최대, L5=최소)

  2. Displays (제목)

    • 크기: 24px, 32px, 48px, 64px
    • 행 높이: 135% 또는 120%

  3. Paragraphs (단락)

    • 크기: 14px, 16px, 18px
    • 행 높이: 최소 135% (백분율 금지, 명시적 픽셀 값 필수)
    • 예: 16px × 135% = 22px

가중치 네이밍: Regular=400, Medium=500, Semi-bold=600, Bold=700

Figma 스타일은 폰트 속성만 저장, 색상은 별도 적용

필수 플러그인

  1. Styler: 레이어 이름 → 스타일 일괄 생성
  2. Sorter: 레이어 패널 정렬
  3. Rename Selection: 자동 번호 일괄 이름 변경
  4. Find and Replace: 파일 전체 텍스트 교체
  5. Ghostwriter UX: 더미 카피 생성
  6. Spellchecker: 오타 검사

라이브러리 퍼블리싱

워크플로우

  1. 마스터 파일 생성 (모든 스타일 포함)
  2. Assets 패널 → 책 아이콘 → “Publish”
  3. 다른 파일에서 라이브러리 활성화

베스트 프랙티스 구조

  • 파일 1: 디자인 시스템 라이브러리
  • 파일 2~4: 모바일/웹/마케팅 (라이브러리 참조)

한 곳에서 업데이트 → 모든 파일 자동 동기화 (Figma Pro 필요)

주요 링크

디자인 시스템 연구

UX 영감

Figma 리소스

학습 리소스

https://www.youtube.com/watch?v=LcY0X10H2wo

이 문서는 튜토리얼 영상을 보고 작성한 학습 기록입니다.