デザイントークン変換

Style Dictionary/Figma Token形式のJSONデザイントークンをCSS変数・SCSS・Tailwind・TypeScript・Android XML・iOS Swiftなど7形式に一括変換します

デザイントークン (JSON)

13 個のトークンを検出

出力フォーマット

変換結果

:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --font-body: 16px;
  --font-heading: 24px;
  --font-small: 12px;
}

トークン一覧

パス	値	タイプ
color-primary	#007bff	color
color-secondary	#6c757d	color
color-success	#28a745	color
color-danger	#dc3545	color
color-warning	#ffc107	color
spacing-xs	4px	dimension
spacing-sm	8px	dimension
spacing-md	16px	dimension
spacing-lg	24px	dimension
spacing-xl	32px	dimension
font-body	16px	fontSize
font-heading	24px	fontSize
font-small	12px	fontSize