Converting Figma circular gradients to Android XML vector drawable format

Other Questions Figma
1

I’m struggling to recreate a complex gradient design from Figma into an Android vector drawable. The design shows a rounded rectangle with multiple layered gradients that create a unique visual effect.

Design specifications:

Rectangle dimensions:

width: 312dp
height: 474dp
corner-radius: 8dp

Background layers (3 gradient combinations):

// First circular gradient
conic-gradient(from 180deg at center, #FFFFFF -9.78deg, #000000 9.35deg, #FFFFFF 69.37deg, #000000 121.87deg, #FFFFFF 161.25deg, #000000 202.5deg, #FFFFFF 245.62deg, #000000 303.75deg, #FFFFFF 350.22deg, #000000 369.35deg)

// Second circular gradient  
conic-gradient(from 180deg at center, #FFFFFF -22.26deg, #000000 27.81deg, #FFFFFF 81.58deg, #000000 116.79deg, #FFFFFF 158.7deg, #000000 216.69deg, #FFFFFF 262.5deg, #000000 307.09deg, #FFFFFF 337.74deg, #000000 387.81deg)

// Base linear gradient
linear-gradient(151.68deg, #1DC4BD 0.54%, rgba(217,240,66,0.98) 17.64%, rgba(248,165,253,0.89) 42.5%, rgba(162,172,249,0.95) 60.11%, rgba(60,244,147,0.59) 83.94%, #3DBEF0 100%)

Blend modes: screen, difference, normal
Opacity: 0.5

I’ve tried converting this manually and using SVG conversion tools but can’t achieve the same visual result in Android XML format. My closest attempt produces a different appearance than the original Figma design.

How can I properly translate these layered circular gradients with blend modes into an Android vector drawable XML file? Are there alternative approaches or workarounds for achieving this effect?

2

yeah, android’s kinda limited with gradients. maybe try exporting it as a png from figma? sometimes that’s easier than fiddlin’ with xml. good luck!

3

Had a similar challenge recently with a complex gradient background. What I ended up doing was using a ShaderDrawable approach where I created the gradients in code using ComposeShader to combine multiple gradients. You can stack SweepGradient instances for your conic effects and use LinearGradient for the base layer. The key is handling the blend modes through PorterDuffXfermode settings on different Paint objects. I render each gradient layer separately then composite them together. It’s more involved than XML but gives you precise control over the layering and blending. Performance is decent since you can cache the result as a bitmap once generated. The angle calculations for SweepGradient take some trial and error to match Figma exactly, but it’s definitely achievable without external libraries.

4

Been down this exact road myself and honestly, the XML approach just won’t cut it for complex conic gradients with blend modes. What worked for me was creating a custom view that renders the gradients programmatically using Canvas. I used SweepGradient for the conic effects and layered them with different blend modes through Paint configurations. The performance hit isn’t too bad if you cache the bitmap result. One trick I learned was to render everything to an offscreen canvas first, then draw that to your view. This way you can handle the multiple blend operations without killing performance. Takes maybe a day to implement properly but you get pixel-perfect results that match your Figma design. Way better than settling for a simplified version or dealing with large PNG assets.

5

honestly xml is gonna be a nightmare for this kinda stuff. i’d just bite the bullet and use lottie animations - export from figma to lottie and boom, perfect gradients with all the blend modes intact.

6

Unfortunately, Android XML vector drawables don’t support conic gradients or blend modes like screen and difference. The gradient system is quite primitive compared to what Figma offers. You’re essentially trying to recreate advanced CSS features in a much more limited environment.

From my experience dealing with similar design conversions, your best bet is creating this as a custom drawable using Canvas and Paint in code. You can implement the conic gradients using SweepGradient and apply blend modes with PorterDuff modes or Paint.setXfermode(). It’s more work but gives you the control needed.

Another approach is breaking down the design into simpler gradients that approximate the visual effect. Sometimes designers are open to slight modifications if you explain the technical constraints. I’ve had success showing side-by-side comparisons of what’s achievable versus the original design.