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.

Practice

1. What is the main purpose of a radial gradient in Figma?

easy

A. To create a color transition radiating from the center outward

B. To create a linear color transition from left to right

C. To add text effects to a shape

D. To change the shape's border style

Solution

1. Step 1: Understand radial gradient concept

   A radial gradient creates a smooth color transition starting from a center point and spreading outward in a circular pattern.

2. Step 2: Compare with other options

   Options A, C, and D describe different effects unrelated to radial gradients.

3. Final Answer:

   To create a color transition radiating from the center outward -> Option A

4. Quick Check:

   Radial gradient = center-outward color transition [OK]

Hint: Radial gradients spread colors from center outward [OK]

Common Mistakes:

• Confusing radial with linear gradients
• Thinking radial gradients affect text style
• Assuming radial gradients change borders

2. Which of the following is the correct way to set a radial gradient in Figma's fill panel?

easy

A. Select Effects > Blur, then apply radial gradient

B. Select Stroke > Solid, then pick radial gradient

C. Select Fill > Image, then choose radial gradient

D. Select Fill > Gradient > Radial, then adjust colors and center

Solution

1. Step 1: Identify where radial gradients are set

   Radial gradients are applied in the Fill section by choosing Gradient and then Radial type.

2. Step 2: Eliminate incorrect options

   Stroke does not support gradients like fill; Images and Effects sections do not apply radial gradients directly.

3. Final Answer:

   Select Fill > Gradient > Radial, then adjust colors and center -> Option D

4. Quick Check:

   Radial gradient set in Fill > Gradient > Radial [OK]

Hint: Radial gradients are set under Fill > Gradient > Radial [OK]

Common Mistakes:

• Trying to apply radial gradient under Stroke
• Confusing gradient with image fill
• Looking for radial gradient under Effects

3. Given a radial gradient with center at (50%, 50%) and radius set to 100%, what will happen if you move the center to (25%, 25%)?

medium

A. The gradient's center shifts to the top-left, changing color spread

B. The gradient becomes linear instead of radial

C. The radius automatically doubles

D. The gradient colors invert

Solution

1. Step 1: Understand center position effect

   Changing the center from (50%, 50%) to (25%, 25%) moves the gradient's origin toward the top-left corner.

2. Step 2: Analyze impact on gradient

   This shift changes how colors spread outward, but does not change gradient type, radius size, or invert colors.

3. Final Answer:

   The gradient's center shifts to the top-left, changing color spread -> Option A

4. Quick Check:

   Center change moves gradient origin [OK]

Hint: Center coordinates move gradient origin point [OK]

Common Mistakes:

• Thinking center change converts gradient type
• Assuming radius changes automatically
• Believing colors invert on center move

4. You applied a radial gradient but the colors look flat and not transitioning smoothly. What is the most likely mistake?

medium

A. Centering the gradient at (50%, 50%)

B. Setting the radius to 100%

C. Using only one color stop in the gradient

D. Applying the gradient to the stroke instead of fill

Solution

1. Step 1: Identify cause of flat gradient

   A radial gradient needs at least two color stops to create a smooth transition between colors.

2. Step 2: Check other options

   Radius and center settings affect spread but do not cause flatness; applying to stroke is invalid for fills.

3. Final Answer:

   Using only one color stop in the gradient -> Option C

4. Quick Check:

   At least two colors needed for smooth gradient [OK]

Hint: Use multiple color stops for smooth gradients [OK]

Common Mistakes:

• Using a single color stop
• Confusing radius size with color transition
• Applying gradient to stroke instead of fill

5. You want to create a radial gradient that highlights the center of a sales dashboard circle with a bright color fading to transparent edges. Which steps should you take?

hard

A. Apply a solid fill with a bright color and add a blur effect

B. Set center to (50%, 50%), add bright color stop at center, and transparent color stop at radius edge

C. Use linear gradient from top to bottom with bright to transparent colors

D. Set center to (0%, 0%), add dark color stop at center, and bright color stop at radius edge

Solution

1. Step 1: Position gradient center for highlight

   Centering at (50%, 50%) places the highlight in the middle of the circle.

2. Step 2: Set color stops for bright center fading out

   Use a bright color at the center stop and transparent color at the radius edge to create a fade effect.

3. Step 3: Confirm gradient type and effect

   Radial gradient with these settings highlights the center and fades outward smoothly.

4. Final Answer:

   Set center to (50%, 50%), add bright color stop at center, and transparent color stop at radius edge -> Option B

5. Quick Check:

   Bright center + transparent edge = radial highlight [OK]

Hint: Bright center color + transparent edge = radial highlight [OK]

Common Mistakes:

• Placing center off-center for highlight
• Using linear instead of radial gradient
• Using solid fill instead of gradient