Framer X

Preview 1:1 in any browser window


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.


  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”

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

© 2021 jimu Labs, Inc.