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.

Practice

1. What does a linear gradient do in a Figma design?

easy

A. Adds a shadow effect to objects

B. Rotates the object by a certain angle

C. Changes the font style of text

D. Creates a smooth blend of colors in one direction

Solution

1. Step 1: Understand the purpose of linear gradients

   Linear gradients blend two or more colors smoothly along a straight line.

2. Step 2: Identify the effect in Figma

   In Figma, linear gradients create color transitions in one direction, enhancing visual appeal.

3. Final Answer:

   Creates a smooth blend of colors in one direction -> Option D

4. Quick Check:

   Linear gradient = smooth color blend [OK]

Hint: Linear gradient blends colors smoothly in a line [OK]

Common Mistakes:

• Confusing gradient with shadow effects
• Thinking it changes text font
• Assuming it rotates objects

2. Which of the following is the correct way to set a linear gradient angle in Figma?

easy

A. linear-gradient(45deg, #FF0000, #0000FF)

B. linear-gradient(45, #FF0000, #0000FF)

C. linear-gradient(45rad, #FF0000, #0000FF)

D. linear-gradient(45%, #FF0000, #0000FF)

Solution

1. Step 1: Recognize the angle unit for linear gradients

   Figma uses degrees (deg) to specify the angle of a linear gradient.

2. Step 2: Check each option's syntax

   linear-gradient(45deg, #FF0000, #0000FF) uses '45deg' which is correct; others use invalid units like '45', '45rad', or '45%'.

3. Final Answer:

   linear-gradient(45deg, #FF0000, #0000FF) -> Option A

4. Quick Check:

   Angle unit = deg [OK]

Hint: Use 'deg' for angles in linear gradients [OK]

Common Mistakes:

• Omitting 'deg' unit for angle
• Using radians or percentages incorrectly
• Confusing angle with color stop values

3. What will be the visual result of this Figma linear gradient code?
linear-gradient(90deg, #00FF00 0%, #0000FF 100%)

medium

A. A solid green color with no gradient

B. A gradient from blue on the left to green on the right

C. A gradient from green on the left to blue on the right

D. A gradient from green at the top to blue at the bottom

Solution

1. Step 1: Understand the angle 90deg in linear gradients

   90 degrees means the gradient goes horizontally from left (0%) to right (100%).

2. Step 2: Analyze the color stops

   Color starts with green (#00FF00) at 0% (left) and transitions to blue (#0000FF) at 100% (right).

3. Final Answer:

   A gradient from green on the left to blue on the right -> Option C

4. Quick Check:

   90deg = left to right gradient [OK]

Hint: 90deg means left to right gradient [OK]

Common Mistakes:

• Mixing up start and end colors
• Confusing horizontal with vertical gradient
• Ignoring color stop percentages

4. Identify the error in this Figma linear gradient code:
linear-gradient(180, #FF0000, #00FF00)

medium

A. Gradient must have at least three colors

B. Missing 'deg' unit for the angle

C. Gradient direction cannot be 180

D. Colors are not valid hex codes

Solution

1. Step 1: Check the angle syntax

   The angle '180' must include the unit 'deg' to be valid in Figma.

2. Step 2: Verify color codes and gradient rules

   Colors '#FF0000' and '#00FF00' are valid hex codes; 180deg is a valid direction; two colors are allowed.

3. Final Answer:

   Missing 'deg' unit for the angle -> Option B

4. Quick Check:

   Angle unit required = deg [OK]

Hint: Always add 'deg' after angle number [OK]

Common Mistakes:

• Leaving out 'deg' unit
• Thinking colors are invalid
• Assuming gradient needs 3+ colors

5. You want to highlight a sales dashboard header with a linear gradient that fades from transparent to blue horizontally. Which Figma code achieves this best?

hard

A. linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%)

B. linear-gradient(0deg, #0000FF 0%, #FFFFFF 100%)

C. linear-gradient(180deg, #0000FF 0%, transparent 100%)

D. linear-gradient(45deg, #0000FF, #00FFFF)

Solution

1. Step 1: Understand the requirement for horizontal fade from transparent to blue

   The gradient should go left to right (90deg) starting transparent blue to solid blue.

2. Step 2: Analyze each option

   linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%) uses rgba with alpha 0 to 1 horizontally, matching the requirement. Others have wrong directions or colors.

3. Final Answer:

   linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%) -> Option A

4. Quick Check:

   Horizontal transparent to blue = linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%) [OK]

Hint: Use rgba with alpha for transparency in gradients [OK]

Common Mistakes:

• Using wrong angle for horizontal fade
• Using hex colors without transparency
• Reversing color stops order