7

I have a design in Figma. it looks great. but when I try to use font values in flutter - Ihave a problem. Font size I choose on Figma the front end of the application is not rendering the same results for the naked eye.

For example, if I set 12px size of a text on Figma and set the same (12px) size on flutter's front end file then the generated results does not match; Flutter's app font sizes seems to be less than Figma screens, but their size in px are set as same.

This is example of my textStyle:

 final textMedium =  GoogleFonts.manrope(
    textStyle: TextStyle(
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.normal,
    fontSize: 12,
    color: Colors.black
 ));

what could be the reason and how can I fix it? I need a "correction factor". any advice?

FetFrumos
  • 5,388
  • 8
  • 60
  • 98

1 Answers1

8

Take converting your UI designs in Figma to flutter with a grain of salt. I've experienced this and noticed that they don't actually look 100% the same either. I usually just let it be, however if you really want to I would just increase the font size on Flutter and attempt to match the UI design in Figma as closely as possible. Using a conversion factor would be inconsistent depending on the font size. I believe it's due to the fact that pixel sizes could be different depending on the device and Figma is only really concerned with the art board size in pixels.

Edit: There's this package I've been using for a while, and it works fairly well and gets the job done - flutter_screenutil

31Carlton7
  • 275
  • 1
  • 10
  • 2
    This really shouldn't be a thing though should it. You should be able to match the creative 100%. And whilst i get that there are pixel densities and dpi's etc, you should be able to configure them to match. I too am getting massive missmatches between creative and implementation. – Emile Feb 17 '22 at 12:51