0
0
Figmabi_tool~20 mins

Inner shadow effect in Figma - Practice Problems & Coding Challenges

Choose your learning style9 modes available
Challenge - 5 Problems
🎖️
Inner Shadow Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
Understanding Inner Shadow Effect Basics

Which statement best describes the inner shadow effect in Figma?

AIt adds a shadow inside the edges of an object, creating a recessed look.
BIt adds a shadow outside the edges of an object, making it appear raised.
CIt changes the color of the object’s fill to a darker shade.
DIt blurs the entire object to create a soft glow effect.
Attempts:
2 left
💡 Hint

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

visualization
intermediate
1:30remaining
Identifying Inner Shadow Settings

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

AColor: Black, Opacity: 80%, Blur: 0px, Offset X: 0, Offset Y: 0
BColor: Gray, Opacity: 50%, Blur: 20px, Offset X: 10px, Offset Y: 10px
CColor: White, Opacity: 100%, Blur: 0px, Offset X: 5px, Offset Y: 5px
DColor: Black, Opacity: 20%, Blur: 10px, Offset X: 0, Offset Y: 2px
Attempts:
2 left
💡 Hint

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

data_modeling
advanced
2:00remaining
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?

AThe inner shadow is hidden because the blue rectangle below covers it.
BThe inner shadow on the red circle is visible only within the red circle’s shape, unaffected by layers above or below.
CThe inner shadow is visible on the green square because it is on top of the red circle.
DThe inner shadow appears outside the red circle, overlapping the green square.
Attempts:
2 left
💡 Hint

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

🔧 Formula Fix
advanced
1:30remaining
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?

AThe shape’s fill is set to 0% opacity, making the inner shadow invisible.
BThe inner shadow color is set to black with 100% opacity.
CThe blur value of the inner shadow is set to 10px.
DThe offset X and Y values are set to 0.
Attempts:
2 left
💡 Hint

Think about how transparency affects visibility of effects.

🎯 Scenario
expert
2:30remaining
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?

ANo inner shadow; only outer shadow with dark color, medium opacity, medium blur, offset Y positive.
BInner shadow with light color, high opacity, large blur, offset X positive; no outer shadow.
CInner shadow with dark color, low opacity, small blur, offset Y positive; and outer shadow with light color, low opacity, small blur, offset Y negative.
DInner shadow with dark color, high opacity, no blur, offset X negative; outer shadow with dark color, high opacity, no blur, offset Y positive.
Attempts:
2 left
💡 Hint

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