Flutter font size appears smaller than Figma design - how to match sizes?

Other Questions Figma
1

I’m working on a Flutter app and trying to match the typography from my Figma mockups. The issue I’m facing is that when I use the exact same font size values from Figma in my Flutter code, the text appears noticeably smaller in the actual app.

For instance, when I set a text element to 16px in Figma and apply fontSize: 16 in Flutter, the rendered text looks much smaller than what I see in the design. This makes it really hard to achieve pixel-perfect UI matching.

Here’s how I’m currently defining my text styles:

final headingStyle = GoogleFonts.roboto(
  textStyle: TextStyle(
    fontWeight: FontWeight.w600,
    fontStyle: FontStyle.normal,
    fontSize: 16,
    color: Colors.grey[800]
  )
);

Has anyone experienced this size discrepancy between Figma and Flutter? What’s causing this difference and is there a multiplier or scaling factor I should apply to get consistent results?

2

This happens because Figma and Flutter use different rendering engines and pixel calculations. The biggest issue is usually device pixel ratio - Flutter handles logical pixels differently than physical pixels. I’ve run into this tons of times in production apps. Check your device’s pixel density settings first - that usually explains the mismatch. Flutter’s fontSize uses logical pixels, but Figma shows values that don’t factor in screen density. Font rendering also varies between platforms. The same font looks different on Android vs iOS even with identical Flutter code. I always create a typography scale file now where I define text sizes after testing on real devices instead of trusting Figma measurements. Test on multiple device densities early - it’ll save you major headaches down the road.

3

same prob! figma does scale weirdly sometimes. i usually upsize fonts by about 1.2x too, so 16px in figma goes to around 19-20px in flutter. also, don’t forget to look at your device’s pixel density!

4

Been there many times. The mismatch happens because Figma uses CSS pixels while Flutter uses logical pixels - totally different calculations.

What saved me was building an automated pipeline that grabs typography values from Figma and converts them to Flutter constants with proper scaling. No more guessing or testing random multipliers.

I use Latenode for this - hooks into Figma’s API, pulls text styles, runs the conversion math, and updates my Flutter theme files automatically. Saves me hours of tweaking.

It also handles different screen densities and spits out separate constants for iOS and Android when needed. Way better than eyeballing measurements or recalculating every time designers change something.

Check it out: https://latenode.com