How to Add Shadows in Figma: 4 Techniques
Master shadow techniques from basic drop shadows to AI realistic shadows. Learn when to use each method for UI design vs product photography.
Shadow Types Comparison
| Technique | Best For | Realism | Setup Time |
|---|---|---|---|
| Native Drop Shadow | UI elements, cards, buttons | Low | 10 seconds |
| Manual Shading | Custom illustrations | Medium | 10+ minutes |
| AI Realistic Shadow | Product photos | Very High | 2 seconds |
| Ground/Floor Shadow | E-commerce, mockups | Very High | 2 seconds |
Technique 1: Native Drop Shadow (UI Elements)
Figma's built-in drop shadow is perfect for UI components like buttons, cards, and overlays.
How to Add
- Select your object (frame, rectangle, text, etc.)
- In the right sidebar, find the Effects section
- Click + → Drop Shadow
- Adjust settings: X/Y offset, Blur, Spread, Color, Opacity
Common Settings
X: 0, Y: 2, Blur: 8, Spread: 0, Color: #000, Opacity: 8%
X: 0, Y: 8, Blur: 16, Spread: 0, Color: #000, Opacity: 12%
X: 0, Y: 4, Blur: 12, Spread: 0, Color: #000, Opacity: 15%
When NOT to Use Drop Shadow
Don't use drop shadows for product photos or realistic mockups. They look artificial. Use AI realistic shadows instead (see Technique 3).
Technique 2: Manual Shading (Advanced)
For custom illustrations or when you need complete control.
Steps
- Duplicate your object layer
- Move duplicate slightly below and offset (X: 2px, Y: 4px)
- Change fill to dark gray or black with 20-40% opacity
- Add Gaussian blur (4-12px) for soft shadow edge
- Optionally: use gradient for shadow falloff
Drawbacks
- • Time-consuming (10-20 minutes per object)
- • Difficult to update if object changes
- • Hard to match light direction consistently
- • Not realistic for photorealistic work
Technique 3: AI Realistic Shadows (Recommended for Products)
For product photos, mockups, and any image needing photorealistic shadows.
How It Works (AuraFx)
- Select your product image (background should be removed first)
- Open AuraFx plugin → Click "Add Shadow"
- AI analyzes object shape, depth, and generates realistic shadow
- Adjust intensity and distance if needed
- Accept — shadow layer is created beneath your object
Contact Shadows
AI creates darker shadow where object touches surface
Natural Falloff
Shadow fades realistically with distance
Ambient Occlusion
Subtle shading in crevices and edges
Best Use Cases
- E-commerce product photos (shoes, electronics, cosmetics)
- App/website mockups on devices
- Marketing materials (social posts, ads)
- Presentation decks with product images
Technique 4: Ground/Floor Shadows
Specialized shadow that creates the illusion of objects resting on a surface.
When to Use
- →Product catalogs (items appear to sit on white surface)
- →Levitating effect (subtle ground shadow creates floating illusion)
- →E-commerce listings (professional Amazon/Shopify style)
With AuraFx
AuraFx includes specialized ground shadow that:
- • Matches object perspective and viewing angle
- • Creates natural contact point with "floor"
- • Adjustable elevation (sitting vs floating)
- • Works with transparent backgrounds
Decision Guide: Which Shadow Technique?
Use Native Drop Shadow For:
UI elements (buttons, cards, modals), icons, text layers, frame containers
Use Manual Shading For:
Custom illustrations, logos, vector graphics where you need full artistic control
Use AI Realistic Shadows For:
Product photos, mockups, any raster image needing photorealistic shadow, marketing materials
Use Ground Shadows For:
E-commerce listings, product catalogs, creating floating/levitating effects
Frequently Asked Questions
How do I add a drop shadow in Figma?
Select your object → Effects panel (right sidebar) → Click + → Choose Drop Shadow. Adjust X/Y offset, blur, and spread. For UI elements, use subtle shadows (2px blur, 10-20% opacity). For product photos, use AI realistic shadows instead.
What's the difference between drop shadow and realistic shadow?
Drop shadows are uniform, artificial-looking effects suitable for UI elements. Realistic shadows (AI-generated) analyze object shape, create natural light falloff, contact shadows, and ambient occlusion. Use drop shadows for buttons/cards, realistic shadows for product photos.
Can I add ground shadows to product photos in Figma?
Figma doesn't have native ground shadows. You need a plugin like AuraFx which uses AI to generate realistic ground/floor shadows that match object perspective and create natural contact points.
Add Professional Shadows in Seconds
Get AuraFx with AI realistic shadows, ground shadows, and 20+ features for $9 one-time.
Get AuraFx for $9