Radial gradient in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a radial gradient fill in Figma.

Figma

fill.type = '[1]'

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

AGRADIENT_LINEAR

BGRADIENT_RADIAL

CSOLID

DIMAGE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GRADIENT_LINEAR' instead of 'GRADIENT_RADIAL'.

Setting fill type to 'SOLID' when a gradient is needed.

To create a radial gradient in Figma, the fill type must be set to 'GRADIENT_RADIAL'.

2fill in blank

medium

Complete the code to set the gradient stops for a radial gradient in Figma.

Figma

fill.gradientStops = [[1]]

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

A{position: 0, color: {r: 1, g: 0, b: 0, a: 1}}

B{position: 1, color: {r: 0, g: 1, b: 0, a: 1}}

C{pos: 0, color: {r: 1, g: 0, b: 0, a: 1}}

D{position: 0, color: 'red'}

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pos' instead of 'position'.

Using color strings instead of RGBA objects.

Gradient stops require 'position' and a color object with RGBA values.

3fill in blank

hard

Fix the error in the code to correctly set the radial gradient's center point.

Figma

fill.gradientTransform = [[1, 0, [1]], [0, 1, [1]], [0, 0, 1]]

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

A0.5

B1

C0

D-0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 or 1 instead of 0.5 for center coordinates.

Using negative values which are invalid here.

The center of the radial gradient is at 0.5 on both axes in the transform matrix.

4fill in blank

hard

Fill both blanks to set a radial gradient with two stops: red at start and blue at end.

Figma

fill.gradientStops = [[1], [2]]

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

A{position: 0, color: {r: 1, g: 0, b: 0, a: 1}}

B{position: 1, color: {r: 0, g: 0, b: 1, a: 1}}

C{position: 0, color: {r: 0, g: 1, b: 0, a: 1}}

D{position: 1, color: {r: 1, g: 1, b: 0, a: 1}}

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping positions or colors incorrectly.

Using green or yellow instead of red or blue.

The first stop is red at position 0, the second is blue at position 1.

5fill in blank

hard

Fill all three blanks to create a radial gradient fill with center at (0.5, 0.5) and stops red at 0 and green at 1.

Figma

fill.type = '[1]'; fill.gradientTransform = [[1, 0, [2]], [0, 1, [2]], [0, 0, 1]]; fill.gradientStops = [[3], {position: 1, color: {r: 0, g: 1, b: 0, a: 1}}]

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

AGRADIENT_RADIAL

B0.5

C{position: 0, color: {r: 1, g: 0, b: 0, a: 1}}

DGRADIENT_LINEAR

Attempts:

3 left

💡 Hint

Common Mistakes

Using GRADIENT_LINEAR instead of GRADIENT_RADIAL.

Incorrect center coordinates like 0 or 1.

Wrong color stops or positions.

Set fill type to 'GRADIENT_RADIAL', center coordinates to 0.5, and first stop to red at position 0.