When you set up your prototype for a mobile test, you might want to consider the following settings:
Here are some things to consider when using Figma for mobile prototypes.
Select ‘none’ as device. Normally, choosing a mobile device is helpful if you want to test your mobile app on desktop, but when testing on a mobile device this extra frame can be quite distracting.
Find this under ‘Prototype’ in Figma.
Choose ‘Scale down to fit width’. By using this setting in the prototype viewing options, the size of the prototype will adjust to different screen sizes.
Find this in the prototype view in Figma. Remember to make the change before sharing the link!
Make important items at the bottom of the page fixed. If you have items that appear at the bottom of the device, like buttons or navigation tabs, you’ll want to make these fixed to the bottom of the Figma frame. This way you can ensure that they show up on all screen sizes.
Find this in Figma’s regular ‘Design’ panel, under ‘Constraints’.
You might need to manually change the link to your prototype. Otherwise, the mobile browser may render your prototype in a desktop view instead.
To make sure your prototype shows up as it should you can:
- add /m before /share
- remove /screens from the end of the link
- Before: https://company.invisionapp.com/public/share/XY1234#/screens/6789
- After: https://company.invisionapp.com/public/m/share/XY1234#/6789