If you're using Figma for prototyping, there are a few ways to make sure your prototype scales correctly to your participant’s device or browser window.

Designing your screens

If you use Figma’s pre-defined frames (also known as artboards) to design for a specific device, keep in mind that the frames do not take the device’s header and footer areas into account.

In the image below, the iPhone 11 Pro / X frames include pixels that will be covered by the iPhone’s status bar and home indicator, so it’s up to the designer to exclude these areas when laying out the UI.

Image showing a Figma frame's hidden areas

Building your prototype

In prototyping mode, you can select a device or set a Custom Size to fit a window. Alternately, you can select Presentation to fill a window:

Gif demonstrating how to fit or fill a screen in Prototype mode

Viewing your prototype

While viewing the prototype, you have 3 scaling options:

  1. 100% (potentially cutting off part of your design)
  2. Fit (scale down to fit any screen)
  3. Fill (scale down or up to fit any screen)

You can find those controls by hovering in the upper-right-hand of the prototype screen:

Gif demonstrating how to scale a prototype in Prototype viewing mode

We strongly recommend testing the settings yourself or with a colleague, to make sure your prototype works as expected with our Participate apps.

You can find more help with designing and viewing Figma prototypes at Figma's Help Center:

Did this answer your question?