Skip to main content
Teodor_Tkaczyk
Teodor_Tkaczyk
September 8, 2023
Question

Difference between figma and the real devices

  • September 8, 2023
  • 8 replies
  • 1949 views

Hi everyone, I am coming by with a bit weird problem, namely I have the same font values on Figma and on real devices but on Figma it looks much bigger:

The screenshot on the left is from Figma, on the right is from the device (look at the “Fax to” label)

image

Has anyone encountered a similar problem?
Thanks and have a great day 🙂

    This topic has been closed for replies.

    8 replies

    Teodor_Tkaczyk
    Teodor_TkaczykAuthor
    September 8, 2023

    Styles on Figma:

    image

    Teodor_Tkaczyk
    Teodor_TkaczykAuthor
    September 8, 2023

    Styles on the real device:

    Screenshot 2023-09-08 at 9.09.43 AM

    tank666
    tank666
    September 8, 2023
    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    Teodor_Tkaczyk
    Teodor_TkaczykAuthor
    September 8, 2023

    @tank666 I am using Figma in browser, the browser scale is set properly to 100%, OS scale is set to default (MacOS) so it has not been changed to large or small.

    tank666
    tank666
    September 8, 2023

    I don’t know what the default value is in MacOS. It’s probably still not 100%.

    figma-vs-chrome-render

    I have Windows, and I see differences only in the font rendering.

    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    Teodor_Tkaczyk
    Teodor_TkaczykAuthor
    September 11, 2023

    @tank666 hmm weird, because it also looks smaller on iPhones and Androids, will investigate this issue further

    Max_de_Mooij
    Max_de_Mooij
    October 3, 2023

    One of my colleagues is struggling with the same issue, did you find the answer?

    Teodor_Tkaczyk
    Teodor_TkaczykAuthor
    October 11, 2023

    @Max_de_Mooij Yep, in our case the problem was we are using MUI package for our components. It occurred that the label that comes with input has transform: scale(0.5) styling applied. We removed that property from styles and everything was fine 🙂 Maybe try checking if your styling package is not using any styling that distorts your design

    Terms & ConditionsAccessibility statement