Free design system tool
Motion Token Generator
This motion token generator turns two spring presets, snappy and gentle, into design tokens you can paste into a design system. Export them as design token JSON in the DTCG style or as CSS custom properties with linear() easings.
Updated
Token Configuration
// Design token JSON (DTCG-style)
{
"$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 }
}
}
}
}How to use the Motion Token Generator
- 1
Name your tokens
Type a prefix such as motion or ds. It becomes the top-level group in JSON and the start of each CSS variable.
- 2
Tune the snappy preset
Drag stiffness and damping until the hover test feels right for buttons and small controls.
- 3
Tune the gentle preset
Lower stiffness for larger surfaces such as sheets, cards and page transitions.
- 4
Export
Choose JSON or CSS in the code panel and press Copy code.
Formats and limits
| Presets | Snappy and gentle, each with stiffness and damping |
|---|---|
| Outputs | Design token JSON (DTCG-style $value keys), CSS custom properties with linear() easing and duration |
| Token format | Springs have no official DTCG type yet, so values are stored as plain numbers |
| Cost and sign-up | Free, no account |
| Where it runs | In your browser |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Motion Token Generator (this page) | Turning two spring presets into token JSON or CSS variables in a minute | Free, no account, runs in your browser. |
| Style Dictionary | Building tokens into every platform in CI | Open-source build system that exports tokens to iOS, Android, CSS, JS and more. Forward-compatible with the DTCG format. |
| Tokens Studio | Managing tokens inside Figma with a team | Figma plugin plus a hosted platform. Paid Team plan; the platform has a 14-day free trial. |
Frequently asked questions
What are motion tokens?
Motion tokens are named values for animation, such as durations, easings and spring settings, that a design system shares across products. Changing a token updates every component that uses it.
What is the DTCG format?
DTCG is the Design Tokens Community Group format, a W3C community specification for storing tokens as JSON with $value and $type keys. Tools such as Style Dictionary can read it.
How many motion presets does a design system need?
Most teams start with two or three: a snappy spring for buttons and toggles, a gentle one for larger surfaces, and sometimes a bouncy one for playful moments. Fewer presets keep the product consistent.
Can I use spring tokens in CSS?
Yes. The CSS export samples each spring into a linear() easing and pairs it with a duration, so you can write transition: transform var(--motion-snappy-duration) var(--motion-snappy-easing).