I’m working on an Android app and trying to match the shadow design from my Figma mockups. Currently I’m using a CardView with android:elevation=“12dp” but the shadow appears too harsh compared to what I see in Figma.
The Figma design shows a softer Drop Shadow effect that looks much more subtle and refined. When I apply elevation to my CardView, the shadow seems blocky and doesn’t have that smooth gradient appearance.
Has anyone found a good method to recreate Figma shadow styling in Android layouts? I’ve tried adjusting the elevation values but can’t seem to get that soft shadow look. Are there alternative approaches or custom drawable solutions that work better for matching design specifications?
Been dealing with this shadow mess for years. Figma shadows vs Android elevation - it’s the most common design handoff headache I run into.
Manually converting shadow values every time designers update something? Total nightmare. You end up tweaking drawables more than actually building features.
I just automated the whole thing. Built a workflow that watches Figma files for shadow changes and spits out Android drawables with the right blur radius and opacity.
It monitors your Figma components, grabs shadow properties when they change, does the conversion math, and outputs drawable XML files ready to go.
No more going back and forth with designers about whether shadows look right. No more copying values by hand. Everything syncs automatically between Figma and your drawables.
Even handles tricky stuff like multiple shadow layers and different blend modes. Updates your project files when design changes happen.
Latenode makes this Figma API automation dead simple. You can build the whole pipeline without writing custom integration code.
You’re hitting Android’s elevation limits. The built-in Material shadows never match custom Figma designs - they’re just too rigid. I switched to ViewOutlineProvider with custom shadow rendering two years back for this exact problem. You override the view’s outline and shadow behavior, which lets you dial in blur, offset, and color opacity way better than CardView. For complex shadows, I’ve had good luck with custom Canvas drawing in a wrapper view. You manually draw shadows using Paint with setShadowLayer(). Takes longer to code but you get total control. Quick fix: set CardView’s cardElevation to 0dp and use a background drawable with stacked gradient layers. Position each gradient to fake the shadow blur and offset. Not perfect but way closer to Figma than default elevation.
Had this exact problem a few months ago. Our designers sent me Figma mockups, but CardView elevation looked completely different.
Android’s elevation creates those harsh Material Design shadows. Figma lets you control blur radius, spread, and opacity however you want. You need custom drawables to make them match.
I built an automation that pulls shadow properties straight from Figma and converts them to Android drawable XML. No more guessing values or endless tweaking.
It grabs shadow data through Figma’s API, calculates the Android equivalent, and spits out drawable files automatically. Even handles multiple shadow layers.
Saves hours of designer back-and-forth and gets pixel-perfect shadows. Updates automatically when designs change too.
You can build something similar with Latenode to connect Figma’s API to your workflow. Handles all the API calls and file generation without writing custom scripts.
Had the exact same problem building a banking app where shadows had to match perfectly. Android’s elevation system just wasn’t built for custom shadow work - it’s all about Material Design consistency. Here’s what actually worked: I layered a custom shadow drawable under the main content view using multiple gradient stops. The big gotcha is Figma’s blur radius means nothing in Android. You’ll need gradient radius values 2-3x bigger than whatever Figma shows. For real apps, I grab the shadow RGB and opacity from Figma’s CSS export, then build LayerDrawable XMLs with radial gradients. Getting the positioning right means using negative margins to offset the gradient drawable. One heads up nobody’s mentioned - these custom shadow drawables murder your scroll performance if you’ve got lots of complex shadows. Either optimize your view recycling or go with simpler shadows for list items.
This happens all the time when converting Figma designs to Android. CardView elevation uses Android’s shadow system, which follows Material Design rules and creates sharper shadows than what you see in Figma.
I’ve had good luck making a custom drawable with gradient backgrounds that copy the Figma shadow. Just grab the exact values from Figma - blur radius, offset, and color opacity - then rebuild them using LayerDrawable with multiple gradient shapes.
Another option is exporting a 9-patch image straight from Figma. You’ll get pixel-perfect shadows but your APK gets a bit bigger. For weird shadow effects with multiple layers, this usually works best.
Also check if your Figma design has inner shadows or stacked shadow layers. Standard CardView elevation can’t handle these - you’ll need custom drawables.
Try using a drawable with shape and gradient instead of CardView elevation. I had the same issue and ended up creating an XML drawable that mimics Figma’s shadow blur. Just copy the exact px values from Figma’s inspect panel and convert to dp. Works way better than Material shadows.