I’m working on converting a Figma design to Flutter and running into a frustrating problem with text sizing. When I copy the exact font size values from my Figma mockup into my Flutter code, the text appears smaller in the actual app than it does in the design.
For instance, when I set a text element to 14px in Figma and use fontSize: 14 in Flutter, the rendered text looks noticeably smaller on the mobile device. This makes my app look different from the intended design.
Here’s how I’m currently styling my text:
final headerStyle = GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontSize: 14,
color: Colors.grey[800]
)
);
Is there a scaling factor I should apply to make Flutter text sizes match Figma designs better? What’s causing this size discrepancy and how can I fix it?
Flutter uses density-independent pixels (dp), which work differently than Figma’s absolute pixel measurements. Your scaling issues happen because screen density affects how Flutter renders text sizes. Skip the fixed multipliers - use MediaQuery.textScaleFactorOf(context) instead for consistent results across devices. I’ve had good luck with a custom scaling function that accounts for your target device’s pixel ratio. Get your device’s pixel ratio with MediaQuery.of(context).devicePixelRatio and adjust from there. Also check that your Figma frame dimensions match your Flutter app’s logical screen size, not the physical resolution.
Been dealing with this exact headache for years. The pixel ratio mess is real, but manual calculations and device-specific tweaks become a nightmare when you scale up.
I automate the entire design handoff process. Set up a workflow that pulls design tokens straight from Figma and converts them to Flutter constants with proper scaling applied automatically.
No more guessing with multipliers or writing custom scaling functions. The system reads your Figma file, grabs all text styles, applies the right conversions for your target devices, and spits out ready-to-use Flutter theme files.
Works across different screen densities without manual adjustments. When designers update the Figma file, everything syncs automatically. Way cleaner than hardcoding pixel ratios everywhere.
You can build something like this pretty easily with the right automation platform: https://latenode.com
check your figma’s device pixel ratio first. had the same problem - my designer was using the wrong dpi settings. try matching flutter’s text size to figma’s sp value instead of px. works better than doing math conversions.
That’s happening because Figma uses physical pixels while Flutter uses logical pixels based on your device’s pixel density. I usually multiply Figma sizes by 0.75 - so 14px in Figma becomes about 10.5 in Flutter. Also check your device’s text scaling settings since they can mess with how fonts render. Test on different devices to see how pixel density affects things, and make sure your Figma artboard matches your target device resolution for better accuracy.