Preview 1:1 in any browser window

UI
Framer
Updated: 2019-03-29

Overview

HT @DannyKeane

By default, Framer X scales the preview content to fit the viewport (either in the preview window or in a separated browser window). But sometimes we really want to see it 1:1 to get a realistic result, especially when designing a website.

Steps

  1. Create a frame to contain the content to be previewed
  2. Make sure the frame size isn't any of the pre-defined device sizes, or choose "No Device". This is important, or else we can't do Step 4.
  3. Adjust the pins of the content so that it does not change size along with the container
  4. Preview the frame, choose "Canvas -- Responsive"