Animation
Animation group token types: Duration, Cubic Bezier, Transition — verified value formats and practical motion token patterns.
Overview
Motion tokens. All three are internal (they store motion data used by Apply / Generate / Code; they are not exported as a standalone variable or style).
Figma supports Timing and Easing variables in the Motion UI. However, the public Figma Plugin API currently exposes only BOOLEAN, COLOR, FLOAT, and STRING variable types, so a Community plugin cannot create native Timing or Easing variables. SXL keeps these motion values in JSON instead of exporting misleading FLOAT or STRING substitutes. Native export can be added when Figma exposes those types through its public API.
$type | Value in one line |
|---|---|
duration | A time value (ms / s / number) |
cubicBezier | A [x1, y1, x2, y2] array or cubic-bezier(...) |
transition | A shorthand string, or an object (duration, delay, easing) |
Duration
A time value used by transitions and motion.
Accepted $value | Example |
|---|---|
| Milliseconds | "200ms" |
| Seconds | "0.2s" |
| Number | 200 |
| Alias / math | "{duration.base} * 2" |
{ "duration": { "$type": "duration", "fast": { "$value": "120ms" }, "base": { "$value": "200ms" }, "slow": { "$value": "320ms" } } }
Cubic Bezier
An easing curve.
Accepted $value | Example |
|---|---|
| Array of 4 numbers | [0.4, 0, 0.2, 1] |
| Stringified array | "[0.4, 0, 0.2, 1]" |
cubic-bezier(...) | "cubic-bezier(0.2, 0, 0, 1)" |
| Alias | "{cubicBezier.standard}" |
{ "cubicBezier": { "$type": "cubicBezier", "standard": { "$value": [0.4, 0, 0.2, 1] }, "emphasized": { "$value": [0.2, 0, 0, 1] } } }
Transition
A composed motion contract. Write a shorthand string, an object, or an alias (arrays are not a valid root).
Object keys:
| Key | Type | Notes |
|---|---|---|
duration | number / string / alias | Timing duration |
delay | number / string / alias | Start delay |
easing | string / alias | Preset keyword, cubic-bezier(...), or spring(...) |
Preset easings: linear, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, gentle, quick, bouncy, slow (plus cubic-bezier(...) and spring(...)).
{
"transition": {
"$type": "transition",
"default": { "$value": { "duration": "200ms", "delay": "0ms", "easing": "ease-in-out" } },
"emphasized": { "$value": { "duration": "{duration.slow}", "delay": "0ms", "easing": "cubic-bezier(0.2, 0, 0, 1)" } },
"spring": { "$value": { "duration": "260ms", "delay": "0ms", "easing": "spring(1, 170, 26, 0)" } }
}
}
Note This is the transition token (a reusable motion contract). Prototype interactions inside a component (triggers like on-hover, animations like smart-animate) are configured in the composition file — see Composition · Transitions.
Full example
{
"duration": { "$type": "duration", "base": { "$value": "200ms" }, "slow": { "$value": "320ms" } },
"cubicBezier": { "$type": "cubicBezier", "standard": { "$value": [0.4, 0, 0.2, 1] } },
"transition": {
"$type": "transition",
"default": { "$value": { "duration": "{duration.base}", "easing": "ease-in-out" } }
}
}