Free Design System Tool
Design System Motion Token Generator
The Motion Token Generator creates structured, multi-tier motion tokens for digital design systems. Define snappy, gentle, and bounce presets and instantly compile them into DTCG standard JSON, CSS variables, and SwiftUI extensions.
Live Interactive Simulator
120 FPS GPU EngineToken Configuration
Snappy Preset
Stiffness: 520
Damping: 24
Gentle Preset
Stiffness: 280
Damping: 32
Live Token Test
Hover Me (motion.spring.snappy)
Generated Production Output
// DTCG Design Token JSON
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"motion": {
"spring": {
"snappy": {
"stiffness": { "$value": 520 },
"damping": { "$value": 24 }
},
"gentle": {
"stiffness": { "$value": 280 },
"damping": { "$value": 32 }
}
}
}
}