How can I make my prototype resize?
When you create a new Frame, you have the ability to choose from pre-set device sizes (e.g. iPhone XS). If you then preview your project on a device with different measurements, it may not fill the entire screen, resulting in white edges at the top or sides.
To prevent this, you can make your design resize so it will fit your preview device's screen no matter what aspect ratio your device has. To make your design resize, follow these steps:
- Change your Device at the top right of the properties panel to No Device.
- Open the preview by clicking the Preview icon in the top right or pressing ⌘ + P.
- Click the menu in the top right and select Canvas — Responsive.
- Open your project on your phone with Live Preview.
- Your project should now responsively change based on the aspect ratio of your device.
Note: Setting your project to preview responsively will cause it to respond to changes in screen sizes. Framer X guesses whether Frames should stretch horizontally or vertically based on where you place them, and will pin them accordingly. If your Frame changes in ways you didn't intend, you may want to check whether your element is pinned to the right location.