Figma Support Forum

How have you handled designing for multiple mobile devices

What has worked well for you when designing screens for mobile devices when there are so many different screen sizes?

Do you start with smaller screens and communicate with the devs how those smaller screens translate to the larger?

Are you making fully responsive frames?

The responsive frame option seems like a good option but may tend to be time consuming. Our small design team would love to learn from other designers about has worked well for you. Thanks!

2 Likes

It depends on whether the design would change on the larger screen or not. If you can simply stretch it with Constraints, it would be enough as it should be reflected in the code developers see. But if some elements are overflowing and changing positions or getting removed/added, then you may need to show developers what changes should be happening at different resolutions.

Related: Responsive Mobile APP handover help

1 Like

I’m fairly new to this but would like to share…

So far, personally, I pick average size for cell phone (based on rating / statistic). The source I went off of tells me that’s 360 x 640 (that’s something like 11% of phones - but represents the largest segment). I design one design for phones (one layout for landscape orientation and one for portrait). I don’t try to represent every screen size for mobile phones, just the one representative one. I know (or could communicate) that the sizes and spaces between will be reponsive for larger / smaller screens (though 360 x 640 is pretty small - like wal mart $35 cheapie small). I follow the same principle for tablet (I think the largest segment of tablets is like 768 x 1024 right now). Ultimately, I end up with 4 breakpoints and 6 layouts. Breakpoints: mobile phone, tablet, laptop (or desktop), and large screen (eg: desktops with really big screens like 19 inches and above.

Mobile Screen Resolution Stats Worldwide

hth
Jake

1 Like