Linear gradient in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Linear Gradient Direction

In Figma, you apply a linear gradient to a rectangle. Which option correctly describes how the gradient direction is set?

A The gradient direction is set by dragging the gradient line from start to end points on the shape.

B The gradient direction is fixed and cannot be changed once applied.

C The gradient direction is automatically vertical and cannot be customized.

D The gradient direction is controlled by the color picker only.

💡 Hint

Think about how you can visually adjust the gradient on the shape.

In Figma, you set the linear gradient direction by dragging the gradient line across the shape, defining where the gradient starts and ends.

❓ visualization

intermediate

Identifying Correct Linear Gradient Setup

You want a linear gradient that goes from blue on the left to red on the right of a rectangle. Which gradient setup in Figma will produce this effect?

A Gradient line starts on the left with blue color stop and ends on the right with red color stop.

B Gradient line starts on the top with red color stop and ends on the bottom with blue color stop.

C Gradient line starts on the right with blue color stop and ends on the left with red color stop.

D Gradient line starts on the bottom with red color stop and ends on the top with blue color stop.

💡 Hint

Remember the gradient direction matches the line from start color to end color.

To get blue on the left and red on the right, the gradient line must start on the left with blue and end on the right with red.

❓ dax_lod_result

advanced

Calculating Gradient Stop Positions

You have a linear gradient with three color stops at positions 0%, 50%, and 100%. What is the position value of the middle stop in decimal form?

A 0.25

B 0.0

C 1.0

D 0.5

💡 Hint

Convert percentage to decimal by dividing by 100.

50% equals 0.5 in decimal form, which is the middle stop position.

🎯 Scenario

advanced

Adjusting Gradient for Accessibility

You created a linear gradient background from light gray to white. Users with low vision find it hard to see the content on top. What is the best adjustment to improve accessibility?

A Remove the gradient and use pure white background only.

B Increase the contrast by making the gradient darker on one side and lighter on the other.

C Make the gradient colors closer in shade to keep it subtle.

D Add more color stops with similar light colors.

💡 Hint

Think about contrast and visibility for text on backgrounds.

Increasing contrast by darkening one side improves readability and accessibility for users with low vision.

🔧 Formula Fix

expert

Fixing Unexpected Gradient Behavior

You applied a linear gradient but the colors appear reversed on your shape. Which option explains the most likely cause?

A The gradient type was accidentally set to radial instead of linear.

B The colors were assigned in the wrong order in the color picker but the gradient line is correct.

C The gradient line was dragged from end color to start color, reversing the gradient direction.

D The shape's fill opacity is set to 0%, making colors invisible.

💡 Hint

Consider how dragging the gradient line affects color direction.

Dragging the gradient line from the end color to the start color reverses the gradient direction, causing colors to appear swapped.

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