Text spacing differences between Figma design and Jetpack Compose implementation

Other Questions Figma
1

I’m working on an Android application with Jetpack Compose and running into a frustrating issue with text rendering.

My design team created mockups in Figma with specific typography settings. I’ve been trying to match these designs exactly by using the same font family, size, and spacing values in my Compose Text components. However, when I compare the actual app output side by side with the Figma designs, the letter spacing appears different even though I’m using identical parameters.

For example, I set letterSpacing to 0.sp in my Text composable, which should match the 0px letter spacing from Figma, but the characters still look more spaced out in the app.

Has anyone encountered this rendering inconsistency before? What’s causing this difference between Figma’s text display and Compose’s text rendering? Are there any workarounds or adjustments I can make to achieve exact visual parity with the design files?

2

This happens because Figma and Android handle text completely differently. Figma has its own rendering engine, while Compose uses Android’s system measurement with platform-specific fallbacks and optimizations that mess with spacing. I’ve had luck using negative letter spacing in Compose to fix this. Try starting with -0.1.sp or -0.2.sp and tweak from there while comparing to your Figma design. The exact amount depends on your font. Also check if your font files actually match between Figma and Android. Design teams sometimes use slightly different versions of the same typeface, which creates these spacing issues. If you can, export the exact font file from Figma and make sure it’s the same one in your app resources.