Bird
Raised Fist0
Figmabi_tool~10 mins

Drop shadow effect in Figma - Interactive Code Practice

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to add a drop shadow effect with default settings.

Figma
layer.effects = [[1]]
Drag options to blanks, or click blank then click option'
A{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 4 }, radius: 4 }
B{ type: 'INNER_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 4 }, radius: 4 }
C{ type: 'LAYER_BLUR', visible: true, radius: 4 }
D{ type: 'BACKGROUND_BLUR', visible: true, radius: 4 }
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'INNER_SHADOW' instead of 'DROP_SHADOW'.
Confusing blur effects with shadow effects.
2fill in blank
medium

Complete the code to set the drop shadow color to semi-transparent red.

Figma
layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: [1], g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 4 }, radius: 4 }]
Drag options to blanks, or click blank then click option'
A0
B0.25
C0.5
D1
Attempts:
3 left
💡 Hint
Common Mistakes
Setting red channel to 0 or less than 1 causes no red color.
Confusing alpha (a) with red (r) channel.
3fill in blank
hard

Fix the error in the code to correctly apply a drop shadow with offset x=5 and y=5.

Figma
layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.3 }, offset: { x: [1], y: 5 }, radius: 10 }]
Drag options to blanks, or click blank then click option'
A'5'
B-5
C5
D0
Attempts:
3 left
💡 Hint
Common Mistakes
Using string '5' instead of number 5 causes errors.
Using negative values when positive offset is needed.
4fill in blank
hard

Fill both blanks to create a drop shadow with offset x=3 and y=6.

Figma
layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.4 }, offset: { x: [1], y: [2] }, radius: 8 }]
Drag options to blanks, or click blank then click option'
A3
B6
C5
D0
Attempts:
3 left
💡 Hint
Common Mistakes
Swapping x and y values.
Using zero for offset which removes shadow displacement.
5fill in blank
hard

Fill all three blanks to create a drop shadow with radius 12, offset x=7, and alpha transparency 0.25.

Figma
layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: [1] }, offset: { x: [2], y: 0 }, radius: [3] }]
Drag options to blanks, or click blank then click option'
A0.25
B7
C12
D0.5
Attempts:
3 left
💡 Hint
Common Mistakes
Using alpha 0.5 instead of 0.25 for lighter shadow.
Mixing up radius and offset values.

Practice

(1/5)
1. What is the main purpose of using a drop shadow effect in a Figma design for a business dashboard?
easy
A. To make important visuals stand out by adding depth
B. To change the color of the text
C. To increase the size of the dashboard elements
D. To remove background colors from visuals

Solution

  1. Step 1: Understand the visual purpose of drop shadows

    Drop shadows create a sense of depth, making elements appear raised or separate from the background.

  2. Step 2: Connect to dashboard design goals

    In business dashboards, this helps important visuals stand out clearly for better readability and focus.

  3. Final Answer:

    To make important visuals stand out by adding depth -> Option A

  4. Quick Check:

    Drop shadow = add depth to highlight [OK]
Hint: Drop shadows add depth, not color or size changes [OK]
Common Mistakes:
  • Confusing drop shadow with color fill
  • Thinking drop shadow changes element size
  • Assuming drop shadow removes backgrounds
2. Which of the following is the correct way to set a drop shadow effect in Figma?
easy
A. Select the object, go to Effects panel, choose 'Drop shadow', then adjust offset and blur
B. Right-click the object and select 'Add border color'
C. Use the Text tool and type 'shadow' inside the object
D. Change the fill color to black with 50% opacity

Solution

  1. Step 1: Locate the Effects panel in Figma

    In Figma, drop shadows are added via the Effects panel on the right sidebar.

  2. Step 2: Apply and customize drop shadow

    Select 'Drop shadow' effect, then adjust offset (position) and blur (softness) to get the desired look.

  3. Final Answer:

    Select the object, go to Effects panel, choose 'Drop shadow', then adjust offset and blur -> Option A

  4. Quick Check:

    Drop shadow setup = Effects panel + offset + blur [OK]
Hint: Drop shadows are set in Effects panel, not fill or text tools [OK]
Common Mistakes:
  • Trying to add shadow via border or fill color
  • Typing 'shadow' as text inside objects
  • Looking for shadow options in unrelated menus
3. Given a drop shadow with offset X=5, Y=5 and blur=10, what visual effect will this create on a dashboard element?
medium
A. A sharp shadow directly behind the element
B. A soft shadow shifted diagonally down-right from the element
C. A shadow that appears above and to the left of the element
D. No visible shadow because blur is too high

Solution

  1. Step 1: Interpret offset values

    Offset X=5 and Y=5 moves the shadow 5 pixels right and 5 pixels down, so diagonally down-right.

  2. Step 2: Understand blur effect

    Blur=10 means the shadow edges are soft and spread out, not sharp.

  3. Final Answer:

    A soft shadow shifted diagonally down-right from the element -> Option B

  4. Quick Check:

    Offset + blur = soft shadow down-right [OK]
Hint: Positive X,Y offset moves shadow down-right with blur softening edges [OK]
Common Mistakes:
  • Assuming shadow is sharp with high blur
  • Confusing offset direction signs
  • Thinking blur removes shadow visibility
4. You applied a drop shadow effect but it is not visible on your dashboard element. Which of the following is the most likely cause?
medium
A. The offset values are negative
B. The element has no fill color
C. The shadow color opacity is set to 0%
D. The blur value is set to 0

Solution

  1. Step 1: Check shadow color opacity

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

  2. Step 2: Evaluate other options

    No fill color or blur=0 still show shadows; negative offset just moves shadow position but does not hide it.

  3. Final Answer:

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

  4. Quick Check:

    Opacity 0% = invisible shadow [OK]
Hint: Check shadow opacity first if shadow is invisible [OK]
Common Mistakes:
  • Assuming no fill hides shadow
  • Thinking zero blur removes shadow
  • Confusing negative offset with no shadow
5. You want to highlight a key KPI card on your dashboard using a drop shadow. Which combination of settings will create a subtle but effective shadow without cluttering the design?
hard
A. Offset X=-5, Y=-5; Blur=15; Shadow color black with 100% opacity
B. Offset X=10, Y=10; Blur=20; Shadow color black with 80% opacity
C. Offset X=0, Y=0; Blur=0; Shadow color white with 50% opacity
D. Offset X=2, Y=2; Blur=5; Shadow color black with 20% opacity

Solution

  1. Step 1: Understand subtle shadow characteristics

    Subtle shadows have small offsets, moderate blur, and low opacity to avoid clutter.

  2. Step 2: Evaluate each option

    Offset X=2, Y=2; Blur=5; Shadow color black with 20% opacity has small offset (2,2), moderate blur (5), and low opacity (20%) making it subtle and effective. Others are too strong, invisible, or harsh.

  3. Final Answer:

    Offset X=2, Y=2; Blur=5; Shadow color black with 20% opacity -> Option D

  4. Quick Check:

    Small offset + low opacity = subtle shadow [OK]
Hint: Use small offset and low opacity for subtle shadows [OK]
Common Mistakes:
  • Using large offsets and high opacity causing clutter
  • Setting zero blur making shadow harsh
  • Using white shadow which is invisible on light backgrounds