We’re excited to introduce Auto-Code, an all-new way to design with code in Framer. Code is an incredible tool for expressing complex interactions, but there are better ways to do visual design. Starting today, Framer gives you the best of both — the power of code combined with the ease of visual editing.
We built Framer to give you a better way to express your ideas. As product designers ourselves, we know the struggle to make a concept tangible. Designs are increasingly complex. Static mockups and simple flows aren’t always enough. With Framer, we created a way to design how a product moves and responds — how it feels.
But design is evolving. And so should the tools we’re using to design. We’re bringing you an optimized tool to bridge the gap between visual and interaction design. An even better way to build and create products. By understanding your code, we can offer a visual interface to help you design. This allows you to explore more ideas, much quicker. And you won’t give up any of the flexibility you have with Framer.
The added benefit is that Framer is now far easier to learn and use. Code has a learning curve, and we know getting started can be intimidating. But we believe it’s one of the best design tools. Until today, you may have chosen simple design tools to avoid using code. But that’s about to change. The new Framer makes the highest level of design and prototyping accessible to everyone. Let’s take a closer look at all the new features.
Code has never been this easy
Get started without writing a single line of code. We’ve added a new Insert Menu that lets you quickly insert Layers, States and Events. Framer will write your first lines of code. You can focus on design.
The Insert Menu is a great place to begin. The new + button in the toolbar lets you quickly insert a Layer. Like magic, a Layer will appear in the viewer, and your first lines of code will show up on the left. States can be inserted the same way. From there, you can design everything exactly how you want it. And there are a few different ways you can do this now.
Framer has a new panel in the center with all the properties you can edit. This lets you fine-tune Layers visually, rather than writing code. You can also just choose to edit your Layers directly on the canvas. To go into Edit Mode for any Layer or State, just click the small icon next to the code. From there, you can live manipulate or make adjustments in the Property Panel. The whole idea is that you can work the way you want — directly on the canvas, in the Property Panel or in code. Choose what works best for you and the task at hand.
To add interactivity, start by inserting an Event from the Insert Menu. Events are used to trigger many different interactions, for instance, toggling between States. An Event can be anything like tapping or scrolling, or more advanced gestures such as pinching and panning. They are all neatly listed in the insert menu. On insert, Framer will write the code to get you started with any Event. You can take it from there. Find out more about Events in the documentation.
Visually design your interactions
Even if you’re a pro at working in code, sometimes it’s just easier to move a Layer with your mouse, than it is to type coordinates. Code isn’t the best tool for every job. Depending on what you’re trying to achieve, you should be able to work in different ways. And now you can.
With our new visual editing tools, simply pick up a Layer and move it around right on the canvas. You can scale it, rotate it, position it, and Framer will keep your code updated. Hold Shift to resize proportionately or Option+Shift to resize from the center, just like in other design tools. We even added snapping guides to help you align. Work in a more intuitive way, without sacrificing any of the flexibility you get with code.
In the Property Panel, you can now easily pick a color, set the border radius or add a drop shadow. All your properties are accessible, so you can design every detail. More advanced filters let you blur and adjust the brightness and contrast. And you can even rotate in 3D to add dimension.
When you’re ready to take it up a notch, you’ll really start to see the power of combining basic programming with live manipulation. Loop editing lets you create multiple Layers at once and edit them simultaneously. Change any element in a loop and see it update across all the other Layers. Add 3D rotation or even a scroll component, and your code will always stay in sync.
This is only the beginning! With Auto-Code, the possibilities are endless. We’ve just scratched the surface of what we can design with the power of code. And there’s much more to come from Framer.
You can view the full changelog for this release here. If you’re already a Framer license holder, this is a free update. All Framer licenses include a full year of updates. For more information please visit our pricing page.
We’re looking forward to getting your feedback and continuing to make Framer even better. Let us know what you think about the new features. Join the conversation on Twitter and in our Facebook Community.
