Transition

A composite animation token: how long, how delayed, and on what curve.

---

Value format

{
  "$type": "transition",
  "$value": {
    "duration": { "value": 200, "unit": "ms" },
    "delay": { "value": 0, "unit": "ms" },
    "timingFunction": [0.4, 0, 0.2, 1]
  }
}

Slot	Type
duration	duration or reference
delay	duration or reference
timingFunction	cubic Bézier or reference

Each slot can be a reference, so a transition set can be assembled from shared duration and easing tokens:

{
  "duration": "{motion.duration.fast}",
  "delay": "{motion.duration.none}",
  "timingFunction": "{motion.easing.standard}"
}

---

How it is displayed

CSS transition order — duration, timing function, delay:

200ms 0.4, 0, 0.2, 1 0ms

---

Applying to Figma

Not applicable

Figma layers have no transition property — animation lives on prototype interactions, which plugins cannot write in this way. Transition tokens therefore have no apply targets.

---

What does work

Authoring, validation, slot references, export, folder export, and sync. The token exists so motion specs live with the rest of the system and reach the codebase, where they are consumable.