Figma to Flutter - how fix font size difference?
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
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on December 01, 2022Comments
-
Admin over 1 year
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?
-
Emile over 2 yearsThis 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.