UI Resolution for Mobile on Figma

#1

Hi campers,

Recently i was trying to redesign one of my freeCodeCamp projects to be more mobile friendly. I did the design on Figma, just to find out that the template frame width of the phone screen is not like the actual screen resolution of the phone. For example The Pixel 2 frame on figma is 411 px width, while on the specs it is 1080 px width, if I’m not wrong.

Which one should I use? Is it related to the ppi or something?
Any reply would be appreciated.

#2

Hey there,

great question!

Yes, this is about hardware pixels vs. CSS pixels.

In the end you want it to look good on almost all devices.
That’s why I use the mockup tools only for an overview and test it by just moving the divider of the dev tools to the left and right to see some critical widths.

#3

Thanks for the article @miku86, its really helpful.

#4