Bird
Raised Fist0
Figmabi_tool~15 mins

Linear gradient in Figma - Real Business Scenario

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Scenario Mode
šŸ‘¤ Your Role: You are a UI designer working with the marketing team.
šŸ“‹ Request: Your manager wants a visually appealing dashboard background using a smooth color transition.
šŸ“Š Data: You have access to Figma design tools and color palettes.
šŸŽÆ Deliverable: Create a dashboard background with a linear gradient from blue to green.
Progress0 / 6 steps
Sample Data
Color NameHex Code
Blue#0000FF
Green#00FF00
1
Step 1: Open Figma and create a new frame sized 1200x800 pixels.
Use the Frame tool (F) and set width=1200, height=800.
Expected Result
A blank frame of 1200x800 pixels appears.
2
Step 2: Select the frame and open the Fill settings.
Click on the Fill color square in the right panel.
Expected Result
Fill color options appear for the frame.
3
Step 3: Change the Fill type from Solid to Linear Gradient.
Click the dropdown next to Fill and select 'Linear'.
Expected Result
The fill changes to a linear gradient with two color stops.
4
Step 4: Set the first color stop to blue (#0000FF) and the second to green (#00FF00).
Click the left color stop and enter #0000FF, then click the right stop and enter #00FF00.
Expected Result
The gradient smoothly transitions from blue on the left to green on the right.
5
Step 5: Adjust the gradient angle to 90 degrees for a vertical transition.
Drag the gradient handles or enter 90Ā° in the angle input.
Expected Result
The gradient flows from top (blue) to bottom (green).
6
Step 6: Save your design and export the frame as a PNG for use in the dashboard.
Select the frame, click Export, choose PNG format, and save.
Expected Result
A PNG file with the linear gradient background is saved.
Final Result
ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚  <- Blue at top
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚  <- Gradient transition
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚
ā”‚ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā”‚  <- Green at bottom
ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜
āœ“Linear gradients create smooth color transitions that enhance visual appeal.
āœ“Using blue to green gradient provides a fresh and calm background.
āœ“Adjusting gradient angle changes the direction of color flow.
Bonus Challenge

Create a diagonal linear gradient background from top-left blue (#0000FF) to bottom-right green (#00FF00).

Show Hint
Set the gradient angle to 45 degrees in the Fill settings.

Practice

(1/5)
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