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.
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.
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.
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 Dribbble. Jay 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 Dropbox. This is great material if you want to start learning Framer.
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.