React Architecture Concept • Core Motion Model
Motion Tokens: Schema Specification & Platform Export
Updated November 2026
Motion Tokens standardize animation parameters across cross-platform engineering organizations. By treating springs, easings, and durations as first-class tokens alongside color and typography, teams eliminate design drift and ensure consistent brand feel across Web, iOS, and Android.
Motion tokens store timing and spring values as named data, so one source can feed several platforms. Check the current docs for the export formats available in your version.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
// exode.tokens.json - DTCG Standard
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"motion": {
"spring": {
"snappy": {
"$type": "cubicBezier",
"stiffness": { "$value": 520 },
"damping": { "$value": 24 },
"mass": { "$value": 1.0 }
},
"gentle": {
"stiffness": { "$value": 280 },
"damping": { "$value": 32 },
"mass": { "$value": 1.0 }
}
}
}
}Frequently Asked Questions about motion tokens documentation
Can I import tokens from Figma Tokens Studio?
Check the current docs for your version. Tokens Studio exports JSON that follows the design tokens format, so plan to map those values to your motion tokens.
What should a motion token include?
A clear name and a value, such as a duration, a curve or spring settings. Name tokens by purpose, not by their value.
Should tokens be separate per platform?
Keep one shared source where you can. Platforms can then map the values to their own format.
How many tokens should I start with?
A few durations and curves are enough for most teams. Add more when you have a real need.