OS X Yosemite is right around the corner, and we’re happy to announce that we have our best release yet.
We’ve updated Framer’s aesthetics to match Yosemite, which means the overall product feels cleaner and more at home on the new platform. We added an in-app documentation browser and a quicker way to inspect your prototype. Furthermore, we’ve updated the error state in the editor to be more clear, especially when the line with the error is currently not visible.
But the biggest changes in this release are under the hood and result in huge performance improvements for every part of the app. The main technology that makes this possible is Apple’s WebKit2 engine, which is a complete overhaul.
WebKit2 introduces a new process model, which puts the page rendering and networking in their own process, separate from the main app. This means that rendering doesn’t block the editor anymore, resulting in no lag during editing.
The text editor now indexes your code in the background. That means faster autocomplete results for faster editing.
We hope you’ll enjoy Framer Studio 1.9. Remember that you need Yosemite for most of the above, so if you are not in the public beta you’ll need a few more days of patience.
Today, we’re rolling out a big update to the site. We’ve completely revamped the learn section with new content, beautiful examples, videos and illustrations to explain Framer in much more detail. Starting to prototype has never been easier with a page dedicated to explaining basic principles around animation, state, events, dragging and more.
The documentation has been overhauled as well, and now covers all functionality. Every item has an inline example and a better navigation makes it easier to find what you’re looking for.
Today, we’re thrilled to ship Framer Studio 1.8. This version features a complete rewrite of the viewer, which is much faster and very flexible. It’s created completely in Framer, which means you now have full control over the device and background. We’ve added support for both portrait and landscape viewing, cleaned up the zoom controls and added a new viewing mode called ‘zoom to fit’.
Together with Tomas Jasovsky from mockuuups.com we have added beautiful hi-res device artwork. They went out of their way and photographed a hand for every device. It looks phenomenal when presented in full-screen. Obviously, there’s support for iPhone 6 and Apple Watch.
Better zoom controls, zoom to fit
Landscape and portrait rotation
Better background control
New device artwork for iPhone 6, iPhone 5s, iPhone 5c, iPad Mini, iPad Air, Nexus 5 and Apple Watch
Framer Studio 1.8 is available for download today and there’s a new section in the docs. If you run into any bugs, please help us out by submitting an issue on GitHub.
The device is powered by the new DeviceView. Framer Studio automatically creates it for you under Framer.Device. You can control it in your prototypes: Framer.Device.orientationName = “landscape”.
The DeviceView is part of Framer.js (open source) and you are welcome to add more devices.
If you were using content zoom before, you will notice we took the interface control out. You can now scale your content with: Framer.Device.contentScale = 0.5
In full screen you can control the device with CMD -, CMD + and CMD 0.
Because the device consists of standard Framer layers you can do anything with them. An example is to simply set a background image: Framer.Device.background.image = “image.jpg”
When you upload your Framer prototype online, the Device you’ve selected is automatically included.
We suspect the Apple Watch resolution is going to be 340 / 400, but can’t know for sure.
Today, we’re excited to ship Framer Studio with a big new feature. Mirror allows you to preview your prototype on any device: iPhone, iPad, Android and more – with a WebKit browser.
Here’s how it works and why we think its great. When you launch Framer Studio and open a saved project, a small webserver runs in the background. When you are ready to preview, a local URL is assigned to your prototype. Connect your mobile device to the same WiFi network as your Mac and open the URL - done!
There are two upsides to this approach. First is that syncing over local WiFi is fast and easy. Save your prototype on Mac and it automatically triggers a refresh on mobile. Second is that you can save your prototype to the homescreen of your device, for quick access. We’ve included nice colourful touch icons, as well.
Runs on any device with a WebKit browser
Built in web server
Runs on your WiFi network
Share URL via message or mail
Overview of active projects
Optional offline caching
File saving has been rewritten and is now faster
Better compatibility with Git and Dropbox
Error: “another app modified this document” is resolved
We’ve been using Mirror a lot and think you’ll love it. If you run into any bugs, please help us out by submitting an issue on GitHub. Finally, the docs have been updated with a new section about Mirror.
At the LA Hacker News Meetup of August 21, Jay Stakelon gave a talk titled Designing with Code. He covered the basics of Framer, looked at a couple of prototypes built with Framer, and went over some tips and tricks on how to get the most out of Framer. The prototype shown above was used as an example for his talk. Check it out on Dribbble.
In close collaboration with the Bohemian Coding team, we’re happy to announce much improved Sketch support in Framer Studio. We’ve improved the stability of importing and made padding and masking behaviour more predictable. The import sheet has improved states to describe what is going on and a dedicated import button for Sketch Beta. We also improved the documentation for importing and added a list of gotchas that you might run into.
Revamped Sketch Importing (Sketch 3.1+)
Fixed padding bugs where groups with borders, blur and shadows would generate extra padding
Fixed masking issues where only the masked pixels for an image would get exported
Many other small bug fixes
Revamped Import Sheet
Sketch Beta now has its own import button
Improved states: app running, document open, ready to go
Improved document detection
Updated looks and improved descriptions
Extra check for successful run with better warning
Added help button with new documentation, including gotchas
Disable automatic text replacements in editor (… → …)
Signed the coscript binary inside the app bundle to avoid gatekeeper errors
Improved autocomplete to not show a single result that is the same as the input word
Removed target-densitydpi from viewport in index.html because it’s deprecated
Updated Framer library
This solves a lot of issues around importing and we hope you’ll enjoy it. Please keep in mind that to get the Sketch import improvements today, you need the latest beta. If you run into any more bugs, please help us out by submitting an issue on GitHub.