Opacity control in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business analyst creating a sales performance dashboard.

📋 Request: Your manager wants you to design a dashboard where different sales regions are shown with varying opacity to highlight top performers clearly.

📊 Data: You have sales data by region and total sales amount. You will use opacity to visually emphasize regions with higher sales.

🎯 Deliverable: Create a dashboard in Figma that uses opacity control on region blocks to represent sales performance, with higher sales regions having higher opacity.

Sample Data

Region	Total Sales ($)
North	120000
South	90000
East	150000
West	70000
Central	110000

1

Step 1: Open Figma and create a new frame sized 800x600 pixels for the dashboard.

Use the Frame tool and set width=800px, height=600px.

Expected Result

A blank frame of 800x600 pixels appears, ready for design.

2

Step 2: Create five rectangles inside the frame, each representing a sales region.

Use the Rectangle tool to draw five equal-sized rectangles arranged vertically with spacing.

Expected Result

Five rectangles appear stacked vertically inside the frame.

3

Step 3: Label each rectangle with the region name and total sales value from the sample data.

Use the Text tool to add region names and sales amounts on each rectangle: North - 120000, South - 90000, East - 150000, West - 70000, Central - 110000.

Expected Result

Each rectangle is clearly labeled with its region and sales amount.

4

Step 4: Calculate the maximum sales value to normalize opacity levels.

Max sales = 150000 (East region).

Expected Result

Maximum sales value identified as 150000.

5

Step 5: Set the opacity of each rectangle proportional to its sales compared to the maximum sales.

Opacity = (Region Sales / Max Sales). For example, East opacity = (150000/150000) = 1 (100%), West opacity = (70000/150000) ≈ 0.47 (47%).

Expected Result

Rectangles have varying opacity: East 100%, North 80%, Central 73%, South 60%, West 47%.

6

Step 6: Apply a consistent fill color to all rectangles (e.g., blue) and adjust their opacity as calculated.

Select all rectangles, set fill color to blue (#0000FF), then set opacity individually as per step 5.

Expected Result

All rectangles are blue with different transparency levels reflecting sales.

7

Step 7: Add a title at the top of the frame: 'Sales Performance by Region'.

Use Text tool, font size 24px, bold, centered at top.

Expected Result

Dashboard has a clear title at the top.

8

Step 8: Review the dashboard for clarity and ensure higher sales regions stand out due to higher opacity.

Visually confirm East and North rectangles are more opaque and catch attention.

Expected Result

Dashboard clearly highlights top sales regions by opacity.

Final Result

East $150,000

↓

North $120,000

↓

Central $110,000

↓

South $90,000

↓

West $70,000

✓East region has the highest sales and is shown with full opacity.

✓West region has the lowest sales and is shown with the lowest opacity.

✓Opacity effectively highlights sales performance visually.

Bonus Challenge

Add a tooltip interaction in Figma that shows exact sales numbers when hovering over each region rectangle.

Show Hint

Use Figma's prototyping features to create hover overlays with text showing sales values.

Practice

1. What does setting the opacity to 0% do to an object in Figma?

easy

A. Makes the object completely invisible

B. Makes the object fully visible

C. Changes the object color to white

D. Locks the object from editing

Solution

1. Step 1: Understand opacity scale

   Opacity ranges from 0% (invisible) to 100% (fully visible).

2. Step 2: Apply opacity 0%

   Setting opacity to 0% means the object is fully transparent and cannot be seen.

3. Final Answer:

   Makes the object completely invisible -> Option A

4. Quick Check:

   Opacity 0% = Invisible [OK]

Hint: Opacity 0% means fully invisible, 100% fully visible [OK]

Common Mistakes:

• Confusing opacity 0% with white color
• Thinking opacity 0% locks the object
• Assuming opacity 0% makes object semi-transparent

2. Which of the following is the correct way to set opacity to 50% in Figma's Properties panel?

easy

A. Type 500 in the opacity input box

B. Type 0.5 in the opacity input box

C. Type 5 in the opacity input box

D. Type 50 in the opacity input box

Solution

1. Step 1: Check opacity input format

   Figma opacity is set as a percentage from 0 to 100, not decimal.

2. Step 2: Identify correct input for 50%

   Typing 50 means 50% opacity, which is half transparent.

3. Final Answer:

   Type 50 in the opacity input box -> Option D

4. Quick Check:

   Opacity input uses percentage numbers [OK]

Hint: Use whole numbers 0-100 for opacity, not decimals [OK]

Common Mistakes:

• Entering decimal like 0.5 instead of 50
• Typing values greater than 100
• Confusing opacity with fill color values

3. If a rectangle has opacity set to 30% and a blue fill color, what will be the visual effect on a white background?

medium

A. The rectangle appears white

B. The rectangle appears as a light blue transparent shape

C. The rectangle appears fully blue and opaque

D. The rectangle is invisible

Solution

1. Step 1: Understand opacity effect on color

   Opacity reduces the color's visibility by making it transparent.

2. Step 2: Apply 30% opacity on blue fill

   Blue color will show but faintly, blending with white background.

3. Final Answer:

   The rectangle appears as a light blue transparent shape -> Option B

4. Quick Check:

   Low opacity = lighter, transparent color [OK]

Hint: Lower opacity means color looks lighter and see-through [OK]

Common Mistakes:

• Thinking opacity changes the fill color itself
• Assuming 30% opacity means mostly opaque
• Confusing opacity with brightness

4. You set an object's opacity to 120% in Figma. What will happen?

medium

A. Figma will show an error and not accept the value

B. The object will become invisible

C. The opacity will be capped at 100%

D. The object will become semi-transparent

Solution

1. Step 1: Check valid opacity range

   Opacity values must be between 0% and 100% in Figma.

2. Step 2: Understand input behavior for out-of-range values

   Figma caps values above 100% to 100%, no error shown.

3. Final Answer:

   The opacity will be capped at 100% -> Option C

4. Quick Check:

   Opacity max is 100%, inputs above are capped [OK]

Hint: Opacity cannot exceed 100%, values above are limited [OK]

Common Mistakes:

• Expecting an error message for invalid opacity
• Thinking opacity above 100% makes object invisible
• Assuming opacity can be more than fully visible

5. You want to highlight a button by making the background color fully visible but the icon on top semi-transparent at 40% opacity. How should you set the opacity values?

hard

A. Set button background opacity to 100% and icon opacity to 40%

B. Set button background opacity to 40% and icon opacity to 100%

C. Set both button background and icon opacity to 40%

D. Set both button background and icon opacity to 100%

Solution

1. Step 1: Identify desired visibility for button background

   The background should be fully visible, so opacity must be 100%.

2. Step 2: Identify desired visibility for icon

   The icon should be semi-transparent, so set opacity to 40%.

3. Final Answer:

   Set button background opacity to 100% and icon opacity to 40% -> Option A

4. Quick Check:

   Background fully visible + icon semi-transparent = Set button background opacity to 100% and icon opacity to 40% [OK]

Hint: Full opacity for background, lower opacity for overlay elements [OK]

Common Mistakes:

• Setting background opacity too low and losing visibility
• Making icon fully opaque when semi-transparent is needed
• Confusing which element needs which opacity