Solving font size discrepancies between Figma designs and Flutter app

Other Questions Figma
1

Hey everyone! I’m facing a frustrating issue with my app development. I’ve created this awesome design in Figma but when I try to implement it in Flutter the font sizes look off. Even though I’m using the same pixel values for text in both Figma and Flutter the app’s text appears smaller than in my design.

Here’s a quick example of how I’m setting up my text style in Flutter:

TextStyle myStyle = TextStyle(
  fontFamily: 'Roboto',
  fontWeight: FontWeight.w500,
  fontSize: 14,
  color: Colors.blue,
);

I’ve tried adjusting the font size but it’s not quite matching up. Does anyone know why this is happening or how I can fix it? Maybe there’s some kind of conversion factor I’m missing? Any tips would be super helpful!

2

I’ve run into this exact problem before, and it can be really frustrating! The issue often stems from differences in how Figma and Flutter handle font scaling and device pixel ratios.

One solution that worked for me was using the ‘textScaleFactor’ property. You can set it globally in your MaterialApp widget or individually for each Text widget. Try something like this:

Text(
  'Your text here',
  style: myStyle,
  textScaleFactor: 1.2, // Adjust this value as needed
)

Start with a value of 1.2 and adjust up or down until it matches your Figma design. You might need to experiment a bit to get it just right.

Also, double-check your device’s display settings. Sometimes, system-level font scaling can throw things off. Hope this helps!

3

I’ve encountered this issue too, and it’s definitely a headache. One thing that helped me was considering the differences in how Figma and Flutter handle text rendering. Figma uses absolute pixel values, while Flutter’s approach is more flexible due to varying device resolutions.

What worked for me was using a custom function to convert Figma sizes to Flutter-friendly ones. Here’s a simplified version:

double figmaToFlutter(double figmaSize) {
  const figmaWidth = 375.0; // Your Figma frame width
  return (figmaSize / figmaWidth) * MediaQuery.of(context).size.width;
}

Then you can use it like this:

TextStyle myStyle = TextStyle(
  fontFamily: 'Roboto',
  fontWeight: FontWeight.w500,
  fontSize: figmaToFlutter(14),
  color: Colors.blue,
);

This approach scales your text based on the device’s screen width, which often results in a closer match to your Figma designs across different devices. It might take some tweaking, but it’s been a game-changer for me in achieving consistency between design and implementation.

4

This discrepancy is a common issue that arises due to differences in how Figma and Flutter handle font rendering. One often overlooked factor is the pixel density of the device you’re testing on. Flutter uses logical pixels, while Figma designs are typically in physical pixels.

To address this, you might want to use the MediaQuery class to get the device’s pixel ratio and adjust your font sizes accordingly. Here’s a quick example:

final pixelRatio = MediaQuery.of(context).devicePixelRatio;
final adjustedFontSize = 14 / pixelRatio;

TextStyle myStyle = TextStyle(
  fontFamily: 'Roboto',
  fontWeight: FontWeight.w500,
  fontSize: adjustedFontSize,
  color: Colors.blue,
);

This approach should help bridge the gap between your Figma designs and Flutter implementation. Remember to test on various devices to ensure consistency across different screen sizes and pixel densities.

5

yo, i’ve dealt with this bs before. it’s a pain in the ass, but here’s wat worked for me: use the MediaQuery.textScaleFactor to adjust ur font sizes. like this:

final textScale = MediaQuery.of(context).textScaleFactor;
final fontSize = 14 / textScale;

try that out and see if it helps match ur figma design better. good luck man!