Framer Studio  1.9.9 is here. This is mainly a bugfix release with some small performance improvements.

You can get it by selecting “Check for Updates…” from the Framer Studio menu, or upgrade your current project by selecting File > Update Framer.

  • Fixed bug with mirror where the url field would stay empty or have the wrong address
  • Improved text navigation, option (shift) arrow now jumps to the next property, rather than full words
  • Small other fixes

If you have problems or need an older version, you can always find them in our archive.

Framer Studio 1.9 - Yosemite

By Koen Bok

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.

  • The JavaScript engine is up to 40% faster, thanks to the new Fourth Tier LLVM JIT compiler. Because JavaScript is the basis for all your projects, this means that building, editing and running your prototypes is way faster. iOS8 uses the same technology, so your prototypes will run even faster on mobile now, too.
  • 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.

By Koen Bok

Framer Studio 1.8.28 is here. This is mainly a bugfix release with some small performance improvements.

You can get it by selecting “Check for Updates…” from the Framer Studio menu, or upgrade your current project by selecting File > Update Framer.

  • Moved text indexing to a background thread for faster editing in large documents
  • Added automatic backups every thirty seconds under framer/backup.coffee
  • Improved text syntax recolouring performance
  • Improved the way Framer Studio loads generated Javascript for imports etc.
  • Improved Sketch importing and added better error handling
  • Fixed links to new website
  • Removed < 3.1 Sketch support
  • Updated to latest Framer version
  • Fixed a bug with retina rendering where projects got drawn with non-retina resolution
  • Fixed animation issue where linear and bezier animations would move too far
  • Added layer.perspective property

If you have problems or need an older version, you can always find them in our archive.

Framer Site Update

By Benjamin den Boer

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.

We’d love to hear what you think on Twitter.

framerjs.com/learn
framerjs.com/docs

By Koen Bok

Framer Studio 1.8.15 is here. 

You can get it by selecting “Check for Updates…” from the Framer Studio menu, or upgrade your current project by selecting File > Update Framer.

  • Changed the order of the iPhone 5s device menu
  • Updated default text for new projects
  • Fixed save on quit error
  • Fixed toolbar active state after application was hidden
  • Fixed an autocompletion bug for words that started with ‘w’
  • Fixed an error in Utils.modulate where outA > outB and limit true
  • Fixed debug view (escape)
  • Compatibility fix for borderRadius with strings (“50%”)
  • Fixed animation repeat
  • Fixed event bugs for animations
  • Fixed evaluated properties for animations
  • Added layer.force2d to force 2d rendering (masks with border radius)
  • Added experimental AnimationGroup

By Koen Bok

Framer Studio 1.8.5 is here. This is mostly a bugfix release with some small improvements. The big one was scrolling behaviour on mobile, which is now fixed.

You can get it by selecting “Check for Updates…” from the Framer Studio menu, or upgrade your current project by selecting File > Update Framer.

  • Improved coffee script parsing, a grammar error now doesn’t reload the preview (less flickering)
  • Fixed links to the website
  • Fixed typo in javascript error reporting
  • Fixed a bug on importing where layer order would be reversed
  • Fixed a bug with scrolling on mobile
  • Fixed a bug with “change:x” events during animations
  • Fixed a bug with Context CSS
  • Simplified the animation loop to a render and update function
  • Added .querySelector and .querySelectorAll to Layer
  • Improved handing of pointer events for interactive elements that you add to layer.html like input, textarea etc.

Framer Studio 1.8 with Device Control

By Koen Bok

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.

Feature Overview

  • 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.

Additional Info

  • 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.

Framer Studio 1.7 - Mirror

By Jorn van Dijk

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. 

Feature Overview

  • Runs on any device with a WebKit browser
  • Built in web server
  • Runs on your WiFi network
  • Fast reloading
  • Share URL via message or mail
  • Overview of active projects
  • Optional offline caching

Other Improvements

  • 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.

Framer Studio 1.7 is a free upgrade and available to download today. 

image

Designing with Code

By Benjamin den Boer

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.

image

Framer Studio 1.6 with Revamped Sketch Support

By Koen Bok

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

Other Improvements

  • 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.

Framer Studio 1.6 is available for download today.