D
D
Developers
Search…
Gradient
Gradient tokens define one single gradient, such as linear black-to-white .

Example Token Payload

This is what the gradient payload looks like:
1
{
2
"id": string
3
"name": string
4
"description": string
5
"tokenType": "Gradient"
6
"origin": ItemOrigin | null
7
"value": {
8
"from": {
9
"x": double
10
"y": double
11
},
12
"to": {
13
"x": double
14
"y": double
15
},
16
"type": "Linear" | "Radial" | "Angular",
17
"aspectRatio": double
18
"stops": [Gradient Stop],
19
"referencedToken": Gradient | null
20
}
21
}
Copied!

Gradient Stop

Gradient Stop represents one point where a new color is introduced within the gradient blend. Take the following example:
Gradient defined within Figma
This gradient has 3 stops - red at the beginning, transparent in the middle, and purple at the end. In Supernova, the gradient stop is defined like this:
1
{
2
"position": number
3
"color": {
4
"hex": string
5
"r": int (0-255),
6
"g": int (0-255),
7
"b": int (0-255),
8
"a": int (0-255),
9
"referencedToken": Color | null
10
}
11
}
Copied!
Note that each gradient stop color can be referenced from a different color token. If that is the case, referencedToken will contain Color Token that is referenced.

Associated functions

You can use the following functions to retrieve font tokens from your design system:
Last modified 6mo ago