Design Token Converter

Convert Style Dictionary/Figma Token JSON design tokens to 7 formats including CSS variables, SCSS, Tailwind, TypeScript, Android XML, and iOS Swift

Design Tokens (JSON)

13 tokens detected

Output Format

Output

: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;
}

Token List

Path	Value	Type
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