0
0
Figmabi_tool~15 mins

Linear gradient in Figma - Real Business Scenario

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
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.