I created a mockup in Figma and now I’m trying to convert it to a Flutter app. The text sizes don’t match up at all when I use the same values.
In my Figma design, I set a header text to size 144 and it looked perfect. But when I put fontSize: 144 in my Flutter Text widget, the text appears huge and completely wrong.
Why are the font measurements so different between these two platforms? Is there some kind of conversion formula I should be using? I’m really confused about how to get the text sizes to match what I designed.
This happens because Figma and Flutter measure font sizes differently. Figma uses points while Flutter uses logical pixels, and the scaling ratio varies depending on your device’s pixel density. I ran into this exact issue when I started converting designs to Flutter apps. What worked for me was starting with roughly 60-70% of the Figma value as a baseline in Flutter, then fine-tuning from there. So your 144pt Figma text might start around 85-100 in Flutter. The exact conversion depends on your target device and screen density. I also found it helpful to set up a design system with predefined text styles early on, so you only need to figure out the conversion once for each text size you use. Testing on multiple devices is crucial since the scaling can look different across various screen densities.
The root cause is that Figma measures typography in points while Flutter uses density-independent pixels, which creates this mismatch you’re experiencing. I’ve dealt with this countless times in client projects and found that the actual conversion isn’t just a simple mathematical formula - it depends heavily on the specific font family and weight you’re using. Different fonts render at different optical sizes even with identical numerical values. What I typically do is create a reference sheet where I compare small snippets of text between Figma and Flutter side by side. For most standard fonts, I’ve noticed that dividing the Figma value by approximately 1.3 to 1.5 gives a reasonable starting point, but this varies significantly. Your 144pt header would likely translate to somewhere around 95-110 in Flutter, though you’ll need to adjust based on visual comparison rather than relying purely on calculations.
This inconsistency stems from fundamental differences in how design tools and development frameworks handle typography rendering. After working through similar conversions on several projects, I discovered that the device’s display density plays a much larger role than most people realize. Flutter automatically scales fonts based on the device’s pixel ratio, which means a font size that looks perfect on one device might appear completely different on another. Rather than trying to find a universal conversion formula, I recommend setting up your Flutter app on the same screen size and resolution that you used while designing in Figma. This gives you a more accurate baseline for comparison. From there, you can establish your typography scale and use Flutter’s built-in responsive design features to handle different screen densities. The key insight is that perfect pixel matching between Figma and Flutter is often impossible due to rendering engine differences, so focus on achieving the same visual hierarchy and proportional relationships instead.
yeah thats a common headache when moving from figma to flutter. the measurement units are totally different - figma uses points but flutter works with logical pixels. i usually just eyeball it and start around half the figma size then tweak until it looks right. for your 144 text maybe try starting at like 72 and adjust from there
honestly just divide by 1.2 and see how it looks. ive been doing figma to flutter for ages and theres no perfect formula - just gotta test it out. your 144 would be around 120 but might need tweaking depending on the font