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.
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
Introducing Framer for iOS
A beautiful new way to interact with your prototypes on mobile.
July 21, 2016
Plug and Play with MIDI
Hook up your design and physically manipulate it on the fly.
June 30, 2016
Get organized with Code Folds
An intuitive new way to manage your code.
June 09, 2016