코드로 내보내기

토큰이 Figma 안에만 머물 필요는 없습니다. 플러그인 없이 웹 앱에서 코드베이스가 실제로 쓰는 형식으로 내보내거나, 빌드·AI 도구가 최신 토큰을 코드로 직접 끌어가게 하세요.

웹에서 내보내기

프로젝트 목록에서 카드의 ⋯ 메뉴를 열고 내보내기를 고르거나, 프로젝트 안에서 왼쪽 사이드바의 컬렉션(또는 그리드의 행)을 우클릭해 이 컬렉션 내보내기를 고릅니다. 다이얼로그가 열립니다:

• 범위 — 내보낼 컬렉션을 고릅니다. 모든 컬렉션을 체크하거나 컬렉션을 하나씩 고르고, 컬렉션에서 열었다면 그 컬렉션이 체크된 채로 시작합니다.
• 형식 — 아래 6가지 중 하나.
• 참조를 값으로 해소 — {Primitive/blue/500} 같은 참조(alias)를 최종값으로 바꿉니다. 플랫폼 코드 형식은 항상 해소되며, 이 경우 체크박스는 켜진 채 고정됩니다.

바로 붙여 쓰는 플랫폼 코드

CSS · SwiftUI · Jetpack Compose를 고르면 앱에 그대로 붙여 넣을 수 있는 코드가 나옵니다. 변환은 서버에서 이뤄지고 결정론적입니다 — 같은 토큰은 항상 같은 바이트를 만들어 diff가 깔끔하고 캐시가 잘 됩니다. light와 dark 모드를 가진 컬렉션은 이렇게 나옵니다:

/* CSS 커스텀 프로퍼티 */
:root {
  --colors-button-background: #18181b;
  --colors-radius-md: 8px;
}
[data-theme="dark"] {
  --colors-button-background: #fafafa;
}

// SwiftUI — 모드당 인스턴스
struct ColorsTokens {
  let buttonBackground: Color
  let radiusMd: CGFloat
  static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
  static let dark  = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}

// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark  = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)

참조는 항상 최종값으로 해소됩니다. 해소하지 못한 참조는 값을 지어내지 않고 주석으로 남깁니다.

토큰 가져오기

프로젝트 카드의 ⋯ 메뉴에 가져오기가 있습니다. JSON 또는 DTCG 파일을 올리면 컬렉션·변수·모드 개수와 경고 목록을 미리 보여준 뒤 생성합니다. 확인하면 새 컬렉션으로 들어옵니다 (색상은 관용적으로 파싱합니다 — 3자리·6자리 hex, rgb(), hsl() 모두 인식). 이 변경은 히스토리에 가져오기로 기록됩니다.

타이포그래피·그림자 같은 복합 토큰, px가 아닌 치수, 읽을 수 없는 색, 타입과 맞지 않는 값처럼 표현할 수 없는 값은 추측하지 않고 건너뜁니다. 건너뛴 개수와 이름은 미리보기에 나옵니다. 같은 파일을 다시 가져오면 새 컬렉션이 하나 더 생깁니다.

API·MCP로 가져가기

CI 파이프라인과 AI 코딩 도구는 손으로 내보내지 말고 끌어가세요. 같은 플랫폼 형식을 REST API에서 ?format=css|swift|compose로 받을 수 있고, @variablejar/mcp 서버는 get_tokens 도구를 제공해 IDE의 에이전트가 최신 토큰을 코드로 가져옵니다. 프로젝트 API 토큰 하나로 둘 다 됩니다.