DPR Upgrade Guide
Unfortunately we cannot automatically upgrade all your Framer projects with this release. This is mainly due to the new point support, rendering us unable to guess your desired pixel ratios and recalculate them across all your documents.
So if you open an older Framer project, it will continue to work as expected, but the Design tab will be disabled until you manually update your project.
- Create a new project and save it.
- Copy over the
app.coffeefile from your old to the new project. - Convert all your x, y, width and height values from point to pixels
- Option 1: keep everything as-is. One point will become one pixel.
- Option 2: use our utility function. Paste the following at the bottom of your document where ratio is the point to pixel ratio (in this case 2x).
Utils.scaleFrames(Framer.CurrentContext.layers, 2)
- Option 3: manually divide all the x, y, width and height values in your document by hand so they are expressed in points.
Framer now supports designing in points instead of pixels. This allows you to design for multiple devices at different resolutions efficiently. The basic idea is that a point can represent any number of pixels, depending on the device screen density. So for example an iPhone 7 screen is 375 x 667 points at 2x, so the resolution is 750 x 1334.
This means that all older projects will need to be converted to the appropriate pixel ratios. This typically means that you have to divide all your x, y, width and height values by 2 (for most iPhones).
We added a handy utility to help you with this. It takes a set of layers and corrects all these values for you: Utils.scaleFrames(layers, ratio).
We updated the border model so that adding a border will never influence the positioning of the layer or any of its children. This avoids unexpected layout results.
With the old behavior a border would push the children inside, even though their x and y would be 0, 0. The new border behaviour never influences positioning.
Border radius and shadows continue to render like they always did. The borders of a parent layer gets drawn on top of its child layers.
Note: The technical way this is implemented is that the border now gets rendered in a separate div (just like any HTML content). So every layer in Framer is now backed by a main div, with a border div and its child layer divs.
Because Framer now supports points, we always keep all coordinates the same, as in Sketch. So from now on, every x, y, width and height in Sketch will always be equal to the one in Framer.
The @2x switch in the import sheet now only determines the export size of the assets. In other words, it works exactly like the export options in Sketch: if you are designing for an iPhone 7, you want @2x. When iPhone 7+ you need @3x. If you pick one that is too low, you will get blurry assets. We try to default to the best setting based on your preview device.
If you prefer to design at a different resolution in Sketch, you can scale your coordinates after an import using the scale option (which is 1 by default). So if you have a 2x design for iPhone 7 in Sketch at 750 x 1334, you add the import scale directly to Importer.load("filename", scale: 0.5).
When working with coordinates on native mouse events, they are always relative to the browser screen or page. In Framer you often need them to be relative to the current device (the top left or an iPhone). You could already convert these by hand, but they are now added to every mouse event by default:
- .point property with the same coordinate system as the layer you are listening on.
- .contextPoint property with coordinates based on the context, or most often the current device screen, so 0, 0 is the top left of an iPhone instead of the browser window.
Framer supports layout constraints set in the design tab, but there is no no way to customize them in code as of yet. If you resize the parents of any of the layers, the children will automatically layout according to the rules in the design tab.
If you set x, y, width, height or change the layer parent in code it will break the constraints and remove them entirely. The same is true is you animate these properties.
FlowComponents now automagically guess their fixed headers and footers based on their positions. This allows you to very quickly build flow screens in a natural way using the Design tab.
- Supports fixed page headers and footers, automatically guessed from their artboard positions, if the artboard is larger than the current device screen.
- Supports scroll event forwarding directly like flow.onScroll, flow.onMove.
- Supports all layout rules so that every artboard from Design automatically works across multiple devices.
- Access the current scroll component directly with flow.scroll. It is null when there is none.
The way that the FlowComponent guesses headers and / or footers is as follows:
- We now support border radius per corner: borderRadius = {topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0}.
- We now support border per side: border = {left: 0, right: 0, bottom: 0, top: 0}.
- We support inset and drop shadows with layer.shadowType
- PageComponent.addPage now places the page at a sensible location by default.