Transition

How long, how delayed, and on what curve.

Partial: a transition can be authored, validated and exported. It cannot be applied to layers or mapped to a Figma variable. In the token dialog, the timing function takes four numbers only.

Value format

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

Field	Value
duration	A duration value or reference
delay	A duration value or reference
timingFunction	A cubic bezier value or reference

All three are required. The whole $value can also be a reference to another transition token.

A Tokens Studio import keeps the CSS property a transition animates in $extensions under eu.syntope.transition. Syntope Tokens carries it for other tools and does not use it.

In Syntope Tokens

The dialog starts with one reference field. To enter values, select the link icon (Show transition fields) and fill duration, delay and timing function. The token shows them in CSS order: 200ms 0.4, 0, 0.2, 1 0ms.

timing function has the four fields of a cubic bezier token and takes numbers only. To reference a curve token, write it in the JSON editor: "timingFunction": "{motion.standard}". Such a reference stays intact when you later edit the other fields in the dialog.

In Figma

Figma keeps animation on prototype interactions, which the plugin does not write. Apply token is disabled for this type, and variable sync leaves transitions out.

Use transitions in code through export or sync.