SXL Studio
Tokens

Animation

Animation group token types: Duration, Cubic Bezier, Transition — valid value formats and practical motion token patterns.

The Animation group defines motion timing values.

These types are code/apply oriented in SXL Studio:

  • no standalone Figma Variable/Style export;
  • used in token governance and code workflows;
  • transition / cubicBezier do not directly style a node by themselves.

Duration

duration stores timing values.

Accepted $value formats

FormatExample
number200 (ms semantics)
ms string"200ms"
s string"0.2s"
alias"{duration.fast}"
JSON
{
  "duration": {
    "$type": "duration",
    "instant": { "$value": "0ms" },
    "fast": { "$value": "120ms" },
    "normal": { "$value": "200ms" },
    "slow": { "$value": "320ms" }
  }
}

Cubic Bezier

cubicBezier stores easing curves.

Accepted $value formats

FormatExample
array of 4 numbers[0.4, 0, 0.2, 1]
string"cubic-bezier(0.4, 0, 0.2, 1)"
alias"{cubicBezier.emphasized}"
JSON
{
  "cubicBezier": {
    "$type": "cubicBezier",
    "standard": { "$value": [0.4, 0, 0.2, 1] },
    "decelerate": { "$value": [0, 0, 0.2, 1] },
    "accelerate": { "$value": "cubic-bezier(0.4, 0, 1, 1)" }
  }
}

Transition

transition defines a composed transition contract.

Accepted $value shapes

  • alias: "{transition.default}"
  • shorthand string
  • object with transition keys

Transition object keys

KeyTypeNotes
durationnumber/string/aliastiming duration
delaynumber/string/aliasstart delay
easingstring/array/aliascurve keyword, cubic-bezier(...), spring(...), or preset

Supported preset easings

linear, ease-in, ease-out, ease-in-out, ease-out-back, ease-in-out-back, gentle, quick, bouncy, slow.

JSON
{
  "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)"
      }
    }
  }
}

Full example

JSON
{
  "duration": {
    "$type": "duration",
    "fast": { "$value": "120ms" },
    "normal": { "$value": "200ms" },
    "slow": { "$value": "320ms" }
  },
  "cubicBezier": {
    "$type": "cubicBezier",
    "standard": { "$value": [0.4, 0, 0.2, 1] },
    "exit": { "$value": [0, 0, 0.2, 1] }
  },
  "transition": {
    "$type": "transition",
    "hover": {
      "$value": {
        "duration": "{duration.fast}",
        "delay": "0ms",
        "easing": "quick"
      }
    },
    "screen-enter": {
      "$value": {
        "duration": "{duration.normal}",
        "delay": "40ms",
        "easing": "{cubicBezier.standard}"
      }
    }
  }
}