Sketch and Framer are powerful together. Draw your static assets in Sketch, import and immediatly explore interactions in Framer. Our newest release makes this workflow even more seamless.
Do you start your Sketch designs at 1x with multiple artboards? We do, too. Today’s release is a workflow overhaul to seamlessly work on any scale or artboard. Read on to learn more or start with this guide about importing.
If you're used to designing at @1x resolution — you don't have to scale your designs before importing. Within the import sheet, you can specify at which scale to import. Design for high-density displays without having to work in native resolutions. Framer makes sure your assets are always crisp.
Large design files can contain a lot of nested layers. If you're leaving these static, you could flatten them before importing. This improves the loading times of your prototypes, especially when shared online. Flattened layers can't be selected in Framer, they're merged with their superLayer. Appending an asterisk (*) to a layer group or artboard will flatten its subLayers.
JPG & PDF Export
By default, images are imported as PNGs. We now also support JPG and PDF layers. Simply add the file format to the layer name, and Framer will take care of the rest. The extension is automatically removed after importing.
With PDF support, you're able to use vector graphics that can be infinitely scaled, by adjusting the
Download this example to learn how you can infinitely scale an imported icon in Framer.
# Import file "cloud"sketch = FramerImporterload"[email protected]"# Set width and height, scale 2xsketch.icon.width *= 2sketch.icon.height *= 2
Previously, Framer stacked all artboards on top of eachother, and all but the first one was hidden.
y positions of your artboards are respected, and they're all visible by default.
The most left artboard on your canvas in Sketch is set to 0,0. All others are positioned relative to this.
We've also improved the importing stability, and tackled a few known bugs. Positioning issues caused by using multiple masks and hidden layers have been fixed. We hope these new features speed up your design workflow, and would love to hear your thoughts in our Facebook Community.
Introducing Auto-Code for Animation Design
A powerful feature to easily design your animations.
October 13, 2016
Better error reporting, for coding peace of mind
Take the guesswork out of code errors with inline reporting
September 29, 2016
Licensing and pricing plans to suit every workflow
A one year licensing update and overview of pricing plans
September 28, 2016
Design for the big screen with new desktop features
A feature set designed to boost your workflow.
September 08, 2016
A simple way to import and iterate with Figma
Introducing integration with Figma.
August 23, 2016
Personalize your projects with new sharing features
A new way to share in Framer.
August 04, 2016