Skip to content
A module that allows to automatically scale your prototype to different screensizes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
resize.jpg
resize.sketch
scaleToDevice.coffee

README.md

Framer Module: Scale Your Prototype To Different Screensizes

Here is a simple module I use to view my prototype on my iPhone even if I build the device fitting a standard android device like the Nexus 5X. The performance of Framer prototypes is currently much better on an iPhone.

If you import designs and they are rendered wrong on your devices please try it with a different scaling (@2x, @3x,…) @3x worked great for me when I imported a design that was build in @1x (360x640)

Alt Text

1. Add the module to the top of your Framer prototype:

Copy the scaleToDevice.coffee file to the module folder and include it in your prototype.

scaleToDevice = require "scaleToDevice"

2. Set a reference layer.width

This reference layer.width should have 100% width of your prototype.

referenceFrame = scaleToDevice.scaleToDevice(MYREFERENCELAYER.width)

Optional: Instead of using Framer.width or Framer.height you need to use:

referenceFrame.width
referenceFrame.height
You can’t perform that action at this time.