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.

Tutorial: Masking Layers with Rounded Corners

By Benjamin den Boer

Masking is a straightforward process when working in design tools like Photoshop or Sketch. Masking with code however, is a little more complicated. We ran into the following issue when creating the tooltip animation shown above.

A parent layer with a border radius applied, will not always appropriately mask its children. Its children may overflow around the edges. Explicitly setting clip or overflow properties makes no difference. This issue is caused by 3D properties that all layers in Framer inherit for optimal animation performance.

Luckily, there is an alternative way to do this, using Webkit Masks. Here is a solution to appropriately mask layers with rounded corners.

1.  Create a layer with a set width, height and borderRadius, and a transparant background.

2.  Create the same layer in Photoshop or Sketch, with any background you’d like.

3.  Set that image as the mask of the original layer (defined in Framer) with Webkit Mask.

This serves as a workaround to mask layers containing other layers. We’re working on a different solution that allows you to remove 3D properties for specific layers. This will enable different effects, including masking.

See it live on the example site.

Dynamic Color

By Benjamin den Boer

Min-Sang Choi created a new Framer prototype from Google’s Material Design. In this example, the dominant color from any given image is extracted in real-time with Colorthief. A few things to note:

- Extracting key colors using Colorthief.js 
- Contains an audio player that actually plays music 
- Neat ripple effect on shuffle button

See it live on his site.

Color Switch

By Jorn van Dijk

Ayana Campbell posted a cool shot to Dribbble. Here’s what she has to say about Framer:

This is a great product and I’m so glad I’ve finally gotten around to playing with it. I’m having a lot of fun and learning a lot since my coding background is very limited!

Check out all of her work or see it live on the example site.

This release has a new Framer library build with small improvements and improved auto-completion.

  • Auto-complete improvements
  • Added more auto-complete words
  • You can now pass an offset to layer.centerX(10) and layer.centerY(10)
  • You can now chain center functions: layer.center().pixelAlign()
  • Layer state events (StateDidSwitch, StateWillSwitch) are now also directly emitted on the layer

Improved Auto-Complete

By Koen Bok

We’ve improved the way Framer Studio lists auto-complete results. Until now, it simply listed results in order in which they occurred within the default word-list or your code.

The new behavior splits the list in case-sensitive results at the top and case-insensitive results on the bottom. So if you start typing “La” the result “Layer” will be on top of “layer”. This makes sense, because if you take the effort to type case-sensitive you should get a result matching that first.

From there, it sorts the suggestions by length, which visually helps you narrow down to the right result, because when you type more characters it feels like you get closer to the one you’re looking for. And finally, if we have suggestions with equal length, we sort them alphabetically.

Optimizing heuristics like this is an always on-going process to find the perfect balance. So we would love to hear what you think in the Facebook Group. We hope these improvements will help you be even more productive with Framer Studio.

Prototyping with Framer

By Jorn van Dijk

Jay Stakelon taught a workshop at Fullscreen on July 11, 2014, and again at General Assembly in Santa Monica on July 16, 2014.

A class for designers that introduces Framer Studio and basic CoffeeScript. Start merely curious and finish having prototyped responsive interactions and a basic mobile app.

Check out the presentation on Speaker Deck or view an example of what you’ll create on DribbbleJay has put together 5 lessons that he’ll walk you through in the presentation. Every lesson has an exercise for practice, the source files and final solution. All of the files can be found on his DropboxThis is great material if you want to start learning Framer.

Prototyping with Video

By Benjamin Nathan

The latest version of Framer Studio supports videoLayers. A videoLayer allows you to include any type of video. It also introduces new methods and events such as play(), load(), on “play”, on “end” and many more.

Adobe’s After Effects is a powerful animation tool. It’s great for creating a complex path animation. With a videoLayer, you can include it in your prototype. To demonstrate how, we’ve recreated an example from Android (see above).

First, we create a basic version of the spinner in After Effects. We export it, and include it in our prototype. We then define the rotation, playback rate, opacity, scale and position in Framer. We slow it down slightly, and match the duration of the rotating animation with that of the video. Below is a code snippet showing what we’ve done with the original video:

Combining the flexibility of code with the animation capabilities of After Effects brings a new range of exciting possibilities.

See it live on the Examples Site.