Cubic bezier

An easing curve, written as the two control points of a cubic Bezier.

Partial: a curve can be authored, validated and exported. It cannot be applied to layers or mapped to a Figma variable. The token dialog also offers references for single points, but those are refused on save.

Value format

{ "$type": "cubicBezier", "$value": [0.25, 0.1, 0.25, 1] }

The array is [P1x, P1y, P2x, P2y], exactly four entries.

Entry	Allowed
P1x, P2x	A number from 0 to 1
P1y, P2y	Any number, so overshoot curves are valid

Inside the array, a reference must be a JSON Pointer object. DTCG does not allow {curly} references there:

{ "$type": "cubicBezier", "$value": [0.25, { "$ref": "#/motion/y1/$value" }, 0.25, 1] }

In Syntope Tokens

The fields P1x, P1y, P2x and P2y each take one number.

Each field also lists number tokens and accepts {alias}, but saving a curve with a {curly} point fails validation. Enter numbers in the dialog, or write a $ref in the JSON editor. A token that holds a $ref opens in the JSON editor instead of the dialog.

A reference to a whole curve, such as {motion.standard}, is valid in JSON as the complete $value.

In Figma

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

Use curves in code through export or sync, and inside a transition token.

Common curves

Name	Value
ease	0.25, 0.1, 0.25, 1
ease-in	0.42, 0, 1, 1
ease-out	0, 0, 0.58, 1
ease-in-out	0.42, 0, 0.58, 1
linear	0, 0, 1, 1