When testing mobile interfaces you may want to ensure test participants are getting as close to a real-world experience as possible. For this use case, Lyssna provides device frames. Device frames present your design as it would appear on a mobile device by wrapping it in a mock device container when viewed on desktops and ensuring your design is flush with the screen on mobiles and tablets.

Device frames are available when adding the following types of test sections:

Device frames cannot be added to prototypes from within the test builder like other tests. If you would like to add a mobile device frame to your Prototype, you can enable this in your prototype's settings within Figma. Add a mobile device frame to your Figma prototype.

If your design extends past the dimensions of the device frame we will resize it and allow vertical scrolling to emulate the behavior participants would experience on a real device. We currently support device frames for iPhone, Android, and tablet devices and you can select either portrait or landscape orientation.

If you would prefer to limit your test to participants using a real mobile handset, you can use device targeting instead.

If you are using a device frame, these are some optimal dimensions that you can use to make the scaling work nicely or to fit an image exactly within the frame without scrollbars: