I am developing an Android application using Jetpack Compose and want to create a button that has a linear gradient similar to what I’ve designed in Figma. However, when I apply the gradient code in Jetpack Compose, it doesn’t resemble the Figma design.
This is my current code:
val gradientBrush = Brush.linearGradient(
colors = listOf(Color(0xFF92A3FD), Color(0xFF9DCEFF)),
start = Offset(x = 78.75f, y = 30f),
end = Offset(x = 236.25f, y = 30f),
)
I am looking for some guidance on how to ensure that the button gradient appears as intended, matching my Figma design. Are there specific adjustments or settings I should consider for accurate implementation?
Skip the manual gradient conversions from Figma to Compose - just automate the whole thing.
I hit this same wall last year. Design team kept tweaking gradients and I’m constantly updating hardcoded values. The coordinate translation was brutal.
Saved my sanity by setting up automated workflow that pulls design tokens straight from Figma and spits out Compose code. Now when designers change gradients, colors, whatever - code updates itself. No more conversion math.
It grabs Figma design data, handles the gradient coordinates, and outputs clean Compose brush code with proper relative positioning. Your offsets actually match the design.
You can build this with visual tools instead of writing complex scripts. Handles Figma API calls, coordinate transforms, and code generation in one shot.
It’s common to encounter discrepancies between Figma designs and Jetpack Compose implementations, especially with gradients. The issue you mentioned could stem from using fixed pixel values for offsets. Instead, consider using Offset(0f, 0f) for the starting point and Offset(Float.POSITIVE_INFINITY, 0f) for the end point to ensure the gradient scales appropriately with your button size.
Moreover, double-check the color values you’re pulling from Figma, as the inspect panel might not always provide exact matches. Lastly, make sure the button’s size is defined in the modifier before applying your gradient; otherwise, it can lead to unexpected results.
Many developers get tripped up because Figma exports gradients with absolute pixel coordinates, but your Compose button’s dimensions are totally different at runtime. I learned this the hard way - gradients looked perfect on one screen size but terrible on others. Instead of converting exact coordinates, extract the gradient angle from Figma. Use atan2(endY - startY, endX - startX) with your Figma values, then apply that angle in Compose with trigonometry for your start/end offsets. This scales properly no matter what your button size is and keeps the visual direction you designed.
I’ve hit the same gradient problems when converting Figma designs to Compose. The issue is Figma uses absolute positioning for gradients, but Compose needs relative positioning.
Normalize your gradient coordinates by dividing by your design element’s total width/height. Say your Figma button is 315px wide - convert the start offset to (78.75/315, 30/height) and end to (236.25/315, 30/height), then multiply by your actual button size.
Even easier: use Brush.horizontalGradient() or Brush.verticalGradient() instead. They handle positioning automatically and work better across different screen densities.
Honestly, just eyeball it in compose preview - that’s the easiest fix. Don’t worry about matching Figma’s exact coordinates. Just tweak your gradient colors and direction until it looks right. Figma’s gradient rendering often doesn’t match Android anyway because of color space differences.