Inner shadow effect in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Inner Shadow Effect Basics

Which statement best describes the inner shadow effect in Figma?

A It adds a shadow inside the edges of an object, creating a recessed look.

B It adds a shadow outside the edges of an object, making it appear raised.

C It changes the color of the object’s fill to a darker shade.

D It blurs the entire object to create a soft glow effect.

💡 Hint

Think about where the shadow appears relative to the object’s edges.

The inner shadow effect places a shadow inside the edges of an object, giving it a sunken or recessed appearance. This is different from outer shadows that appear outside the edges.

❓ visualization

intermediate

Identifying Inner Shadow Settings

Given a rectangle with an inner shadow applied, which setting combination will create a subtle inner shadow effect?

A Color: Black, Opacity: 80%, Blur: 0px, Offset X: 0, Offset Y: 0

B Color: Gray, Opacity: 50%, Blur: 20px, Offset X: 10px, Offset Y: 10px

C Color: White, Opacity: 100%, Blur: 0px, Offset X: 5px, Offset Y: 5px

D Color: Black, Opacity: 20%, Blur: 10px, Offset X: 0, Offset Y: 2px

💡 Hint

Subtle shadows usually have low opacity and some blur with small offset.

Option D uses a low opacity black shadow with moderate blur and a small vertical offset, which creates a subtle inner shadow effect. Other options either have no blur, too high opacity, or large offsets that create harsh or outer shadows.

❓ data_modeling

advanced

Layer Order Impact on Inner Shadow Visibility

In Figma, you have three overlapping layers: a blue rectangle at the bottom, a red circle in the middle, and a green square on top. You apply an inner shadow effect to the red circle. Which statement is true about the inner shadow visibility?

A The inner shadow is hidden because the blue rectangle below covers it.

B The inner shadow on the red circle is visible only within the red circle’s shape, unaffected by layers above or below.

C The inner shadow is visible on the green square because it is on top of the red circle.

D The inner shadow appears outside the red circle, overlapping the green square.

💡 Hint

Consider how inner shadows are clipped to the shape they are applied on.

Inner shadows are clipped inside the shape they are applied to. They do not extend outside the shape and are not affected by layers above or below. Therefore, the inner shadow on the red circle is visible only within its shape.

🔧 Formula Fix

advanced

Troubleshooting Inner Shadow Not Visible

You applied an inner shadow effect to a shape in Figma, but it is not visible. Which of the following is the most likely cause?

A The shape’s fill is set to 0% opacity, making the inner shadow invisible.

B The inner shadow color is set to black with 100% opacity.

C The blur value of the inner shadow is set to 10px.

D The offset X and Y values are set to 0.

💡 Hint

Think about how transparency affects visibility of effects.

If the shape’s fill is fully transparent (0% opacity), the inner shadow will not be visible because it is clipped inside the shape’s fill area. Other options do not prevent the shadow from showing.

🎯 Scenario

expert

Designing a Realistic Pressed Button Using Inner Shadow

You want to design a button in Figma that looks pressed in when clicked. Which combination of inner shadow settings will best achieve this effect?

A No inner shadow; only outer shadow with dark color, medium opacity, medium blur, offset Y positive.

B Inner shadow with light color, high opacity, large blur, offset X positive; no outer shadow.

C Inner shadow with dark color, low opacity, small blur, offset Y positive; and outer shadow with light color, low opacity, small blur, offset Y negative.

D Inner shadow with dark color, high opacity, no blur, offset X negative; outer shadow with dark color, high opacity, no blur, offset Y positive.

💡 Hint

Pressed buttons often have shadows inside edges and highlights outside edges to simulate depth.

Option C uses a dark inner shadow offset downward to simulate the button being pressed in, combined with a light outer shadow offset upward to create a subtle highlight. This combination creates a realistic pressed effect. Other options either lack the highlight or use incorrect shadow directions.

Practice

1. What is the main purpose of using the Inner shadow effect in Figma designs?

easy

A. To change the background color of the canvas

B. To create a glowing outline around objects

C. To add depth inside shapes for a 3D look

D. To add a drop shadow outside the shape

Solution

1. Step 1: Understand the effect purpose

   Inner shadow is used to create a shadow inside the edges of a shape, giving it depth.

2. Step 2: Compare with other shadow types

   Unlike drop shadow which is outside, inner shadow is inside the shape, creating a 3D effect.

3. Final Answer:

   To add depth inside shapes for a 3D look -> Option C

4. Quick Check:

   Inner shadow = depth inside shape [OK]

Hint: Inner shadow = shadow inside shape edges [OK]

Common Mistakes:

