Framer – Medium | Framer Team

Detaching code from canvas for a smarter but simpler workflow | Framer.com

Over the last 2 years, we’ve built Framer into an extensive product, one that’s supportive of, to quote ourselves, “design without limits”. But with such a robust toolkit comes some degree of clutter. Today we’re shipping a redesign of the Framer interface, one that aims to promote a more symbiotic flow between code and canvas. Rather than adding to an already crowded toolbar, we’ve made sure to keep this revamp smart and simple. Spring cleaning never looked this good.

Building blocks front and center.

For any beginner, Framer is best understood as a series of building blocks. You start by drawing a layer, then you add a state or animation, followed by an event, usually a tap or click. These four core concepts are simple for anyone to grasp and were designed to help get you up and running fast. These foundational blocks were always available through easy Auto-Code functions. However, because we had them nested under the insert menu in a busy toolbar, users were not intuitively discovering this easy flow. To stimulate a better onboarding process, we’ve moved these core Framer building blocks top left, into a clean sidebar dropdown for easy insertion. Now all your most important one-click functions are integrated directly into the editor.

Importing from Sketch, Docs and Error Inspecting have also moved to the bottom left of the side toolbar. Though they’re key contributors to your prototyping flow, you won’t need them as frequently as your main building blocks. Inspect now sits conveniently next to the error message display, making for an easy way to debug your prototype.

Canvas and code, united.

Perhaps most notably, we’ve done away with the classic Framer split screen.

Granted, giving equal space to code and canvas worked for a long time. But eventually, our community members reported a number of glaring issues — limited viewing flexibility, inability to see prototypes of different resolutions, locked device ratio, restricted use of dual screen workflows and so on. So we decided it was time to detach for good and hand you control over your own workspace. The result is an interface that is both easy on the eyes and functionally customizable.

If you prefer to keep your design environment tight, you can still drag the canvas back into the Framer chrome. It’ll snap to the bottom right of your editor, living comfortably between your code and the layer panel. It defaults to a canvas mode but we’ve made device switching simple — jump between devices directly in the canvas or select from the menu icon. Click to rotate, zoom, reload, select a hand or device. Need to go present? The standard green maximize button is readily available, automatically opening up into a fullscreen preview within the device of your choice.

Everything in its place.

When its time to test and share, you’ll find Cloud and Mirror previewing have been shifted to the top right corner. Fitting for features that are only needed toward the tail end of a common design workflow.

In this update, our welcome window also gets a refresh, providing easy access to our best resources. As part of our endeavor to lower the learning curve, we’ve also provided you with four ready-made examples. Paired with simple in-app onboarding instructions, each example acts as a standalone starter kit to help beginners grasp the simple code behind popular interaction patterns.

All in all, this redesign pairs the Framer interface to a smarter workflow, allowing for speedier, more efficient design work. Because we ship as soon as we features are built, you can expect ongoing additions. Got feedback or a feature request? Tweet us or leave a comment on Facebook, we’re all ears. Or give this post a ❤ to recommend it to your designer friends!

Designing the all-new Framer was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.