Design Tokens 양방향 싱크

04. Design Tokens 기반 양방향 싱크 전략

전략 개요

디자인 토큰(Design Tokens)을 단일 진실 공급원(SoT) 으로 두고, Figma와 코드가 모두 그 토큰을 참조하게 하여 표면 레벨에서는 서로를 동기화하지 않아도 자동으로 일치시키는 전략입니다.

              ┌──────────────────────────┐
              │  tokens.json (SoT)       │
              │  (Git 리포 / 디자인팀 관리)│
              └────────┬─────────────────┘
                       │
        ┌──────────────┼──────────────┐
        ▼              ▼              ▼
  [Figma Variables]  [Tailwind     [iOS/Android
   (Tokens Studio   config]         Theme]
    플러그인 sync)   [CSS vars]
        │              │              │
        ▼              ▼              ▼
   디자이너 작업    개발자 작업      네이티브 앱
Plain Text
복사

핵심 도구

•

Tokens Studio for Figma (구 Figma Tokens 플러그인)

•

Style Dictionary (Amazon, 토큰 → 다양한 플랫폼 변환)

•

Specify / Supernova (상용 토큰 매니저)

•

GitHub Actions (토큰 변경 시 자동 빌드/배포)

적용 시나리오

•

멀티 플랫폼(Web + iOS + Android) 제품

•

디자인 시스템 전담팀 존재

•

디자이너가 Variables/토큰 개념에 익숙

•

장기적으로 운영되는 서비스

단계별 워크플로

1) 토큰 정의 (JSON)

design-tokens/tokens.json:

{
  "color": {
    "brand": {
      "500": { "value": "#2563EB", "type": "color" },
      "900": { "value": "#1E3A8A", "type": "color" }
    }
  },
  "spacing": {
    "md": { "value": "16px", "type": "spacing" }
  }
}
JSON
복사

2) Figma 동기화 (Tokens Studio)

•

Tokens Studio 플러그인 설치

•

GitHub 리포 연결 (design-tokens/tokens.json)

•

Pull → Figma Variables로 자동 변환

•

디자이너는 Figma에서 토큰만 사용

3) 코드 동기화 (Style Dictionary)

npm install -D style-dictionary
Bash
복사

style-dictionary.config.js:

module.exports = {
  source: ['design-tokens/**/*.json'],
  platforms: {
    css: { transformGroup: 'css', buildPath: 'src/styles/', files: [{ destination: 'tokens.css', format: 'css/variables' }] },
    js: { transformGroup: 'js', buildPath: 'src/', files: [{ destination: 'tokens.ts', format: 'javascript/es6' }] },
    tailwind: { transformGroup: 'js', buildPath: 'src/', files: [{ destination: 'tailwind-tokens.js', format: 'javascript/module' }] },
  },
}
JavaScript
복사

4) CI/CD 자동화 (GitHub Actions)

tokens.json 변경 시:

Style Dictionary 빌드

Figma Variables 동기화 (Tokens Studio API)

npm 패키지 게시 (선택)

사용처 자동 PR 생성

장점

•

싱크 문제를 원천 제거: 컴포넌트 단위가 아닌 토큰 단위로 일치

•

멀티 플랫폼 일관성

•

변경 추적 용이: Git 기반 히스토리

•

디자이너-개발자 공통 언어 형성

한계

•

컴포넌트 자체의 싱크는 별도 문제 — 이 전략은 토큰만 해결

•

초기 셋업 비용 큼

•

디자이너의 학습 곡선 (Variables, Tokens Studio)

•

토큰 거버넌스(누가 추가/변경 권한) 합의 필요

다른 전략과의 결합

•

02 (Make to Design & Code): Make의 hex 출력을 토큰으로 자동 치환

•

05 (Storybook SoT): Storybook에서 토큰 카탈로그 + 컴포넌트 카탈로그 동시 운영

•

07 (MCP 자동화): MCP가 코드 생성 시 토큰 강제 사용