Figma 到 Flutter - 如何修复字体大小差异？

Question

我在 Figma 中有一个设计。看起来不错。但是当我尝试在 flutter 中使用字体值时 - 我遇到了问题。我在 Figma 上选择的字体大小应用程序的前端并没有为肉眼呈现相同的结果。

例如，如果我在 Figma 上设置文本的 12px 大小，并在 flutter 的前端文件上设置相同的 (12px) 大小，则生成的结果不匹配；Flutter 的应用程序字体大小似乎比 Figma 屏幕小，但它们的大小（以 px 为单位）设置为相同。

这是我的文本样式的示例：

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

可能是什么原因以及如何解决？我需要一个“修正系数”。有什么建议吗？

Answer 1

对于将 Figma 中的 UI 设计转换为 Flutter 的情况，我们持保留态度。我经历过这一点，并注意到它们实际上看起来也不是 100% 相同。我通常只是顺其自然，但如果你真的愿意，我会增加 Flutter 上的字体大小，并尝试尽可能匹配 Figma 中的 UI 设计。根据字体大小的不同，使用转换因子会不一致。我相信这是因为像素大小可能会因设备而异，而 Figma 只真正关心以像素为单位的画板大小。

编辑：这个包我已经使用了一段时间了，它工作得相当好并且完成了工作 - flutter_screenutil