Gradient

A list of color stops.

Partial: a gradient can be authored, validated, referenced and exported. It cannot be applied to layers or mapped to a Figma variable. The stop-level reference field in the token dialog does not produce a value that resolves.

Value format

{
  "$type": "gradient",
  "$value": [
    { "color": { "colorSpace": "srgb", "components": [0, 0, 0] }, "position": 0 },
    { "color": { "colorSpace": "srgb", "components": [1, 1, 1] }, "position": 1 }
  ]
}

Field	Value
color	A color value or reference
position	A number from 0 to 1, or a reference to a number token

Both fields are required on every stop, and the list needs at least one stop. A position outside 0–1 is refused on save. DTCG keeps the geometry (linear, radial, angle) out of the token.

In Syntope Tokens

The dialog starts with two stops. Add more with add stop. Each stop has color and position, and each takes a value or a reference. color has no picker here, so type the value. To make the whole token a reference, select the link icon (Use gradient reference).

Each stop also has a field at the top for a reference to a gradient token. A gradient token is always a list, so that reference cannot resolve to one stop. Leave this field empty and use references in color and position instead.

In Figma

Apply token is disabled for this type, and variable sync leaves gradients out.

To drive a gradient on the canvas, use two color tokens:

1. Select the layer.
2. Apply the first token with gradient stop color X.
3. Apply the second token with gradient stop color Y.

If the layer has no gradient fill, the first apply replaces its first fill with a two-stop linear gradient. Set the angle and stop positions in Figma. Only the first two stops can be set this way.

Use gradient tokens in code through export or sync.