• Confusing inner shadow with drop shadow
• Thinking it changes background color
• Assuming it creates outer glow

2. Which of the following is the correct way to adjust the Inner shadow effect in Figma?

easy

A. Use the stroke tool to add inner shadow

B. Only change the color of the shadow

C. Apply a gradient fill to create inner shadow

D. Change color, opacity, blur, and offset values

Solution

1. Step 1: Identify adjustable properties

   Inner shadow effect allows changing color, opacity, blur, and offset to customize appearance.

2. Step 2: Eliminate incorrect methods

   Stroke tool and gradient fill do not create inner shadows; only effect settings do.

3. Final Answer:

   Change color, opacity, blur, and offset values -> Option D

4. Quick Check:

   Adjust inner shadow with color, opacity, blur, offset [OK]

Hint: Adjust four settings: color, opacity, blur, offset [OK]

Common Mistakes:

• Trying to use stroke or fill for inner shadow
• Changing only color without blur or offset
• Confusing inner shadow with outer shadow settings

3. Given a rectangle with an inner shadow effect set to color black, opacity 50%, blur 10, and offset X=5, Y=5, what visual result will you see?

medium

A. A soft black shadow inside the bottom-right edges of the rectangle

B. A sharp black shadow outside the top-left edges of the rectangle

C. A glowing black outline around the rectangle

D. No visible shadow effect

Solution

1. Step 1: Analyze inner shadow parameters

   Color black with 50% opacity means a semi-transparent black shadow. Blur 10 makes it soft. Offset X=5, Y=5 moves shadow inside bottom-right edges.

2. Step 2: Understand shadow placement

   Inner shadow appears inside shape edges, offset moves it to bottom-right inside edges, so shadow is soft and inside bottom-right.

3. Final Answer:

   A soft black shadow inside the bottom-right edges of the rectangle -> Option A

4. Quick Check:

   Inner shadow offset inside bottom-right = soft black shadow inside edges [OK]

Hint: Offset moves shadow inside edges direction [OK]

Common Mistakes:

• Thinking shadow is outside shape edges
• Ignoring blur effect making shadow soft
• Confusing opacity with color darkness

4. You applied an inner shadow effect but it is not visible on your shape. What is the most likely reason?

medium

A. The shadow color opacity is set to 0%

B. The blur value is too high

C. The offset values are negative

D. The shape has no fill color

Solution

1. Step 1: Check opacity impact

   If shadow opacity is 0%, the shadow is fully transparent and invisible.

2. Step 2: Evaluate other options

   High blur softens shadow but does not hide it; negative offset moves shadow inside but still visible; no fill color does not hide inner shadow.

3. Final Answer:

   The shadow color opacity is set to 0% -> Option A

4. Quick Check:

   Opacity 0% = invisible shadow [OK]

Hint: Check opacity first if shadow is invisible [OK]

Common Mistakes:

• Assuming blur hides shadow completely
• Thinking negative offset removes shadow
• Believing fill color affects shadow visibility

5. You want to create a button with a subtle inner shadow that looks like it is pressed inward. Which combination of inner shadow settings is best?

hard

A. Color: white, Opacity: 80%, Blur: 20, Offset X: -10, Offset Y: -10

B. Color: dark gray, Opacity: 30%, Blur: 5, Offset X: 2, Offset Y: 2

C. Color: black, Opacity: 100%, Blur: 0, Offset X: 0, Offset Y: 0

D. Color: red, Opacity: 50%, Blur: 15, Offset X: 10, Offset Y: 10

Solution

1. Step 1: Understand pressed button look

   A subtle inner shadow uses a dark gray color with low opacity and small blur and offset to create a gentle depth effect.

2. Step 2: Evaluate options

   Color: dark gray, Opacity: 30%, Blur: 5, Offset X: 2, Offset Y: 2 fits subtle pressed look with low opacity and small offset. Color: white, Opacity: 80%, Blur: 20, Offset X: -10, Offset Y: -10 is too bright and large offset. Color: black, Opacity: 100%, Blur: 0, Offset X: 0, Offset Y: 0 is harsh with no blur. Color: red, Opacity: 50%, Blur: 15, Offset X: 10, Offset Y: 10 uses red which is unusual for shadow.

3. Final Answer:

   Color: dark gray, Opacity: 30%, Blur: 5, Offset X: 2, Offset Y: 2 -> Option B

4. Quick Check:

   Subtle inner shadow = low opacity, small blur, small offset [OK]

Hint: Use low opacity and small offset for subtle inner shadow [OK]

Common Mistakes:

• Using full opacity makes shadow harsh
• Using bright colors for inner shadow
• Setting zero blur makes shadow sharp and unnatural