Design Token Generator
Create consistent design tokens for your design system with a clean, modern approach.
Token Types
spacing Tokens
Configure your spacing token settings
Using pixel (px) units for grid-based system
Number of spacing tokens to generate (2-16)
Custom Values
1: 0.25rem
3: 1.5rem
5: 2.5rem
7: 3.5rem
Tip: Use the sidebar to switch between different token types
Generated Tokens
Export your tokens in Figma format
Figma Tokens
JSON
{
"name": "designTokens",
"modes": [
"Default"
],
"variables": {
"fontFamilyBase": {
"type": "STRING",
"values": {
"Default": "Inter"
}
},
"fontFamilySecondary": {
"type": "STRING",
"values": {
"Default": "Inter"
}
},
"size-16": {
"type": "FLOAT",
"values": {
"Default": 16
}
},
"size-20": {
"type": "FLOAT",
"values": {
"Default": 20
}
},
"size-25": {
"type": "FLOAT",
"values": {
"Default": 25
}
},
"size-31": {
"type": "FLOAT",
"values": {
"Default": 31
}
},
"size-39": {
"type": "FLOAT",
"values": {
"Default": 39
}
},
"size-49": {
"type": "FLOAT",
"values": {
"Default": 49
}
},
"size-60": {
"type": "FLOAT",
"values": {
"Default": 60
}
},
"size-48": {
"type": "FLOAT",
"values": {
"Default": 48
}
},
"size-36": {
"type": "FLOAT",
"values": {
"Default": 36
}
},
"size-30": {
"type": "FLOAT",
"values": {
"Default": 30
}
},
"size-24": {
"type": "FLOAT",
"values": {
"Default": 24
}
},
"size-18": {
"type": "FLOAT",
"values": {
"Default": 18
}
},
"size-14": {
"type": "FLOAT",
"values": {
"Default": 14
}
},
"LineHeight-1.2": {
"type": "FLOAT",
"values": {
"Default": 1.2
}
},
"LineHeight-1.3": {
"type": "FLOAT",
"values": {
"Default": 1.3
}
},
"LineHeight-1.4": {
"type": "FLOAT",
"values": {
"Default": 1.4
}
},
"LineHeight-1.5": {
"type": "FLOAT",
"values": {
"Default": 1.5
}
},
"LineHeight-1.6": {
"type": "FLOAT",
"values": {
"Default": 1.6
}
},
"LineHeight-1": {
"type": "FLOAT",
"values": {
"Default": 1
}
},
"LineHeight-1.25": {
"type": "FLOAT",
"values": {
"Default": 1.25
}
},
"LineHeight-1.75": {
"type": "FLOAT",
"values": {
"Default": 1.75
}
},
"LineHeight-2": {
"type": "FLOAT",
"values": {
"Default": 2
}
},
"Weight-100": {
"type": "FLOAT",
"values": {
"Default": 100
}
},
"Weight-200": {
"type": "FLOAT",
"values": {
"Default": 200
}
},
"Weight-300": {
"type": "FLOAT",
"values": {
"Default": 300
}
},
"Weight-400": {
"type": "FLOAT",
"values": {
"Default": 400
}
},
"Weight-500": {
"type": "FLOAT",
"values": {
"Default": 500
}
},
"Weight-600": {
"type": "FLOAT",
"values": {
"Default": 600
}
},
"Weight-700": {
"type": "FLOAT",
"values": {
"Default": 700
}
},
"Weight-800": {
"type": "FLOAT",
"values": {
"Default": 800
}
},
"Weight-900": {
"type": "FLOAT",
"values": {
"Default": 900
}
},
"spacing-8": {
"type": "FLOAT",
"values": {
"Default": 8
}
},
"spacing-4": {
"type": "FLOAT",
"values": {
"Default": 4
}
},
"spacing-32": {
"type": "FLOAT",
"values": {
"Default": 32
}
},
"spacing-24": {
"type": "FLOAT",
"values": {
"Default": 24
}
},
"spacing-128": {
"type": "FLOAT",
"values": {
"Default": 128
}
},
"spacing-40": {
"type": "FLOAT",
"values": {
"Default": 40
}
},
"spacing-512": {
"type": "FLOAT",
"values": {
"Default": 512
}
},
"spacing-56": {
"type": "FLOAT",
"values": {
"Default": 56
}
},
"radius-4": {
"type": "FLOAT",
"values": {
"Default": 4
}
},
"radius-8": {
"type": "FLOAT",
"values": {
"Default": 8
}
},
"radius-16": {
"type": "FLOAT",
"values": {
"Default": 16
}
},
"radius-32": {
"type": "FLOAT",
"values": {
"Default": 32
}
},
"radius-159984": {
"type": "FLOAT",
"values": {
"Default": 159984
}
},
"radius-800": {
"type": "FLOAT",
"values": {
"Default": 800
}
},
"breakpoint-sm": {
"type": "FLOAT",
"values": {
"Default": 640
}
},
"breakpoint-md": {
"type": "FLOAT",
"values": {
"Default": 768
}
},
"breakpoint-lg": {
"type": "FLOAT",
"values": {
"Default": 1024
}
},
"breakpoint-xl": {
"type": "FLOAT",
"values": {
"Default": 1280
}
},
"breakpoint-2xl": {
"type": "FLOAT",
"values": {
"Default": 1536
}
}
}
}