Opacity control in Figma - Step-by-Step Guide

Introduction

Opacity control lets you make elements see-through. This helps highlight or hide parts of your dashboard visuals without deleting them. It improves focus and clarity in your reports.

When you want to make a background shape less distracting behind text or charts

When you need to show a selected data point clearly by dimming others

When layering multiple visuals and want some to appear lighter

When creating hover effects that fade elements in or out

When adjusting the visibility of annotations or labels without removing them

Steps

Step 1: Select the element you want to adjust

- Canvas or Layers panel

The element is highlighted and ready for editing

Step 2: Open the Design panel on the right side

- Right sidebar under the Properties tab

You see properties like Fill, Stroke, and Opacity for the selected element

Step 3: Locate the Opacity slider or input box

- Design panel under the 'Opacity' label

You can now change the transparency level of the element

Step 4: Drag the Opacity slider left or right or type a value between 0 and 100

- Opacity control in the Design panel

The element becomes more transparent as you lower the value or more solid as you increase it

Step 5: Click outside the panel or press Enter to apply the change

- Anywhere on the canvas or keyboard

The opacity change is saved and visible on the canvas

Before vs After

Before

A blue rectangle with full opacity (100%) covers part of the chart, blocking details behind it

After

The same blue rectangle set to 30% opacity, allowing the chart details behind it to be visible through the shape

Settings Reference

Opacity

📍 Design panel on the right sidebar

Controls how see-through the selected element is

Default: 100%

Common Mistakes

Setting opacity to 0% and forgetting the element is still there

The element is invisible but still blocks clicks or interactions on layers below

If you want to remove interaction, hide or delete the element instead of just lowering opacity to 0%

Using very low opacity on text making it hard to read

Text with low opacity loses contrast and becomes difficult to see

Keep text opacity high for readability; use opacity on backgrounds or shapes instead

Summary

Opacity control adjusts how transparent an element appears on your dashboard.

Use it to highlight or soften visuals without removing them.

Remember that fully transparent elements still exist and can block interactions.

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