Linear gradient in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a linear gradient fill in Figma.

Figma

node.fills = [{ type: 'GRADIENT_LINEAR', [1]: [{ position: 0, color: { r: 1, g: 0, b: 0 } }, { position: 1, color: { r: 0, g: 0, b: 1 } }] }];

Drag options to blanks, or click blank then click option'

AgradientStops

Bstops

Ccolors

DfillStops

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'colors' or 'stops' instead of 'gradientStops' causes errors.

Misspelling the property name.

The property to define the colors and positions in a linear gradient fill in Figma is gradientStops.

2fill in blank

medium

Complete the code to set the direction of the linear gradient in Figma.

Figma

node.fills = [{ type: 'GRADIENT_LINEAR', gradientStops: [{ position: 0, color: { r: 0, g: 1, b: 0 } }, { position: 1, color: { r: 0, g: 0, b: 0 } }], [1]: [[0, 1, 0], [1, 0, 0]] }];

Drag options to blanks, or click blank then click option'

Atransform

Bdirection

CgradientTransform

Dangle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'direction' or 'angle' which are not valid properties in Figma fills.

Confusing 'transform' with 'gradientTransform'.

The gradientTransform property defines the direction and scale of the linear gradient in Figma.

3fill in blank

hard

Fix the error in the code to correctly apply a linear gradient fill with two colors in Figma.

Figma

node.fills = [{ type: 'GRADIENT_LINEAR', gradientStops: [{ position: 0, color: { r: 1, g: 1, b: 0 } }, { position: 1, color: { r: 0, g: 1, b: 1 } }], gradientTransform: [1] }];

Drag options to blanks, or click blank then click option'

A[1, 0, 0, 0, 1, 0]

B[[0, 1, 0], [1, 0, 0]]

C[[1, 0], [0, 1]]

D[[1, 0, 0], [0, 1, 0]]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a flat array instead of nested arrays.

Using arrays with incorrect length.

The gradientTransform must be a 2x3 matrix represented as an array of two arrays with three numbers each, like [[1, 0, 0], [0, 1, 0]].

4fill in blank

hard

Fill both blanks to create a linear gradient from red to blue with a vertical direction in Figma.

Figma

node.fills = [{ type: 'GRADIENT_LINEAR', [1]: [{ position: 0, color: { r: 1, g: 0, b: 0 } }, { position: 1, color: { r: 0, g: 0, b: 1 } }], [2]: [[0, 1, 0], [1, 0, 0]] }];

Drag options to blanks, or click blank then click option'

AgradientStops

Bcolors

CgradientTransform

Ddirection

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the properties or using invalid property names.

Incorrect gradientTransform matrix for vertical direction.

Use gradientStops to define the colors and gradientTransform to set the vertical direction of the gradient.

5fill in blank

hard

Fill all three blanks to create a linear gradient fill with green to yellow colors and a diagonal direction in Figma.

Figma

node.fills = [{ type: 'GRADIENT_LINEAR', [1]: [{ position: 0, color: { r: 0, g: 1, b: 0 } }, { position: 1, color: { r: 1, g: 1, b: 0 } }], [2]: [[1, 1, 0], [1, -1, 0]], [3]: true }];

Drag options to blanks, or click blank then click option'

AgradientStops

BgradientTransform

Cvisible

Denabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'enabled' instead of 'visible' for fill visibility.

Incorrect gradientTransform matrix for diagonal direction.

Use gradientStops for colors, gradientTransform for diagonal direction, and visible to make sure the fill is shown.